Fabric.js loadFromJSONコールバックに読み込まれたオブジェクトが表示されません

Question

誰かが私にこれを手渡してくれることを願っています。

Jsonからキャンバスを読み込んでいて、オブジェクトの1つを消去しようとしているコールバック機能があります。

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>

あなたが使用する前に関数を宣言します。キャンバスのプロトタイプとして、canvasの代わりにthisを使用してキャンバス機能を取得する必要があります。