如何在FabricJS 2.4.5中实现双向斜向条纹填充

我明白你想要用FabricJS 2.4.5给图形添加右向和左向的斜纹填充，之前尝试的渐变方式没达到预期效果——只有图形高度足够大时才有点反应，还趋近于水平条纹，这是因为渐变的方向和颜色停止点的设置没找对路子。

咱们换个思路：线性渐变的方向直接决定了斜纹的倾斜方向，而通过均匀设置颜色停止点的间隔，就能得到粗细一致的斜纹，不用依赖图形的尺寸。

右向斜纹填充（左上到右下倾斜） #

调整渐变的方向为从对象的左上角到右下方向，然后交替设置黑白的颜色停止点，每个条纹的宽度可以通过调整停止点的间隔来控制：

canvas = new fabric.Canvas('canvas');
let points = [
 {x: 0, y: 0},
 {x: 300, y: 0},
 {x: 300, y: 350},
 {x: 0, y: 350}
];
let polygon = new fabric.Polygon(points, {
 fill : 'white',
 stroke : 'black',
 strokeWidth : 5,
 selectable: true,
 objectCaching: false, // 必须关闭缓存，确保渐变正确渲染
 lockScalingX: true,
 lockScalingY: true,
 lockMovementX: true,
 lockMovementY: true,
 lockRotation: true
});

// 生成右向斜纹的颜色停止点
const stripeWidth = 0.1; // 控制条纹粗细，值越小条纹越细
let rightStops = {};
for (let i = 0; i <= 1; i += stripeWidth * 2) {
  rightStops[i] = 'black';
  rightStops[i + stripeWidth] = 'black';
  rightStops[i + stripeWidth] = 'white';
  rightStops[i + stripeWidth * 2] = 'white';
}

polygon.setGradient('fill', {
 x1: 0,
 y1: 0,
 x2: 20, // 这个值控制渐变的“重复长度”，和stripeWidth配合调整密度
 y2: 20,
 colorStops: rightStops
});

canvas.add(polygon);
canvas.renderAll();

左向斜纹填充（右上到左下倾斜） #

只需要修改渐变的方向为从右上到左下，颜色停止点的逻辑和右向一致：

canvas = new fabric.Canvas('canvas');
let points = [
 {x: 0, y: 0},
 {x: 300, y: 0},
 {x: 300, y: 350},
 {x: 0, y: 350}
];
let polygon = new fabric.Polygon(points, {
 fill : 'white',
 stroke : 'black',
 strokeWidth : 5,
 selectable: true,
 objectCaching: false,
 lockScalingX: true,
 lockScalingY: true,
 lockMovementX: true,
 lockMovementY: true,
 lockRotation: true
});

const stripeWidth = 0.1;
let leftStops = {};
for (let i = 0; i <= 1; i += stripeWidth * 2) {
  leftStops[i] = 'black';
  leftStops[i + stripeWidth] = 'black';
  leftStops[i + stripeWidth] = 'white';
  leftStops[i + stripeWidth * 2] = 'white';
}

polygon.setGradient('fill', {
 x1: 20,
 y1: 0,
 x2: 0,
 y2: 20,
 colorStops: leftStops
});

canvas.add(polygon);
canvas.renderAll();

关键说明： #

• 渐变方向：右向用(0,0)到(20,20)，左向用(20,0)到(0,20)，这个坐标是相对对象本身的，所以不管对象大小，斜纹角度都保持一致。
• 条纹粗细：通过stripeWidth调整，值越小条纹越细；x2和y2的数值可以配合调整条纹的密度，数值越小条纹越密集。
• 关闭对象缓存：objectCaching: false必须设置，否则FabricJS会缓存对象，导致渐变渲染异常。

配套的HTML代码：

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.5/fabric.min.js"></script>
<canvas id="canvas" width="600" height="600" class="canvas"></canvas>

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