I was trying gradient color with difefrent shapes and values in fabricJS, what I came across is for linear one with values (x1,y1,x2,y2) if we do(10,0,0,0) and colorStops={0:'red',1:'black'} it starts with left side taking black color and applying gradient. But if I want to start from right side of a shape so either I can (0,0,10,0) or colorStops={0:'black',1:'red'}[switch the color], but value(gradient range) does not comes out to be same.
For value 10 for x1 the area it covers is more than if we do x2 = 10.
How can I manage equal gradient range for(top,right,bottom,left)?
PS: for right side I tried to give maximum value say 150% more that the side of the shape to x2 by keeping color order same.
here is my working fiddle fiddle1 and fiddle 2 on changing the color order fiddle2
答案 0 :(得分：0)
关键是x1，x2，y1，y2不是顶部，左边，底部，边距。
是2点p1和p2，以及它们各自的坐标
NSTimer他们描述了定义渐变所在的片段的点。
首先要明白的是，线性渐变在一个方向上无限延伸，即颜色不变的方向。
所以你不能给它4个边距并期望它像框架一样。
如果采用宽度为100且高度为50的布料形状，矩形，则可以通过以下方式定义一个左右10像素边距的线性水平渐变：
p1 = { x1, y1 }, p2 = { x2, y2 }.
这将使渐变从10移动到90并具有开始/结束颜色的第一个和最后一个10像素。无论颜色顺序如何。
如果你想要一个垂直的：
x1: 10
x2: WIDTH - 10
y1: any number
y2: the same number as y1.
如果对所有坐标使用不同的数字，渐变将获得一个角度，并且不会与宽度或高度对齐。