Question

我正在尝试使用fabric js更改文本的颜色/字体。所选文本的颜色仅在我玩对象后更改（更改目标对象的尺寸）。如何立即反映变化？

这是我的HTML：

<md-button colorpicker="rgb"
           class="md-icon-button"
           type="button"
           colorpicker-position="bottom"
           colorpicker-close-on-select
           ng-model="myCtrl.color"
           colorpicker-closed="myCtrl.changeColor()"
           ng-change="myCtrl.changeColor()"> Change Color
</md-button>

这会弹出一个颜色选择器，任何人都可以选择颜色。这种颜色变化通过ng-model和变化反映出来我称之为ng-change，它在我的控制器中调用我的简单函数：

model.changeColor = function () {
        model.canvas._activeObject.fill = model.color;
        model.canvas.renderAll();
    };

但是，如果不对目标对象尺寸进行任何更改，颜色不会改变。这是控制器的其余部分：

var createCanvas = function (width, height) {

model.canvas = new fabric.Canvas(document.getElementById("portfolioCanvas"));
        model.canvas.setWidth(width);
        model.canvas.setHeight(height);
        model.canvas.calcOffset();



        var text = new fabric.Text('NAME',
            {left: 200, top: 40, rx: 40, ry: 20, angle: 0, fontSize: 10, 
             fontWeight: 'bold'});


        model.canvas.add(text);
        model.canvas.on({
            'object:moving': onChangeFn,
            'object:scaling': onChangeFn,
            'object:rotating': onChangeFn,
            'object:drag': onChangeFn,
            'touch:drag': onChangeFn,
            'object:modified': onChangeFn
        });
    };


    var onChangeFn = function (options) {
        options.target.setCoords();
        model.canvas.forEachObject(function (obj) {
            if (obj === options.target) return;
            obj.setOpacity(options.target.intersectsWithObject(obj) ? 0.5 :1);
        });
    };

我也试图应用这样的更改，但它也没有用。

    $scope.$$postDigest(function () {
            model.canvas._activeObject.fill = model.color;
            $scope.$digest();
        });

Answer 1

您可能正在使用1.7.x版本。

请使用canvas.getActiveObject().set('fill', color)这会自动使缓存无效，在下次重绘时，您将获得颜色更改。

这是正确的方法。

其他方式同样正确：

var active = canvas.getActiveObject();
active.fill = color;
active.dirty = true;

或启用statefull缓存（昂贵）：

canvas.statefullCache = true;
canvas.getActiveObject().fill = color;

或者完全禁用缓存（不建议）：

fabric.Object.prototype.objectCaching = false;

除非我移动/缩放/修改对象，否则不会应用颜色更改

1 个答案: