Как удалить оверлейное изображение с полотна Fabric.js? - PullRequest
Новая
       10

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

1 голос
/ 22 января 2012

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

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

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

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

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

Ответы [ 4 ]

8 голосов
/ 22 января 2012

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

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

canvas.overlayImage = null;
canvas.renderAll.bind(canvas);
0 голосов
/ 23 мая 2016

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

self.canvas.backgroundImage = 0;
0 голосов
/ 30 октября 2014

Вместо Null просто оставьте это поле пустым. 

canvas.setOverlayImage('', canvas.renderAll.bind(canvas));
0 голосов
/ 25 июня 2014

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

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