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 库发生了变化，但我自己也遇到了问题，我觉得这个问题还没有很好的答案......

自 OP 以来，某些 PIXI API 已更改，但请参阅 PIXI 文档了解拖动兔子示例。

精灵第一次开始拖动时的跳跃性是因为精灵总是相对于锚点/枢轴点定位。正因为如此，拖拽时锚点的位置会跟随鼠标的位置（至少在上面的代码中是这样）。如果您单击兔子的中心，您不会注意到，但是单击最边缘会产生非常明显的跳跃。当使用明显更大的精灵时（如 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;
}   

使用此设置，无论大小如何，拖动精灵都将是平滑的。非常适合创建点击并拖动以探索类型的环境，如 OP 中所链接。

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