2

Fabric.jsでオーバーレイ画像を使用すると、次のように追加されます。

canvas.setOverlayImage('image.png', canvas.renderAll.bind(canvas));

私の問題は、キャンバスからそれを削除する方法が見つからないことです。remove(object)クラスから使用できるオブジェクトを削除するにはfabric.StaticCanvas、このメソッドのオブジェクトとしてオーバーレイ画像を提供する方法が見つかりません。オーバーレイ画像を次のように設定しようとしましたnull

canvas.setOverlayImage(null, canvas.renderAll.bind(canvas));

しかし、それは役に立ちませんでした。

4

5 に答える 5

8

ソースコードを見ると、(setOverlayImageのパラメーターとして)期待どおりにnullに設定できないバグのように見えます。static_canvas.class.jsを見ると、のソースコードが表示されますsetOverlayImage()

setOverlayImage: function (url, callback) { // TODO (kangax): test callback
  return fabric.util.loadImage(url, function(img) {
    this.overlayImage = img;
    callback && callback();
  }, this);
}

そして、util / misc.jsには、次のソースコードが表示されますutil.loadImage()

function loadImage(url, callback, context) {
  if (url) {
    var img = new Image();
    /** @ignore */
    img.onload = function () { 
      callback && callback.call(context, img);
      img = img.onload = null;
    };
    img.src = url;
  }
}

したがってsetOverlayImage()、nullをに渡すかどうかを確認できます。次に、nullがの引数になりutil.loadImage()ます。また、後者の引数がnullの場合、メソッドは何も実行しないため、操作全体は何も実行しません。

canvasオブジェクトをごまかして直接プロパティを設定する必要があるようです。

canvas.overlayImage = null;
canvas.renderAll.bind(canvas);
于 2012-01-22T00:57:39.447 に答える
0

オーバーレイ画像とヌルオーバーレイを交互に切り替えるトグルを作成しました。これは、Kangaxがコードを更新した後に可能になります。

function toggleOverlay(){
    if(!canvas.overlayImage){
        canvas.setOverlayImage(
            'img/transparent-overlay.png', 
            canvas.renderAll.bind(canvas)
        );
    }else{
        canvas.setOverlayImage(null, canvas.renderAll.bind(canvas));
    }
}
于 2014-06-25T01:42:23.903 に答える
0

Nullの代わりに空白にします。

canvas.setOverlayImage('', canvas.renderAll.bind(canvas));
于 2014-10-30T11:55:42.137 に答える
0


backgroundImage=0を設定して修正したのと同じ問題を見つけました

self.canvas.backgroundImage = 0;
于 2016-05-23T07:29:07.480 に答える
0

私が考えることができる唯一の回避策は、不透明度を0に設定することです

canvas.overlayImage.set('opatcity', 0)
canvas.renderAll()
于 2021-06-24T18:40:30.273 に答える