在单击按钮时使用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;
    }