FabricJS渐变颜色值
问题描述：
我试图使用不同的形状和值在fabricJS中的渐变颜色，我碰到的是线性值(x1,y1,x2,y2)如果我们做(10,0,0,0)和colorStops={0:'red',1:'black'}它从左侧开始采用黑色和应用渐变。但如果我想从形状的右侧开始，所以我可以(0,0,10,0)或colorStops={0:'black',1:'red'} [切换颜色]，但值（梯度范围）不会相同。FabricJS渐变颜色值
对于x1的值10，它覆盖的区域比x2 = 10更多。 如何管理(top,right,bottom,left)的相同梯度范围？
PS：对于右侧，我试图通过保持颜色顺序相同来给出最大值，比形状的侧面多出150％。 这是我的工作小提琴fiddle1和改变颜色顺序fiddle2
答
的一点是，X1，X2，Y1，Y2不上，左，下，保证金小提琴2。
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
如果您使用不同的号码，所有的坐标，梯度将得到一个角度，不会与宽度或高度一致。