在 Fabric JS 中更改渐变颜色停止

Question

我想在画布背景上应用渐变。 （一些文字写在前面的画布上） 我在画布上添加了相同大小的矩形并在该矩形上应用渐变。

var rect = new fabric.Rect({
          left: 0,
          top: 0,
          width: canvas.width,
          height: canvas.height,      
          selectable: false
        });
    canvas.add(rect);
    canvas.sendToBack(rect);        
    rect.setGradient('fill',{
      type: 'linear',
      x1: 0,
      y1: 0,
      x2: rect.width,
      y2: rect.height,
      colorStops: {
        0: $('#grdColor1').val(),
        1: $('#grdColor2').val()
      }
    });
    canvas.renderAll();
    canvas.setActiveObject(text);

#grdColor1 & #grdColor1 是允许用户应用颜色的输入字段。 这段代码工作正常。 但我想从颜色输入中进一步改变 ColorStops 的颜色。因此用户也可以在之后动态选择和更改渐变颜色。

我试过了，但它不起作用：

$("#grdColor1").on('change', function(){
    o = canvas.item(0); //rect is set to back
    o.colorStops({
            0: $('#grdColor1').val(),
            1: $('#grdColor2').val(),
          });
    canvas.renderAll();
});

也尝试了 rect.colorStops 但没有成功。

更进一步，我想更改 setGradient 函数“线性”“径向”“x1”“x2”等的值。因此用户可以根据选择和颜色动态设置渐变选项。
方法是什么之后更改 setGradient 的值。

编辑 也试过了：

    $("#grdColor1").on('change', function() {
    rect.setGradient('fill',{
        colorStops: { //set colorStops again
            0: $('#grdColor1').val(),
            1: $('#grdColor2').val()
        }
    });
   });

我认为它没有选择矩形对象 因为我将它发送到后面并在之后选择了文本对象：

canvas.sendToBack(rect);
canvas.setActiveObject(text);

更新 1：

var r = canvas.item(0);
r.setGradient('fill',{  
    colorStops: {
        0: $('#grdColor1').val(),
        1: $('#grdColor2').val()
    }
});
canvas.renderAll();

现在正在选择矩形，但未正确应用渐变。 使用此代码，矩形背景仅更改为单色#grdColor1，即没有渐变效果。

Answer 1

grdColor1 更改时需要更改 setGradient，

$("#grdColor1").on('change', function(){;
   rect.setGradient('fill',{
      colorStops: { //set colorStops again
          0: $('#grdColor1').val(),
          1: $('#grdColor2').val()
      }
   });
    canvas.renderAll(); // now render
});

更新试试这个，

var r = canvas.item(0);
r.setGradient('fill',{
    type: 'linear',
    x1: 0,
    y1: 0,
    x2: r.width,
    y2: r.height,
    colorStops: {
       0: $('#grdColor1').val(),
       1: $('#grdColor2').val()
    }
});
canvas.renderAll();