在 Fabric JS 中更改渐变色标

Question

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

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 的颜色。所以用户之后也可以 select & 动态地改变渐变颜色。

我试过了，但没用：

$("#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 函数的值 "Linear" "Radial" "x1" "x2" 等。因此用户可以根据选择和颜色动态设置渐变选项。
之后setGradient的值有什么方法可以改变。

编辑 也试过:

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

我认为它不是 select 矩形对象因为我把它发回去，然后 selected 文本对象：

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

更新 1：

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

现在正 selecting 但渐变应用不正确。使用此代码，矩形背景仅更改为单色 #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();

在 Fabric JS 中更改渐变色标

Change Gradient Color Stops in Fabric JS

javascript

jquery

fabricjs