Придайте градиент фигурам, используя fabricjs по нажатию кнопки

Question

Придайте градиент фигурам, используя fabricjs по нажатию кнопки

0

Я хочу, чтобы стиль Gradient для фигур в fabric.js, я хочу написать общий метод градиента добавления для всех фигур, выбрав объект и нажав кнопку отправки, он должен изменить заливку на градиент.

Fiddle :: http://jsfiddle.net/jdFet/1/

Пожалуйста, проверьте выше скрипка,

Код:

 var canvas;

$(function () {
    canvas = window.__canvas = new fabric.Canvas('canvas');
    canvas.backgroundColor = '#FFFFFF';
    var circle = new fabric.Circle({
        left: 100,
        top: 100,
        radius: 100
    });

    circle.setGradient('fill', 
                       { type:'linear',
                        x1: 0, 
                        y1: 0, 
                        x2: 0, 
                        y2: circle.height,
                        colorStops: { 0 : 'rgba(0,255,0,1)', 1 : 'rgba(0,0,255,1)'} });
    canvas.add(circle);
    console.log('Gradient', circle.fill);
});

anam 20 сен. 2013, в 12:14

Источник

Теги:

javascript

jquery

html

canvas

fabricjs

1 ответ

Ещё вопросы

Tom · Answer 1 · 2013-09-21T05-31-00.000Z

Из вашего jsfiddle я получил это: http://jsfiddle.net/hellomaya/jdFet/6/ Выберите всю форму, а затем измените свой градиент.

if (!obj) {
        obj = canvas.getActiveGroup();
        if (!obj) {
            return;
        }
        console.log (obj._objects);

        var objects = obj.getObjects();
        for (i in objects) {
            objects[i].setGradient('fill', {
                type: 'linear',
                x1: 0,
                y1: 0,
                x2: 0,
                y2: objects[i].height,
                colorStops: {
                    0: 'black',
                    1: 'red'
                }
            });
        }
        canvas.renderAll();
        return;
    }