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的颜色。因此用户可以选择＆amp;之后也会动态更改渐变颜色。

我尝试了这个，但它不起作用：

$("#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()
        }
    });
   });

我认为它没有选择rect对象因为我之后将它发送回来并选择了文本对象：

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

更新1：

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

现在rect正在选择，但未正确应用渐变。使用此代码时，rect背景仅更改为单色＃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中更改渐变颜色停止

1 个答案: