kineticjs에서 드래그하는 것은뿐만 아니라 전체 페이지를 이동합니다.

Question

이미지가 전체 레이어를 채우고 이미지가 크게 크기가 크므로 (드래그 할 수있는 : 레이어에서 true) 스크롤 한 다음 맨 위에 줄을 그립니다.문제는 Windows Phone 8에있는 것입니다. 높이와 너비를 장치의 높이와 너비로 설정하면 폭이 좋지만 높이가 너무 긴 전화의 높이가 두 배 이상 높고 오른쪽으로 스크롤하고 왼쪽으로 왼쪽으로 스크롤됩니다 (터치 벤트 당 1 프레임 이동)), 위아래로 스크롤하면 페이지를 자아 가치 (높이이기 때문에)하지만 레이어의 내용은 아닙니다. 또한 별도의 함수에 라인을 추가 할 때 전혀 표시되지 않습니다.

<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>

.

여기에 탐색 기능이 있습니다

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();
}

.

여기에 JSFIDDLE

미리 감사드립니다.

Answer 1

나는 최근에 window.innerHeight가 부정확 한 것으로 인해 매우 유사한 문제로 이루어졌습니다.간단한 수정은 뷰포트 메타 태그를 내 문서의 맨 위에 추가하는 것이 었습니다.

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=no">

.