Pixi.js: Спрайт привязывается к мыши в позиции привязки спрайта при перемещении мыши

Созданный на 23 июн. 2013 · 5Комментарии · Источник: pixijs/pixi.js

При перетаскивании (перемещении мыши), независимо от того, где на спрайте находится мышь, спрайт перемещается так, что теперь указатель мыши находится в позиции привязки спрайта.
Для более крупных спрайтов этот сдвиг довольно неприятен.
Было бы неплохо не требовать, чтобы указатель мыши находился в позиции привязки. Внутренне положение привязки должно поддерживаться для вычислений и т. Д. Независимо от положения мыши на спрайте.
Образец кода и изображение прилагаются. Примечания по воспроизведению:
- Код адаптирован и упрощен из примера перетаскивания в pixi.js (Пример 8).
- Загрузите изображение и переименуйте его в aboriginal-bunny.png, как указано в коде.
- Точка привязки кролика установлена на 0,1, 0,1
- Поместите курсор мыши где-нибудь ближе к нижней части спрайта, практически в любом месте, далеко от точки привязки.
- При mousedown альфа-канал спрайта меняется, но все остальное остается прежним, поэтому проблема, похоже, не связана с mousedown.
- Затем перетащите - начните движение с нажатой кнопкой мыши - чуть-чуть
- Обратите внимание на внезапное смещение спрайта, так что мышь находится в точке привязки.
- Отныне перетаскивание выполняется с помощью мыши на этом якоре.

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

Привет,

Это решает мою проблему, и ее легче понять, спасибо. И да, мой код основан на том, как работает пример, поэтому было бы хорошо, если бы пример можно было обновить - я помню, что у меня возникли проблемы с пониманием того, как это работает, думаю, он не работал полностью. :П

Связанный с этим вопрос: существует ли строгая необходимость устанавливать значение NULL для данных взаимодействия при наведении курсора мыши?

Я также до сих пор не понимаю, когда требуется getLocalPosition, а не только текущая позиция.

PS. не беспокойтесь, подробности отчета об ошибке, по крайней мере, я мог сделать. Спасибо за предоставленную библиотеку. :)

kva1966 23 июн. 2013

Причина getLocalPosition состоит в том, чтобы преобразовать абсолютные координаты события мыши в локальные относительные координаты, которые использует DisplayObjects. Положение каждого DisplayObject относительно его родительского объекта, поэтому мы берем абсолютные координаты мыши и преобразуем их относительно родительского объекта с помощью this.data.getLocalPosition(this.parent) .

Нет особой необходимости устанавливать this.data = null при наведении курсора мыши. На самом деле вы должны иметь возможность просто использовать параметр data для каждой функции и вообще не использовать this.data .

englercj 23 июн. 2013

👍1

В очередной раз благодарим за помощь; довольно новичок в графических библиотеках, поэтому разберемся с различными вариантами реализации. Благодарю разработчиков pixi за то, что они нашли время, чтобы своевременно ответить на мои вопросы.

kva1966 23 июн. 2013

Этот поток был автоматически заблокирован, поскольку после его закрытия в последнее время не было никаких действий. Пожалуйста, откройте новую проблему для связанных ошибок.