Arrastar no KineticJS move a página inteira, não apenas a arrastável
-
22-12-2019 - |
Pergunta
Eu tenho uma imagem preenchendo toda a camada, a imagem é grande então eu rolo usando (arrastável: true na camada), depois desenho uma linha em cima dela.O problema está no Windows Phone 8 quando eu defino a altura e a largura para a altura e largura do dispositivo, a largura está boa, mas a altura é muito longa, mais que o dobro da altura do telefone, a rolagem para a direita e para a esquerda é lenta (move 1 quadro por evento de toque ), rolando para cima e para baixo, role a própria página (já que é alta), mas não o conteúdo da camada.Além disso, quando adiciono a linha em uma função separada, ela não é mostrada.
<div id="content" data-role="content" class="high">
<script type="text/javascript" src="javascript/map.js"></script>
<script>
var stage = new Kinetic.Stage({
container: 'content',
width: window.innerWidth,
height: (window.innerHeight * 73) / 100
});
var layer = new Kinetic.Layer({
draggable: true
});
var imageObj = new Image();
imageObj.onload = function () {
var yoda = new Kinetic.Image({
x: 0,
y: 0,
image: imageObj,
width: 1964,
height: 1289
});
layer.add(yoda);
stage.add(layer);
}
imageObj.src = 'image/map-04.png';
navigate("A","B");
</script>
</div>
e aqui está a função de navegação
function navigate(from, to, layer) {
var redLine = new Kinetic.Line({
points: [73, 70, 340, 23, 450, 60, 500, 20],
stroke: 'red',
strokeWidth: 15,
lineCap: 'round',
lineJoin: 'round'
});
layer.add(redLine);
layer.draw();
}
Aqui está um JSFiddle http://jsfiddle.net/3LpVS/
Desde já, obrigado.
Solução
Encontrei um problema muito semelhante recentemente, causado por window.innerHeight
sendo impreciso.A solução simples foi adicionar uma meta tag de janela de visualização na parte superior do meu documento.
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=no">