pixi的graphics转sprite,及简单交互
程序员文章站
2022-04-20 08:33:12
拖拽方法,应用在graphics上。const app = new PIXI.Application({ backgroundColor: 0x1099bb });document.body.appendChild(app.view);// create a texture from an image pathconst texture = PIXI.Texture.from("examples/assets/bunny.png");// Scale mode for pixelatio....
拖拽方法,应用在graphics上。
const app = new PIXI.Application({ backgroundColor: 0x1099bb });
document.body.appendChild(app.view);
// create a texture from an image path
const texture = PIXI.Texture.from("examples/assets/bunny.png");
// Scale mode for pixelation
texture.baseTexture.scaleMode = PIXI.SCALE_MODES.NEAREST;
for (let i = 0; i < 10; i++) {
createBunny(
Math.floor(Math.random() * app.screen.width),
Math.floor(Math.random() * app.screen.height)
);
}
createCirlc();
function createCirlc() {
var gr = new PIXI.Graphics();
gr.beginFill(0xff0000);
gr.lineStyle(0);
gr.drawCircle(30, 30, 30);
gr.endFill();
// var txture = app.renderer.generateTexture(gr);
// var circle = new PIXI.Sprite(txture);
// circle.anchor.set(0.5);
gr.interactive = true;
gr.on("pointerdown", onDragStart)
.on("pointerup", onDragEnd)
.on("pointerupoutside", onDragEnd)
.on("pointermove", onDragMove);
app.stage.addChild(gr);
}
function createBunny(x, y) {
// 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(3);
// 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);
}
var offset = {};
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;
const newPosition = this.data.getLocalPosition(this.parent);
offset.x = newPosition.x - this.x;
offset.y = newPosition.y - this.y;
this.alpha = 0.5;
this.dragging = true;
}
function onDragEnd() {
this.alpha = 1;
this.dragging = false;
// set the interaction data to null
this.data = null;
}
function onDragMove() {
if (this.dragging) {
const newPosition = this.data.getLocalPosition(this.parent);
this.x = newPosition.x - offset.x;
this.y = newPosition.y - offset.y;
}
}
本文地址:https://blog.csdn.net/jianlun3009/article/details/108856771