Pixi.js 图片拖动时跳转

Question

我在使用 pixi.js 时遇到问题 我正在创建一个类似 http://www.wolverineunleashed.com/#muscles 的页面我创建了一个大舞台，用户可以使用他们的拖动方式，除了用户拖动时一切正常，图像在屏幕上抖动，我认为这可能是渲染问题？但此刻我正在拔头发，所以任何帮助都将不胜感激。我的代码是:

var w = window.innerWidth;
var h = window.innerHeight;
var images = [];
var stage = new PIXI.Container();
var renderer = new PIXI.autoDetectRenderer(w, h,{transparent:true},true);
document.body.appendChild(renderer.view);

var background = new PIXI.Container();
background.parent = background;
background.interactive = true;

background.on('mousedown', onDragStart)
        .on('touchstart', onDragStart)
        .on('mouseup', onDragEnd)
        .on('mouseupoutside', onDragEnd)
        .on('touchend', onDragEnd)
        .on('touchendoutside', onDragEnd)
        .on('mousemove', onDragMove)
        .on('touchmove', onDragMove);

loadImages();

requestAnimationFrame(animate);

function animate() {
    requestAnimationFrame(animate);
    renderer.render(background);
}

function onDragStart(event)
{
    this.data = event.data;
    this.mousePressPoint = [];
    this.dragging = true;
    this.mousePressPoint[0] = this.data.getLocalPosition(this.parent).x - this.position.x;
    this.mousePressPoint[1] = this.data.getLocalPosition(this.parent).y - this.position.y;
}

function onDragEnd()
{
    this.dragging = false;
    this.data = null;
}

function onDragMove()
{
    if (this.dragging)
    {
        var position = this.data.getLocalPosition(this.parent);
        this.position.x = parseInt(position.x - this.mousePressPoint[0]);
        this.position.y = parseInt(position.y - this.mousePressPoint[1]);
    }
}

Answer 1

这是一个非常古老的问题，自 OP 以来 PIXI 库已经发生了变化，但我自己也遇到了这个问题，我觉得这个问题还没有很好的答案......

一些 PIXI API 自 OP 以来发生了变化，但请参阅 dragging bunnies example 的 PIXI 文档.

Sprite 第一次开始拖动时的跳跃是因为 Sprite 总是相对于 anchor /枢轴点定位。因此， anchor 的位置在拖动时跟随鼠标的位置(至少在上面的代码中)。如果你点击兔子的中心，你不会注意到，但点击最边缘，会产生非常明显的跳跃。当使用明显更大的 Sprite 时(如 OP 中链接的示例)，这种跳跃会变得非常明显。

这是我修复它的方法:

PIXI 演示几乎不需要更改。 onDragEnd 和 onDragMove 保持相同:

function onDragEnd(){
    this.dragging=false;
    this.data = null;
}


function onDragMove(){
    if (this.dragging){
        let newPosition = this.data.getLocalPosition(this.parent);
            this.x = newPosition.x;
            this.y = newPosition.y;
        }
}

但是，我们需要将轴心点更新为 onDragStart 函数中点击事件的位置，如下所示:

function onDragStart(event){
    this.data = event.data;

    //store this variable for convenience           
    let position = this.data.getLocalPosition(this);

    // Set the pivot point to the new position
    this.pivot.set(position.x, position.y)

    // update the new position of the sprite to the position obtained through 
    // the global data. This ensures the position lines up with the location of 
    // the mouse on the screen. I'm not certain why, but this is necessary. 
    this.position.set(this.data.global.x, this.data.global.y)
    this.dragging = true;
}   

通过此设置，无论大小如何，拖动 sprite 都会很流畅。非常适合创建点击并拖动以探索的环境，如 OP 中所链接。

希望这对 future 两年的其他人有所帮助。