paperjs: штрих с градиентом

Question

Я хочу нарисовать график (линию), который синий, когда значения равны 0, и становится более красным, когда значения ~100 (поэтому цвет линии должен быть градиентом).

У меня есть две идеи, которые могут сработать, но, возможно, есть лучшее решение.

1. Не рисуйте линию, а делайте несколько кругов на каждый пиксель и окрашивайте эти круги в зависимости от значения x.

2. Поместите градиент на задний план и используйте линию в качестве обтравочной маски. Это возможно в 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],
...