javascript - 单击按钮时使用fabricjs为形状赋予渐变

Question

我想为fabric.js中的形状赋予渐变样式，我想为所有形状编写通用的添加渐变方法，选择对象并单击提交按钮，它应该将填充更改为渐变。

小提琴:: 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);
});

Answer 1

从你的 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;
    }