面料JS渐变色

Question

我使用的是面料js，需要制作渐变色。

Fabric JS Fiddle Fabric link

参考画布渐变 Reference Gredient link

请指导我使用Fabric 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,