<!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>
まず、詳細なバグレポートとサンプルコードをありがとうございます。たくさんの情報が提供されているととても助かります。
残念ながら、これはバグではありません。 この問題は、スプライトの位置をマウスを動かすたびにマウスの位置に設定することで発生します(おそらくそれが例のようになっているためです)。 実際には、マウスの動きのデルタによってスプライトを更新する必要があります。 次のようなものを試してください。
/*
* 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
に、マウスが_移動_した量(新しい位置に設定しない)でスプライトの位置を更新します。保存したマウスの位置を次回更新します。 これがお役に立てば幸いです。
こんにちは、
これで私の問題は解決し、理解しやすくなりました。ありがとうございます。 はい、私のコードは例がどのように機能するかに基づいているので、例を更新できれば良いでしょう-それがどのように機能するかを理解するのに苦労したことを思い出します、それは完全には機能しなかったと思います。 :P
関連する質問ですが、マウスアップでインタラクションデータをnullに設定する必要がありますか?
また、getLocalPositionが必要な場合と、現在の位置だけが必要な場合についても、まだわかりません。
PS。 心配はいりません。バグレポートの詳細、少なくとも私にはできます。 ライブラリを提供していただきありがとうございます。 :)
getLocalPosition
の理由は、マウスイベントの絶対座標を、DisplayObjectsが使用するローカル相対座標に変換するためです。 各DisplayObjectの位置はその親を基準にしているため、絶対的なマウス座標を取得し、 this.data.getLocalPosition(this.parent)
を使用して親を基準にするように変換します。
mouseupでthis.data = null
を設定する必要は特にありません。 本当にあなただけ使用することができるはずですdata
paramは各機能に、そして使用しないでthis.data
まったく。
助けてくれてありがとう。 グラフィックライブラリはかなり新しいので、さまざまな実装の選択に同意します。 時間をかけて私の質問にタイムリーに答えてくれたpixi開発者に感謝します。
このスレッドは、閉じられた後、最近のアクティビティがないため、自動的にロックされています。 関連するバグについては、新しい問題を開いてください。
最も参考になるコメント
まず、詳細なバグレポートとサンプルコードをありがとうございます。たくさんの情報が提供されているととても助かります。
残念ながら、これはバグではありません。 この問題は、スプライトの位置をマウスを動かすたびにマウスの位置に設定することで発生します(おそらくそれが例のようになっているためです)。 実際には、マウスの動きのデルタによってスプライトを更新する必要があります。 次のようなものを試してください。
重要なビットは
mousedown
にあります。次に、マウスの位置を保存します。次に、mousemove
に、マウスが_移動_した量(新しい位置に設定しない)でスプライトの位置を更新します。保存したマウスの位置を次回更新します。 これがお役に立てば幸いです。