Pixi.js: माउसमूव पर स्प्राइट एंकर स्थिति में माउस को स्प्राइट स्नैप करें

को निर्मित 23 जून 2013 · 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 मैं अपनी स्प्राइट स्थिति को अपडेट करता हूं कि माउस ने _moved_ (इसे नई स्थिति में सेट नहीं किया है), फिर मैं अगली बार संग्रहीत माउस स्थिति को अद्यतन करता हूं। मैं इस उम्मीद में हूँ की इससे मदद मिलेगी!

englercj 23 जून 2013

👍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 23 जून 2013

👍2

नमस्ते,

यह मेरी समस्या का समाधान करता है, और समझने के लिए बहुत स्पष्ट है, धन्यवाद। और हां, मेरा कोड इस बात पर आधारित है कि उदाहरण कैसे काम करता है, इसलिए अच्छा होगा यदि उदाहरण को अपडेट किया जा सकता है - मुझे याद है कि यह कैसे काम करता है यह समझने में परेशानी हो रही है, अनुमान लगाएं कि यह पूरी तरह से काम नहीं करता है। :पी

एक संबंधित प्रश्न, क्या माउसअप पर इंटरेक्शन डेटा को शून्य पर सेट करने की सख्ती से आवश्यकता है?

मैं अभी भी अस्पष्ट हूं जब getLocalPosition की आवश्यकता होती है, बनाम केवल वर्तमान स्थिति।

पुनश्च. कोई चिंता नहीं पुन: बग रिपोर्ट विवरण, कम से कम मैं कर सकता था। पुस्तकालय उपलब्ध कराने के लिए धन्यवाद। :)

kva1966 23 जून 2013

getLocalPosition का कारण माउस ईवेंट के निरपेक्ष कोर्ड्स को स्थानीय सापेक्ष कॉर्ड में बदलना है जो DisplayObjects उपयोग करते हैं। प्रत्येक डिस्प्लेऑब्जेक्ट की स्थिति उसके माता-पिता के सापेक्ष होती है, इसलिए हम पूर्ण माउस कॉर्ड लेते हैं और उन्हें this.data.getLocalPosition(this.parent) साथ माता-पिता के सापेक्ष में बदलते हैं।

माउसअप पर this.data = null सेट करना विशेष रूप से आवश्यक नहीं है। वास्तव में आपको प्रत्येक फ़ंक्शन के लिए केवल data परम का उपयोग करने में सक्षम होना चाहिए, और this.data बिल्कुल भी उपयोग नहीं करना चाहिए।

englercj 23 जून 2013

👍1

आपकी सहायता के लिए एक बार फिर से धन्यवाद; ग्राफिक्स के काम के लिए बहुत नया है, इसलिए विभिन्न कार्यान्वयन विकल्पों के साथ तालमेल बिठाना। मेरे प्रश्नों का समय पर उत्तर देने के लिए समय निकालने वाले पिक्सी देवों की सराहना करें।

kva1966 23 जून 2013

इस थ्रेड को स्वचालित रूप से लॉक कर दिया गया है क्योंकि इसे बंद करने के बाद हाल ही में कोई गतिविधि नहीं हुई है। कृपया संबंधित बग के लिए एक नया मुद्दा खोलें।

lock[bot] 27 फ़र॰ 2019

क्या यह पृष्ठ उपयोगी था?

0 / 5 - 0 रेटिंग्स

Pixi.js: माउसमूव पर स्प्राइट एंकर स्थिति में माउस को स्प्राइट स्नैप करें

सबसे उपयोगी टिप्पणी

सभी 5 टिप्पणियाँ

संबंधित मुद्दों