Как удалить оверлейное изображение с холста Fabric.js?

Я использую оверлейное изображение в своем Fabric.js, и оно добавляется следующим образом:

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

Моя проблема в том, что я не могу найти способ удалить его с холста. Чтобы удалить объекты, я могу использовать remove(object) из класса fabric.StaticCanvas, но я не нашел способа, как использовать наложенное изображение в качестве объекта для этого метода. Я пытаюсь установить оверлейное изображение на null:

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

но это не помогло.


javascript canvas fabricjs
person ainla    schedule 22.01.2012    source источник

Ответы (5)


arrow_upward
8
arrow_downward

Глядя на исходный код, он выглядит почти как ошибка, из-за которой вы не можете установить его равным нулю, как вы ожидаете (в качестве параметра для setOverlayImage). Глядя на 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;
  }
}

Таким образом, вы можете видеть, что если вы передадите null в setOverlayImage(), null, в свою очередь, будет аргументом для util.loadImage(). И если аргумент последнего равен null, метод ничего не делает, поэтому, в свою очередь, вся операция ничего не делает.

Похоже, вам нужно схитрить и напрямую установить свойство для объекта canvas:

canvas.overlayImage = null;
canvas.renderAll.bind(canvas);
person Ben Lee    schedule 22.01.2012
comment
Спасибо! Отличный ответ! Я должен был также изучить источник, прежде чем публиковать здесь := Я уже сделал обходной путь, установив и очистив прозрачный PNG в качестве наложения, но ваш ответ дает правильный способ сделать это. - person ainla; 22.01.2012
comment
Да, это упущение с моей стороны. Спасибо, что поймали. Только что исправил — github.com/kangax/fabric.js/commit/ - person kangax; 22.01.2012

arrow_upward
0
arrow_downward

Я создал переключатель, который попеременно имеет наложенное изображение и нулевое наложение. Это возможно после обновления кода Kangax:

function toggleOverlay(){
    if(!canvas.overlayImage){
        canvas.setOverlayImage(
            'img/transparent-overlay.png', 
            canvas.renderAll.bind(canvas)
        );
    }else{
        canvas.setOverlayImage(null, canvas.renderAll.bind(canvas));
    }
}
person Marquizzo    schedule 25.06.2014

arrow_upward
0
arrow_downward

Вместо Null просто сделайте его пустым.

canvas.setOverlayImage('', canvas.renderAll.bind(canvas));
person Shiv    schedule 30.10.2014
comment
Не работает на моем конце. Переключился на setOverlayImage(null, ... и все заработало. - person Adiono; 24.07.2018

arrow_upward
0
arrow_downward

Я обнаружил ту же проблему,
я исправил, установив backgroundImage = 0 

self.canvas.backgroundImage = 0;
person Abdul Razak    schedule 23.05.2016

arrow_upward
0
arrow_downward

Единственный обходной путь, который я мог придумать, - это установить непрозрачность на 0.

canvas.overlayImage.set('opatcity', 0)
canvas.renderAll()
person Marques    schedule 24.06.2021