更改渐变颜色停止在面料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(); 

现在rect正在选择，但渐变未正确应用。 使用此代码rect background仅更改为单色＃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();