Как создать радиальный градиент с помощью Fabric.js

Кажется, я не могу найти хороший пример для последней версии Fabric (4.1), устанавливающей радиальный градиент либо на весь холст, либо на такой объект, как Rect.

У меня нет проблем с линейным градиентом, но правильное позиционирование для радиала (которое я просто хочу в центре) ускользнуло от меня. Вот это codepen, что я пробовал.

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

canvas gradient radial-gradients fabricjs
person Stacey Reiman    schedule 14.09.2020    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Прочитав спецификацию градиентов холста, я смог найти правильные настройки для установки радиальных градиентов как для холста, так и для объектов. Обновленный codepen находится здесь.

Вот часть, которая заставила работать радиальный градиент:

    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
        }
    }
person Stacey Reiman    schedule 14.09.2020