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

Question

我正在尝试使用织物 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;

或者启用全状态缓存（昂贵）：

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

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

fabric.Object.prototype.objectCaching = false;