使用Pixi.js / html画布绘制鼠标选择区域(橡皮筋)

<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/5.3.3/pixi.min.js"></script>

<canvas id="canvas"></canvas>

const app = new PIXI.Application({
    view: document.getElementById('canvas'),
    width: window.innerWidth,
    height: window.innerHeight,
    backgroundColor: 0x000000, // 设置画布背景颜色
});

// 将渲染器自适应窗口大小
window.addEventListener('resize', () => {
    app.renderer.resize(window.innerWidth, window.innerHeight);
});

const graphics = new PIXI.Graphics();
app.stage.addChild(graphics);

let isDrawing = false;
let startX, startY;

app.view.addEventListener('mousedown', (event) => {
    isDrawing = true;
    startX = event.clientX;
    startY = event.clientY;
});

app.view.addEventListener('mousemove', (event) => {
    if (isDrawing) {
        const width = event.clientX - startX;
        const height = event.clientY - startY;

        graphics.clear();
        graphics.lineStyle(2, 0xFFFFFF);
        graphics.drawRect(startX, startY, width, height);
    }
});

app.view.addEventListener('mouseup', () => {
    isDrawing = false;
});