如何使用PixiJS绘制带虚线边框的矩形？

当然可以实现，PixiJS的Graphics API支持通过配置描边参数来绘制虚线边框，只需要在stroke方法的配置对象中添加dash属性定义虚线的间隔模式即可。

修改后的完整代码 #

import {Application, Graphics} from 'pixi.js';

(async () => {
    const app = new Application();
    await app.init({width: 300, height: 300});
    document.body.appendChild(app.canvas);
    
    const c = 'white';
    const x = 0;
    const y = 0;
    const w = 100;
    const h = 100;

    const graphics = new Graphics();
    graphics.rect(x, y, w, h);
    graphics.fill(c);
    // 配置虚线：5px实线 + 3px空白的循环模式
    graphics.stroke({ 
        width: 1, 
        color: 217854, 
        dash: [5, 3] 
    });

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

关键参数说明 #

• dash：数组类型，元素依次代表实线长度和空白间隔长度，循环重复。例如：
  • [5, 3]：5像素实线、3像素空白交替
  • [10, 2, 2, 2]：10px实线、2px空白、2px实线、2px空白的复杂循环
• dashOffset（可选）：控制虚线的起始偏移量，比如dashOffset: 2会让虚线整体偏移2像素，常用于调整视觉对齐。

内容的提问来源于stack exchange，提问作者Pavel K