欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

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