Fabric JS 그래디언트 색상

Question

저는 fabric js를 사용하고 있으며 그라디언트 색상을 사용해야합니다.

직물 JS 바이올린 Fabric link

참조 캔버스 구배 Reference Gredient link

정상 캔버스를 사용하는 것과 같이 경사를 달성하기 위해 원단 JS 날 가이드주세요.

Fabric JS :+Snap of code 
rect.setGradient('fill', { 
    x1: 0, 
    y1: -rect.height, 
    x2: rect.width, 
    y2: rect.height, 
    colorStops: { 
    0: "black", 
    0.5: "red", 
    1: "blue" 
    } 
}); 

Normal Canvas Code : 
var grd=ctx.createLinearGradient(45,50,170,90); 
grd.addColorStop(0,"black"); 
grd.addColorStop(0.5,"red"); 
grd.addColorStop(1,"blue"); 
ctx.fillStyle=grd; 
ctx.fillRect(20,20,150,100); 

Answer 1

나는 3 가지 색상으로 fabricjs를 사용하여 그라디언트를 얻으려고합니다. 바이올린 here을 사용하면 이렇게 할 수 있습니다.

//diagonal 
rect.setGradient('fill', { 
    x1: -rect.width/2, 
    y1: -rect.height/2, 
    x2: rect.width/2, 
    y2: rect.height/2, 
    colorStops: { 
    0: "black", 
    0.5: "red", 
    1: "blue" 
    } 
    }); 
// horizontal 
    rect.setGradient('fill', { 
    x1: -rect.width/2, 
    y1: 0, 
    x2: rect.width/2, 
    y2: 0, 
    colorStops: { 
     0: "black", 
     0.5: "red", 
     1: "blue" 
    } 
    }); 

    // vertical just change below 
    x1: 0, 
    y1: -rect.height/2, 
    x2: 0, 
    y2: rect.height/2,