pixijs dragging定位問題

pixijs

21312sdasdas 2021-02-17 21:23:00 ‧ 1346 瀏覽

分享至

如果pixijs 開啓了dragging
用滑鼠拖動Sprite時會根據Anchor的位置，而不是點擊圖案的位置而定位
請問有方法改變嗎?

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

1 個回答

ccutmis

iT邦高手 2 級 ‧ 2021-02-18 12:22:28

最佳解答

用官網範例修改的DEMO:
https://ccutmis.github.io/ithome-htm/js_pixiJS_dragging.htm

DEMO源碼:

<!DOCTYPE html>
<html lang="zh-tw">
<head>
	<meta charset="UTF-8">
	<title>pixiJS-dragging-demo</title>
	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
	<style>
	*,html{margin:0;padding:0;}
	body{background: #333;overflow:hidden;}
	</style>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://d157l7jdn8e5sf.cloudfront.net/dev/pixi-legacy.js"></script>
<script>
const docW=$( document ).width(),docH=$( document ).height();
window.onload = function(){
const app = new PIXI.Application({width:docW,height:docH, backgroundColor: 0x666666 });
$("body").append(app.view);
// create a texture from an image path
const texture = PIXI.Texture.from('../ithome-images/coin.png');

// Scale mode for pixelation
texture.baseTexture.scaleMode = PIXI.SCALE_MODES.NEAREST;

// Sprite drag offset
let spriteMouseLocationOffsetX = 0;
let spriteMouseLocationOffsetY = 0;

for (let i = 0; i < 10; i++) {
    createBunny(
        Math.floor(Math.random() * app.screen.width),
        Math.floor(Math.random() * app.screen.height),
		i
    );
}

function createBunny(x, y,zOrder) {
    // create our little bunny friend..
    const bunny = new PIXI.Sprite(texture);

    // enable the bunny to be interactive... this will allow it to respond to mouse and touch events
    bunny.interactive = true;

    // this button mode will mean the hand cursor appears when you roll over the bunny with your mouse
    bunny.buttonMode = true;

    // center the bunny's anchor point
    bunny.anchor.set(0.5);

    // make it a bit bigger, so it's easier to grab
    bunny.scale.set(1);

    // setup events for mouse + touch using
    // the pointer events
    bunny
        .on('pointerdown', onDragStart)
        .on('pointerup', onDragEnd)
        .on('pointerupoutside', onDragEnd)
        .on('pointermove', onDragMove);

    // For mouse-only events
    // .on('mousedown', onDragStart)
    // .on('mouseup', onDragEnd)
    // .on('mouseupoutside', onDragEnd)
    // .on('mousemove', onDragMove);

    // For touch-only events
    // .on('touchstart', onDragStart)
    // .on('touchend', onDragEnd)
    // .on('touchendoutside', onDragEnd)
    // .on('touchmove', onDragMove);

    // move the sprite to its designated position
    bunny.x = x;
    bunny.y = y;
    // add it to the stage
    app.stage.addChild(bunny);
}

function onDragStart(event) {
    // store a reference to the data
    // the reason for this is because of multitouch
    // we want to track the movement of this particular touch
    this.data = event.data;
    this.alpha = 0.5;
    this.dragging = true;
    // get the mouse coursor location within the window
    const appCursorLocation = this.data.getLocalPosition(this.parent);
    // calculate the offset with the app cursor location - sprite location
    spriteMouseLocationOffsetX = appCursorLocation.x - this.x 
    spriteMouseLocationOffsetY = appCursorLocation.y - this.y 
}

function onDragEnd() {
    this.alpha = 1;
    this.dragging = false;
    // set the interaction data to null
    this.data = null;
    spriteMouseLocationOffsetX = 0;
    spriteMouseLocationOffsetY = 0;
}

function onDragMove() {
    if (this.dragging) {
        const newPosition = this.data.getLocalPosition(this.parent);
        // adjust the sprite prosition using the offset
        this.x = newPosition.x - spriteMouseLocationOffsetX;
        this.y = newPosition.y - spriteMouseLocationOffsetY;
    }
}
}</script>
</body>
</html>

參考資料: http://blog.theozzyblogger.com/2020/12/pixi-js.html