Pixi.js 图形绘制技巧：正确使用stroke方法绘制线条

在PIXI.js图形渲染库中，绘制线条是一个基础但重要的功能。许多开发者在使用Graphics类绘制线条时可能会遇到一个常见问题：明明调用了moveTo和lineTo方法，线条却无法正常显示。本文将深入解析这个问题背后的原因，并提供正确的解决方案。

问题现象

当开发者尝试使用以下代码绘制线条时：

let line = new PIXI.Graphics();
line.stroke({
  color: 0xaaaaaa,
  width: 10,
});
line.moveTo(100, 100).lineTo(app.screen.width / 2, app.screen.height / 2);
app.stage.addChild(line);

线条不会出现在画布上。然而，如果重复调用stroke方法两次，线条却能正常显示。

原因分析

这个现象的根本原因在于PIXI.js Graphics类的工作机制。stroke方法实际上是一个"绘制命令"，它告诉渲染器将当前定义的路径用指定的样式绘制出来。关键在于：

1. stroke方法需要在定义完路径后调用
2. 每次调用stroke都会基于当前定义的路径进行绘制
3. 路径定义(moveTo/lineTo)和绘制命令(stroke)的顺序很重要

正确用法

正确的做法应该是先定义路径，再调用stroke方法：

let line = new PIXI.Graphics();
line.moveTo(100, 100).lineTo(app.screen.width / 2, app.screen.height / 2);
line.stroke({
  color: 0xaaaaaa,
  width: 10,
});
app.stage.addChild(line);

这种顺序之所以能正常工作，是因为：

1. 首先通过moveTo和lineTo定义了路径
2. 然后通过stroke方法将这个路径用指定的样式绘制出来
3. 最后将图形对象添加到舞台

进阶技巧

在实际开发中，我们还可以利用以下技巧：

1. 批量绘制：可以连续定义多个路径，然后一次性stroke
2. 样式重用：定义一次stroke样式，可以应用于多个路径
3. 路径重置：使用clear方法可以清除之前定义的所有路径

示例代码：

let graphics = new PIXI.Graphics();

// 定义第一条路径
graphics.moveTo(50, 50);
graphics.lineTo(200, 50);

// 定义第二条路径
graphics.moveTo(50, 100);
graphics.lineTo(200, 100);

// 一次性绘制所有路径
graphics.stroke({
  color: 0xff0000,
  width: 5
});

app.stage.addChild(graphics);

性能考虑

在性能敏感的应用中，应该注意：

1. 尽量减少stroke调用的次数
2. 将相同样式的线条批量绘制
3. 对于静态图形，考虑使用缓存技术

总结

PIXI.js中绘制线条的关键在于理解路径定义和绘制命令的执行顺序。正确的做法是先通过moveTo和lineTo定义路径，然后再调用stroke方法进行绘制。掌握这个基本原理后，开发者可以更灵活地创建各种复杂的图形效果。

记住这个简单的原则：先定义路径，再绘制样式。这将帮助您避免许多常见的图形绘制问题，并提高开发效率。