更改漸變顏色停止在面料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();