0

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

1 に答える 1

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;
    }
于 2013-09-21T06:47:44.573 に答える