Reputation: 465
*The Scenes:*
I use konva to draw a diagonal line in a rect, the rect api fillLinearGradientColorStops meet my need , when the value of fillLinearGradientColorStops Array length is smaller 200,the line is normal , but when length become bigger than 200, the lines become different color ,some lines is dark red some other is light red;
how to fix this error to make when length is 1000 the diagonal line color is same
core code
// get linear gradient step---start
const colors = []
const length = 500
Array(length).fill(0).map((_, index) => {
/**
* a rect is split into 10 parts, from 0 to 0.1 to 0.2 to 0.3 ...1;
* i only want set color is red in 0.1,0.2,0.3 and...0.9 ,and other is #fff,
* so i use a arr to store the result.
* if the length is bigger the red line is thinner,smaller gradient
*/
const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9]
colors.push(index * 0.002, arr.includes((index * 0.02)) ? "red" : '#fff')
})
// get linear gradient step---end
// draw a rect
const layer = new Konva.Layer();
const rect1 = new Konva.Rect({
x: 120,
y: 20,
width: 100,
height: 200,
fillLinearGradientStartPoint: {
x: 0,
y: 0
},
fillLinearGradientEndPoint: {
x: 100,
y: 200
},
fillLinearGradientColorStops: colors,
stroke: "black"
});
the array length is more bigger ,when near the interpolation the linear gradient is become smaller,the line will thinner
when length is 500,the result
bigger length make smaller gradient
how to get a normal red line or all red is the same color
Upvotes: 0
Views: 390
Reputation: 465
There is nothing much we can do from the Konva side. This is how the browser renders it. You can compare results in Firefox and Safari. You will see it is different from Chrome.
I think some of your lines get lighter because their size is too small.
this answser is come from konva core developer,then I test the same code in safari and firefox,i found the result is same.
Upvotes: 0