首页 文章

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

提问于
浏览 次
2

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

我正在从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之后回调？

javascript jquery canvas fabricjs

1 回答

  • 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>

    在使用之前声明函数 . 作为canvas的原型，您需要使用 this 而不是 canvas 来获取canvas函数 .

    回复于

相关问题