Paper.js如何设置多彩描边颜色？

错误写法分析 #

• 多次赋值颜色：p.strokeColor = 'purple'; p.strokeColor = 'red';
  这种写法会让最后一次赋值的red覆盖之前的purple，最终只会显示红色描边。
• 直接传入颜色数组：p.strokeColor=['purple','red']
  Paper.js的strokeColor不支持数组格式的颜色参数，因此该写法无效。

正确实现方式 #

方式1：使用渐变作为描边颜色

如果需要描边呈现颜色过渡效果，可以创建Gradient对象作为strokeColor的值：

// 创建包含紫色和红色的线性渐变
const gradient = new Gradient(['purple', 'red'], [0, 1]);
// 创建路径并应用渐变描边
const coloredPath = new Path({
    segments: [[50, 100], [250, 100], [250, 200], [50, 200]],
    closed: true,
    strokeWidth: 15,
    strokeColor: gradient
});

方式2：拆分路径为多段分别设置颜色

如果需要路径的不同分段显示不同纯色，可以将原路径拆分为多个子路径，分别设置各自的strokeColor：

// 第一段紫色路径
const pathPurple = new Path({
    segments: [[50, 100], [250, 100]],
    strokeWidth: 15,
    strokeColor: 'purple'
});

// 第二段红色路径
const pathRed = new Path({
    segments: [[250, 100], [250, 200]],
    strokeWidth: 15,
    strokeColor: 'red'
});

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