我在 fabricJS 中尝试具有不同形状和值的渐变颜色，我遇到的是具有值 (x1,y1,x2,y2) 的线性颜色，如果我们这样做(10 ,0,0,0) 和 colorStops={0:'red',1:'black'} 它从左侧开始采用黑色并应用渐变。但是如果我想从形状的右侧开始，那么我可以 (0,0,10,0) 或 colorStops={0:'black',1:'red' }[切换颜色]，但值(梯度范围)并不相同。
对于 x1 的值为 10，它覆盖的区域比我们做 x2 = 10 时更大。
如何管理(top,right,bottom,left) 的相等梯度范围？
PS:对于右侧，我试图通过保持相同的颜色顺序，为 x2 提供最大值，比形状的一侧多 150%。
这是我的工作 fiddle fiddle1和 fiddle 2 改变颜色顺序 fiddle2
最佳答案
重点是 x1,x2,y1,y2 不是 top,left,bottom,margin.
是2个点p1和p2，以及它们各自的坐标
p1 = { x1, y1 }, p2 = { x2, y2 }.
它们描述了定义梯度存在的片段的点。
首先你要明白的是，线性渐变在一个方向上无限延伸，即颜色不变的方向。
所以你不能给它 4 个边距并期望它们像框架一样。
如果您采用宽度为 100 和高度为 50 的矩形织物形状，您可以定义一个线性水平渐变，左右边距为 10 像素，这样:
x1: 10
x2: WIDTH - 10
y1: any number
y2: the same number as y1.
这将使渐变从 10 移动到 90，并具有开始/结束颜色的第一个和最后 10 个像素。无论颜色顺序如何。
如果你想要一个垂直的:
x1: any number
x2: the same number as x2.
y1: 10
y2: HEIGHT - 10
如果您对所有坐标使用不同的数字，渐变将获得一个 Angular ，并且不会与宽度或高度对齐。
关于javascript - FabricJS 渐变颜色值，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46706855/