PixiJS v8中Graphics Context如何添加虚线着色器？

核心方案 #

PixiJS v8重构了Graphics的API，setStrokeStyle不再支持shader参数，需直接为Graphics实例指定着色器，并通过@pixi/graphics-smooth的DashLineShader配置虚线参数。

步骤与代码示例 #

1. 确保依赖适配v8
   安装兼容v8的@pixi/graphics-smooth版本：

   npm install @pixi/graphics-smooth@latest
   

2. 代码实现

   import { Application, Graphics } from 'pixi.js';
   import { DashLineShader } from '@pixi/graphics-smooth';
   
   // 创建应用
   const app = new Application({
       width: 800,
       height: 600,
       backgroundColor: 0xffffff
   });
   document.body.appendChild(app.view);
   
   // 创建Graphics实例并绑定DashLineShader
   const dashedLine = new Graphics();
   app.stage.addChild(dashedLine);
   
   // 初始化虚线着色器，配置虚线参数：[实线长度, 间隔长度]，偏移量
   const dashShader = new DashLineShader();
   dashShader.uniforms.dash = [20, 10]; // 实线20px，间隔10px
   dashShader.uniforms.dashOffset = 0; // 偏移量，可用于动画
   
   // 为Graphics设置着色器
   dashedLine.shader = dashShader;
   
   // 使用GraphicsContext绘制路径
   dashedLine
       .lineStyle({ width: 4, color: 0xff0000 }) // 设置基础描边样式（宽度、颜色）
       .beginPath()
       .moveTo(100, 100)
       .lineTo(700, 100)
       .lineTo(700, 500)
       .lineTo(100, 500)
       .closePath()
       .stroke(); // 执行描边，着色器会自动处理虚线效果
   

关键说明 #

• v8中Graphics的shader属性直接接受着色器实例，替代了v7中setStrokeStyle的shader参数。
• DashLineShader的uniforms可动态修改，比如调整dashOffset实现虚线滚动动画。
• 基础描边样式（宽度、颜色）仍通过lineStyle设置，着色器仅负责虚线的间隔计算。

内容的提问来源于stack exchange，提问作者Null Salad