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

我真希望你已經找到了如何解決這個問題，但由於沒有在這裏沒有答案，我會引導你在正確的方向。

你給我們的代碼缺少loadImages（）函數，但我相信我們應該能夠解決它。

的問題似乎在於這個代碼片段：

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); 

在這裏，您正在後臺容器互動，並給予它所有的事件處理程序。

你應該做的是讓每個單獨的精靈/圖像交互，併爲他們提供移動它的事件處理程序。

我在代碼中添加了下面的代碼： //從某個圖像創建一個精靈 var sprite = new PIXI.Sprite.fromImage（'some_image.png'）;

// Make the sprite interactive. should be done to each individual sprite 
sprite.interactive = true; 

// Set the anchor in the center of our sprite 
sprite.anchor.x = 0.5; 
sprite.anchor.y = 0.5; 

// Position our sprite in the center of the renderer 
sprite.position.x = renderer.width/2; 
sprite.position.y = renderer.height/2; 


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


background.addChild(sprite); 

而你應該把它放在你的loadImages函數中。然後讓該函數迭代每個圖像，爲它們提供它們需要的事件處理程序和選項。

這裏是基於你的代碼，工作。

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(); 

// Create a sprite from some image 
var sprite = new PIXI.Sprite.fromImage('some_image.png'); 

// Make the sprite interactive. should be done to each individual sprite 
sprite.interactive = true; 

// Set the anchor in the center of our sprite 
sprite.anchor.x = 0.5; 
sprite.anchor.y = 0.5; 

// Position our sprite in the center of the renderer 
sprite.position.x = renderer.width/2; 
sprite.position.y = renderer.height/2; 


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


background.addChild(sprite); 

requestAnimationFrame(animate); 

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

function onDragStart(event) 
{ 
    this.data = event.data; 
    this.mousePressPoint = []; 
    this.dragging = true; 
} 

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

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

Answer 2

這是一個非常古老的問題，由於OP陂溪庫發生了變化，但我有自己對這個問題，我不覺得這個問題尚未有一個很好的答案...

自OP以來，一些PIXI API已發生更改，但請參閱dragging bunnies example的PIXI文檔。

精靈首次開始拖動時的跳動是因爲精靈總是相對於定位點/中心點定位。因此，拖動時錨點的位置跟隨鼠標的位置（至少在上面的代碼中）。如果你點擊兔子的中心，你沒有注意到，但點擊邊緣，產生了非常明顯的跳躍。當使用明顯更大的精靈時（如OP中鏈接的例子），這種跳躍可能變得相當明顯。

這是我如何固定它：從陂溪演示改變

很少需要。 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中所鏈接的那樣。

希望這可以幫助別人在未來兩年。