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

Question

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

当我单击鼠标并按下左键单击时，我想从我单击的位置到我释放左键单击的区域画一条线。

我做到的最好的几乎是我想要的，但我想去掉所有出现的"intermediate"行。

这是我做的（不要看质量: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] 中存储的当前行，然后重新应用样式和新位置。

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

draw a line as if I wanted to draw house plan

javascript

pixi.js