FabricJS渐变颜色值
FabricJS渐变颜色值
提问于 2017-10-12 10:06:13
我在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%的形状。这是我关于更改颜色顺序fiddle2的有效小提琴fiddle1和小提琴2
回答 1
Stack Overflow用户
发布于 2017-10-14 11:48:44
重点是x1，x2，y1，y2不是上，左，下，边距。
是两个点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如果对所有坐标使用不同的数字，则渐变将获得一个角度，并且不会与宽度或高度对齐。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/46706855
复制相关文章
相似问题
腾讯云开发者
