如何创建一个径向渐变使用Fabric.js

Question

对于最新的布料（4.1），我似乎找不到一个很好的例子，在整个画布上或在一个对象（如矩形）上设置径向渐变。

我对线性渐变没有问题，但是让径向定位正确（我只想在中心）却让我捉摸不透。这是我尝试过的代码。

JS:

let canvas = new fabric.Canvas("c", {
    isDrawingMode: false
});

let colorStops; 
let angle = 180;

const shapeColorStops = {};
var anglePI = (-parseInt(angle, 10)) * (Math.PI / 180);

const setBackgroundGradient = (e) => {
    let coords;
    let type = e.target.id;

    if (type == 'radial') {
        console.log('trying to set radial gradient')
        coords = {
            r1: canvas.width/2,
            r2: 0,
            x1: canvas.width/2,
            y1: canvas.height/2,
          //  x2: 0,
          //  y2: 0
        }
    }
    else {
        console.log('trying to set linear gradient')
        coords = {
            x1: (Math.round(50 + Math.sin(anglePI) * 50) * canvas.width) / 100,
            y1: (Math.round(50 + Math.cos(anglePI) * 50) * canvas.height) / 100,
            x2: (Math.round(50 + Math.sin(anglePI + Math.PI) * 50) * canvas.width) / 100,
            y2: (Math.round(50 + Math.cos(anglePI + Math.PI) * 50) * canvas.height) / 100,
        }
    }
    var grad = new fabric.Gradient({
        type: type,
        coords: coords,
        colorStops: [
        {
            color: 'rgb(166,111,213)',
            offset: 0,
        },
        {    
            color: '#200772',
            offset: 1,
        }
        ]});
    canvas.setBackgroundColor(grad);
    canvas.renderAll();
}

Answer 1

在阅读了画布渐变的规范之后，我能够想出正确的设置来设置画布和对象的径向渐变。更新的代码笔在这里。

下面是使径向梯度工作的部分：

    if (!el) el =  canvas;
    let coords;
    let size = {width: el.width, height: el.height}
    let num = size.height/2;
    let radius = num + size.width/4;

    
    if (type == 'radial') {
        console.log('trying to set radial gradient, size is '+JSON.stringify(size))
       // the numbers for my canvas are  width="1920" height="1080"
        coords = {
        r1: radius,
        r2: size.width *.05,
       
        x1: size.width/2,
        y1: size.height/2,
        
        x2: size.width/2,
        y2: size.height/2
        }
    }