Question

希望有人可以帮我解决这个问题。

我正在从Json加载画布，并在回调功能上试图擦除其中一个对象。

canvas.loadFromJSON(
    json, 
    function() {
        canvas.setWatermark();    
        canvas.setWidth(arr.width);
        canvas.setHeight(arr.height);               
        canvas.renderAll.bind(canvas)
    }
);

fabric.Canvas.prototype.getWatermark = function() {
    var object = null,
        objects = canvas.getObjects();

    for (var i = 0, len = this.size(); i < len; i++) {
        if (objects[i].myType && objects[i].myType === 'watermark') {
            object = objects[i];
            break;
        }
    }

    return object;
};

fabric.Canvas.prototype.setWatermark = function() {
    var watermark=canvas.getWatermark();      
    canvas.remove(watermark);
};

由于某种原因，它不会删除水印。当我调试它显示时，画布上现在有myType='watermark'对象。但是当代码完成后，我会在画布和对象中看到水印。

在loadfromjson之后是不是应该回调？

Answer 1

fabric.Canvas.prototype.getWatermark = function() {
    var object = null,
        objects = this.getObjects();

    for (var i = 0, len = this.size(); i < len; i++) {
        if (objects[i].myType && objects[i].myType === 'watermark') {
            object = objects[i];
            break;
        }
    }
    return object;
};

fabric.Canvas.prototype.setWatermark = function() {
    var watermark= this.getWatermark();      
    this.remove(watermark);
};
// initialize fabric canvas and assign to global windows object for debug
var canvas = window._canvas = new fabric.Canvas('c');

var json = '{"objects":[{"myType":"watermark","type":"rect","originX":"center","originY":"center","left":300,"top":150,"width":150,"height":150,"fill":"#29477F","overlayFill":null,"stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":{"color":"rgba(94, 128, 191, 0.5)","blur":5,"offsetX":10,"offsetY":10},"visible":true,"clipTo":null,"rx":0,"ry":0,"x":0,"y":0},{"type":"circle","originX":"center","originY":"center","left":300,"top":400,"width":200,"height":200,"fill":"rgb(166,111,213)","overlayFill":null,"stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":{"color":"#5b238A","blur":20,"offsetX":-20,"offsetY":-10},"visible":true,"clipTo":null,"radius":100}],"background":""}'

canvas.loadFromJSON(
    json, 
    function() {
        canvas.setWatermark();    
        //canvas.setWidth(arr.width);
        //canvas.setHeight(arr.height);               
        canvas.renderAll.bind(canvas);
    }
);

canvas {
    border: 2px dotted black;
}

<script src="https://rawgithub.com/kangax/fabric.js/master/dist/fabric.js"></script>
<canvas id="c" width="600" height="600"></canvas>

使用前声明函数。作为画布的原型，您需要使用this而不是canvas来获取画布功能。

Fabric.js loadFromJSON回调无法看到加载的对象

1 个答案: