يؤدي السحب في KineticJS إلى نقل الصفحة بأكملها وليس فقط ما يمكن سحبه

Question

لدي صورة تملأ الطبقة بأكملها، الصورة كبيرة لذا قمت بالتمرير باستخدام (قابل للسحب: صحيح على الطبقة)، ثم أرسم خطًا فوقها.تكمن المشكلة في Windows Phone 8 عندما أقوم بتعيين الارتفاع والعرض على ارتفاع الجهاز وعرضه، يكون العرض جيدًا ولكن الارتفاع طويل جدًا أكثر من ضعف ارتفاع الهاتف، ويكون التمرير لليمين واليسار بطيئًا (يتحرك إطارًا واحدًا لكل حدث لمس) )، يؤدي التمرير لأعلى ولأسفل إلى تمرير الصفحة نفسها (نظرًا لطولها) ولكن ليس محتوى الطبقة.وأيضًا عندما أقوم بإضافة السطر في وظيفة منفصلة لا يظهر على الإطلاق.

<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 http://jsfiddle.net/3LpVS/

شكرا لك مقدما.

Answer 1

لقد واجهت مشكلة مشابهة جدًا مؤخرًا والتي كان سببها window.innerHeight كونها غير دقيقة.كان الإصلاح البسيط هو إضافة علامة تعريف viewport إلى أعلى المستند الخاص بي.

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