Pixi.js: 精灵在鼠标移动的精灵锚位置捕捉到鼠标

创建于 2013-06-23 · 5评论 · 资料来源: pixijs/pixi.js

拖动 (mousemove) 时，无论鼠标放置在精灵的哪个位置，精灵都会重新定位自己，以便鼠标指针现在位于精灵的锚点位置。
对于较大的精灵，这种转变相当刺耳。
不要求鼠标指针位于锚点位置会很好。在内部，无论鼠标在精灵上的位置如何，都必须保持锚点位置以进行计算等。
附上示例代码和图片。繁殖注意事项：
- 从 pixi.js 中的拖动示例（示例 8）改编和简化的代码。
- 下载图像并将其重命名为代码中引用的“aboriginal-bunny.png”。
- 兔子锚点设置为0.1, 0.1
- 将鼠标光标放在靠近精灵底部的地方，基本上是远离锚点的任何地方
- 在鼠标按下时，精灵的 alpha 会发生变化，但其他一切都相同，因此问题似乎不在鼠标按下上。
- 接下来，拖动 - 开始移动鼠标按钮 - 只是稍微
- 注意精灵的突然移动，因此鼠标位于其锚点上。
- 此后，在此锚点处保持鼠标拖动。

<!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我根据鼠标移动了多少来更新我的精灵位置（未将其设置为新位置），然后我下次更新存储的鼠标位置。我希望这有帮助！

englercj 于 2013-06-23

👍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 于 2013-06-23

👍2

你好，

这解决了我的问题，并且更容易理解，谢谢。是的，我的代码基于示例的工作方式，所以如果可以更新示例会很好——我记得在理解它的工作原理时遇到了麻烦，猜测它没有完全工作。 :P

一个相关的问题，是否严格需要在 mouseup 时将交互数据设置为 null？

我也不清楚什么时候需要 getLocalPosition，而不是当前位置。

附注。不用担心：错误报告详细信息，至少我可以做到。感谢提供图书馆。 :)

kva1966 于 2013-06-23

getLocalPosition是将鼠标事件的绝对坐标转换为 DisplayObjects 使用的局部相对坐标。每个 DisplayObject 的位置都相对于其父级，因此我们采用绝对鼠标坐标并使用this.data.getLocalPosition(this.parent)将它们转换为相对于父级。

在 mouseup 上设置this.data = null并不是特别必要。实际上，您应该能够对每个函数使用data参数，而根本不使用this.data 。

englercj 于 2013-06-23

👍1

再次感谢你的帮助; 图形库非常新，因此要了解各种实现选择。感谢 pixi 开发人员花时间及时回答我的问题。

kva1966 于 2013-06-23

由于关闭后没有任何近期活动，因此该线程已自动锁定。请为相关错误打开一个新问题。

lock[bot] 于 2019-02-27

此页面是否有帮助？

0 / 5 - 0 等级

Pixi.js: 精灵在鼠标移动的精灵锚位置捕捉到鼠标

最有用的评论

所有5条评论

相关问题