Trascinando in KineticJs sposta l'intera pagina non solo il trascinamento
-
22-12-2019 - |
Domanda
Ho un'immagine che riempie l'intero strato, l'immagine è grande quindi strolleo usando (trascinabile: true sul livello), poi disegno una linea sopra di esso.Il problema è in Windows Phone 8 Quando impostare l'altezza e la larghezza all'altezza e alla larghezza del dispositivo, la larghezza va bene, ma l'altezza è troppo lunga più del doppio del doppio del doppio dell'altezza del telefono, scorrere a destra e sinistra è pigro (muove 1 fotogramma per touchvent), Scorrimento su e giù per scorrere la pagina di sé (dal momento che è alto) ma non il contenuto del livello. Anche quando aggiungo la linea in una funzione separata non è mostrato affatto.
<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>
.
ed ecco la funzione navigabile
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();
}
.
Ecco un jsfiddle http://jsfiddle.net/3lpvs/
Grazie in anticipo.
Soluzione
Ho corso recentemente un problema molto simile che è stato causato da window.innerHeight
è impreciso.La semplice correzione è stata quella di aggiungere un tag MetaSport alla parte superiore del mio documento.
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=no">
.