Pixi.js: يستقر Sprite بالماوس في موضع ارتساء الكائن في حركة الماوس

تم إنشاؤها على ٢٣ يونيو ٢٠١٣ · 5تعليقات · مصدر: pixijs/pixi.js

عند السحب (تحريك الماوس) ، بغض النظر عن مكان وضع الماوس على الكائن ، يقوم الكائن بإعادة وضع نفسه بحيث يكون مؤشر الماوس الآن في موضع ارتساء الكائن.
بالنسبة للعفاريت الكبيرة ، يكون هذا التحول مؤلمًا إلى حد ما.
سيكون من الجيد ألا تتطلب أن يكون مؤشر الماوس في موضع التثبيت. داخليًا ، يجب الحفاظ على موضع الارتساء لإجراء العمليات الحسابية وما إلى ذلك بغض النظر عن موضع الماوس على الكائن.
رمز العينة والصورة المرفقة. ملاحظات على الاستنساخ:
- تم تكييف التعليمات البرمجية وتبسيطها من مثال السحب في pixi.js (مثال 8).
- قم بتنزيل الصورة وإعادة تسميتها إلى "aboriginal-bunny.png" كما هو مشار إليه في الكود.
- تم ضبط نقطة ربط الأرنب على 0.1 ، 0.1
- ضع مؤشر الماوس في مكان ما بالقرب من الجزء السفلي من الكائن ، وبصورة أساسية في أي مكان بعيدًا عن نقطة الربط
- في لوحة الماوس ، يتغير ألفا للكائن ، لكن كل شيء آخر هو نفسه ، لذلك لا يبدو أن المشكلة في الماوس.
- بعد ذلك ، اسحب - ابدأ في التحرك مع زر الماوس لأسفل - قليلاً فقط
- لاحظ التحول المفاجئ للكائن بحيث يكون الماوس على نقطة ربطه.
- من الآن فصاعدًا ، يتم الحفاظ على السحب باستخدام الماوس عند هذا المرساة.

<!DOCTYPE HTML>
<html>
<head>
    <!-- Shamelessly adapted from pixi.js Example 8 - Dragging -->
    <title>Sprite to Mouse Snapping issue</title>
    <script src="pixi.js"></script>
</head>
<body>
    <script>

    var stage = new PIXI.Stage(0x97c56e, true);
    var renderer = PIXI.autoDetectRenderer(window.innerWidth, window.innerHeight, null);

    // add the renderer view element to the DOM
    document.body.appendChild(renderer.view);
    renderer.view.style.position = "absolute";
    renderer.view.style.top = "0px";
    renderer.view.style.left = "0px";
    requestAnimFrame( animate );

    // create a texture from an image path
    var texture = PIXI.Texture.fromImage("aboriginal-bunny.png");

    createAboriginalBunny(100, 100);

    function createAboriginalBunny(x, y)
    {
        var bunny = new PIXI.Sprite(texture);
        bunny.setInteractive(true);

        // leaving anchor point at 10% to illustrate the problem clearer
        bunny.anchor.x = 0.1;
        bunny.anchor.y = 0.1;

        /*
         * Set-up dragging
         */     
        bunny.mousedown = bunny.touchstart = function(data)
        {
            this.data = data;
            this.alpha = 0.5;
            this.dragging = true;
        };

        bunny.mouseup = bunny.mouseupoutside = bunny.touchend = bunny.touchendoutside = function(data)
        {
            this.alpha = 1
            this.dragging = false;
            // set the interaction data to null
            this.data = null;
        };

        bunny.mousemove = bunny.touchmove = function(data)
        {
            if(this.dragging)
            {
                // need to get parent coords..
                var newPosition = this.data.getLocalPosition(this.parent);
                this.position.x = newPosition.x;
                this.position.y = newPosition.y;
            }
        }

        // move the sprite to initial pos
        bunny.position.x = x;
        bunny.position.y = y;

        stage.addChild(bunny);
    }

    function animate() {
        requestAnimFrame( animate );
        renderer.render(stage);
    }

    </script>

    </body>
</html>

aboriginal-bunny

مصدر

kva1966

التعليق الأكثر فائدة

بادئ ذي بدء ، شكرًا لك على تقرير الخطأ التفصيلي ونموذج الكود ، فهو يساعد كثيرًا عندما يتم تزويدنا بالكثير من المعلومات!

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

        /*
         * Set-up dragging
         */     
        bunny.mousedown = bunny.touchstart = function(data)
        {
            this.data = data;
            this.alpha = 0.5;
            this.dragging = this.data.getLocalPosition(this.parent);;
        };

        bunny.mouseup = bunny.mouseupoutside = bunny.touchend = bunny.touchendoutside = function(data)
        {
            this.alpha = 1
            this.dragging = false;
            // set the interaction data to null
            this.data = null;
        };

        bunny.mousemove = bunny.touchmove = function(data)
        {
            if(this.dragging)
            {
                // need to get parent coords..
                var newPosition = this.data.getLocalPosition(this.parent);
                this.position.x += (newPosition.x - this.dragging.x);
                this.position.y += (newPosition.y - this.dragging.y);
                this.dragging = newPosition;
            }
        }

البتات المهمة موجودة على mousedown أقوم بتخزين موقع الماوس ، ثم في mousemove أقوم بتحديث موضع الكائن الخاص بي عن طريق مقدار _Move_M الفأر (لم يتم تعيينه على الموضع الجديد) ، ثم أقوم بتحديث موضع الماوس المخزن للمرة القادمة. آمل أن يساعد هذا!

englercj في ٢٣ يونيو ٢٠١٣

👍2

ال 5 كومينتر

        /*
         * Set-up dragging
         */     
        bunny.mousedown = bunny.touchstart = function(data)
        {
            this.data = data;
            this.alpha = 0.5;
            this.dragging = this.data.getLocalPosition(this.parent);;
        };

        bunny.mouseup = bunny.mouseupoutside = bunny.touchend = bunny.touchendoutside = function(data)
        {
            this.alpha = 1
            this.dragging = false;
            // set the interaction data to null
            this.data = null;
        };

        bunny.mousemove = bunny.touchmove = function(data)
        {
            if(this.dragging)
            {
                // need to get parent coords..
                var newPosition = this.data.getLocalPosition(this.parent);
                this.position.x += (newPosition.x - this.dragging.x);
                this.position.y += (newPosition.y - this.dragging.y);
                this.dragging = newPosition;
            }
        }

englercj في ٢٣ يونيو ٢٠١٣

👍2

مرحبا،

هذا يحل مشكلتي ، وهو أوضح بكثير لفهمه ، شكرًا. ونعم ، يعتمد الكود الخاص بي على كيفية عمل المثال ، لذا سيكون جيدًا إذا أمكن تحديث المثال - أذكر أنني واجهت مشكلة في فهم كيفية عمله ، أعتقد أنه لم يعمل بشكل كامل. : ص

سؤال ذو صلة ، هل هناك حاجة صارمة لتعيين بيانات التفاعل إلى قيمة خالية عند النقر بالماوس؟

ما زلت غير واضح أيضًا متى يكون getLocalPosition مطلوبًا ، مقابل الوظيفة الحالية فقط.

ملاحظة. لا تقلق بشأن: تفاصيل تقرير الشوائب ، أقل ما يمكنني فعله. شكرا لتوفير المكتبة. :)

kva1966 في ٢٣ يونيو ٢٠١٣

سبب getLocalPosition هو تحويل الأوتار المطلقة لحدث الماوس ، إلى روابط نسبية محلية تستخدمها DisplayObjects. يكون موضع كل كائن DisplayObject نسبيًا إلى أصله ، لذلك نأخذ أسلاك الماوس المطلقة ونحولها لتكون ذات صلة بالأصل الذي يحتوي على this.data.getLocalPosition(this.parent) .

ليس من الضروري تحديد this.data = null عند تمرير الماوس. حقًا ، يجب أن تكون قادرًا فقط على استخدام المعلمة data لكل وظيفة ، وعدم استخدام this.data على الإطلاق.

englercj في ٢٣ يونيو ٢٠١٣

👍1

شكرا مرة أخرى لمساعدتكم؛ جديد تمامًا على libs الرسومات ، لذا فهم خيارات التنفيذ المختلفة. نقدر مطوري pixi الذين يأخذون الوقت الكافي للإجابة على أسئلتي في الوقت المناسب.

kva1966 في ٢٣ يونيو ٢٠١٣

تم قفل سلسلة الرسائل هذه تلقائيًا نظرًا لعدم وجود أي نشاط حديث بعد إغلاقه. الرجاء فتح قضية جديدة للأخطاء ذات الصلة.