Cognia
Cognia

Reputation: 465

how to draw a rect with diagonal lines with konva or svg.js and the lines is even spacing fill the rect

*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

enter image description here

bigger length make smaller gradient

enter image description here

enter image description here

how to get a normal red line or all red is the same color

Upvotes: 0

Views: 390

Answers (1)

Cognia
Cognia

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

Related Questions