Question

我是PIXI.js的新手，我尝试以特定方式构建一条线：

当我点击鼠标时，在按下左键的同时，我想从我点击的位置画一条线到我发布左键的区域。

我所取得的最好成绩几乎是我想要的，但我想摆脱出现的所有“中间”线。

这就是我所做的（不要看质量：p）：

let app = new PIXI.Application(window.innerWidth, window.innerHeight);

app.stage.interactive = true;

const background = new PIXI.Graphics();
background.beginFill(0xFFFFFF);
background.lineStyle(1, 0xFFFFFF);
background.drawRect(0, 0, window.innerWidth, window.innerHeight);
background.interactive = true;
app.stage.addChild(background);

let lines = [];

let initialMoveTo;

background.on("mousedown", (event) => {
    background.isCreatingLine = true;

    let mouseX = event.data.global.x;
    let mouseY = event.data.global.y;

    initialMoveTo = [mouseX, mouseY];

    let line = new PIXI.Graphics();
    line.lineStyle(1, 0x000000);
    line.moveTo(mouseX, mouseY);

    lines = [line].concat(lines);

    app.stage.addChild(line);
});

background.on("mousemove", (event) => {
    if (background.isCreatingLine) {
        let mouseX = event.data.global.x;
        let mouseY = event.data.global.y;

        lines[0].moveTo(initialMoveTo[0], initialMoveTo[1]);
        lines[0].lineTo(mouseX, mouseY);
    }
});

background.on("mouseup", (event) => {
    background.isCreatingLine = false;
});


document.body.appendChild(app.view);

这是codepen

有没有人知道如何实现这个目标？

Answer 1

我更新了您的代码，它似乎按照您希望的方式工作。

background.on("mousemove", (event) => {
    if (background.isCreatingLine) {
        let mouseX = event.data.global.x;
        let mouseY = event.data.global.y;
        lines[0].clear();
        lines[0].lineStyle(1, 0x000000);
        lines[0].moveTo(initialMoveTo[0], initialMoveTo[1]);
        lines[0].lineTo(mouseX, mouseY);
    }
});

每次鼠标移动时，清除行[0]中存储的当前行，然后重新应用样式和新位置。

画一条线就好像我想画房子计划一样

1 个答案: