javascript - 画一条线，好像我想画房子平面图

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);
    }
});

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