Question

我想绘制一个图形（一条线），当值为0时为蓝色;当值为~100时，它会变得更红（因此线条的颜色必须是渐变）。

我有两个可能有用的想法，但也许有更好的解决方案。

不要绘制一条线，而是每个像素都有多个圆圈，并根据其x值为这些圆圈着色。
将渐变放在背景中，并将该线用作剪贴蒙版。这可能在paperjs中，如果是的话怎么样？

虽然想法1很容易实现，但我认为我不会得到顺利的结果。

如果能给我一个更好的方法，或者我可以将一条线用作剪贴蒙版的例子，我将非常感激。

Answer 1

尝试以下代码。四处寻找值以获得您想要的结果。以下代码将帮助您了解如何将渐变应用于线条。

// Define two points which we will be using to construct
// the path and to position the gradient color:
var point1 = [0,350];
var point2 = [350, 0];

// Create a line between point1 and point2 points:
var path = new Path.Line({
    from: point1,
    to: point2,
    // Fill the line stroke with a gradient of two color stops
    strokeColor: {
    gradient: {
        stops: ['blue', 'red']
    },
            //origin and destination defines the direction of your gradient. In this case its vertical i.e bottom(blue/cooler) to up(red/warmer) refering to link you sent.
    origin: [0,200], //gradient will start applying from y=200 towards y=0. Adjust this value to get your desired result
    destination: [0,0]
},
    strokeWidth: 5
});

希望这会让事情变得更容易。

注意：您还可以在上面给出的渐变中更改蓝色和红色的百分比，如下所示：

...
gradient: {
    // blue from 0% to 33%, mix between blue and red from 33% to 66%, and remaining red (66% to 100%)
    // mix between red and black from 20% to 100%:
    stops: [['blue',0.33], ['red',0.66]]
},
origin: [0,350],
destination: [0,0],
...

paperjs：渐变笔画

1 个答案: