Маскирование с использованием "globalCompositionOperation", установленного в "source-atop", не работает, когда "objectCaching" имеет значение false

Я надеюсь, что вы можете помочь мне с этим вопросом, который у меня возник. В моем приложении я использую globalCompositionOperation, установленный на "source-atop", чтобы замаскировать изображения и объекты SVG в базовый объект. Базовый объект - это первый объект, добавленный на холст, и все остальные объекты должны быть привязаны к нему.

Проблема проявляется, когда я добавляю svg на холст и устанавливаю для его свойства objectCaching значение false. Затем объект не привязывается к базовому объекту, и globalCompositionOperation, установленный в "source-atop", не имеет никакого эффекта. Как только я установил для objectCaching значение true, globalCompositionOperation работает нормально.

    fabric.loadSVGFromString(svgString, function(objects, opts) {

        var svg = fabric.util.groupSVGElements(objects, opts);

        svg.set({
          objectCaching : false, //  <--- PROBLEM HERE ! , change to true to see how globalCompositeOperation works fine when objectCaching is set to "true"
          globalCompositeOperation : 'source-atop'
        });

В моем случае мне нужно установить objectCaching для объектов svg на false, поскольку мне нужно изменить цвета svg позже, и для этого он работает только тогда, когда objectCaching имеет значение false.

Если есть способ вручную "очистить" кэш объекта после того, как им манипулируют, это было бы здорово, но я не думаю, что текущий API это позволяет. Таким образом, я мог бы установить для objectCaching значение true, и отсечение с помощью globalCompositionOperation будет работать, и после изменения цветов svgs я мог очистить / обновить его кэш.

Пример здесь: http://jsfiddle.net/josefano09/hk1on32n/

ОБНОВИТЬ:

Причина, по которой я использовал objectCaching со значением false, заключается в том, что мой svg не рендерился должным образом, когда было установлено значение true. Я обнаружил, что это связано с ошибкой в ​​моем коде при получении цветов SVG. После того, как я исправил эту ошибку, я смог получить выгоду от лучшей производительности, используя objectCaching со значением true, а также отсечение объекта с помощью globalCompositionOperation работало нормально.

После этого мне нужно было только обновить svg сразу после того, как я изменил цвет для некоторых путей svg. Установка "грязного" флага в true и выполнение canvas.renderAll() работали отлично.

1 ответ

Решение

Чтобы было немного понятнее

Продолжай кешировать дальше.

svg.objectCaching = true; // default so dont need to set just here to show its val
svg.globalCompositeOperation = 'source-atop';

Когда вы меняете цвет, просто установите грязный флаг в true.

svg.dirty = true;
canvas.renderAll();  // you can force rendering or if you are rendering
                     // already you only have to set dirty, it will be
                     // re rendered the next time it is displayed

Добавьте следующее к вашей скрипке, чтобы увидеть, как это происходит.

svg.objectCaching = true;
svg.globalCompositeOperation = 'source-atop';

const cols = ["red","green","blue","yellow","black","orange"];
var colCount = 0;
setInterval(()=>{
  svg.paths.forEach(p=>{ p.fill = cols[colCount % cols.length] })
  colCount += 1;
  svg.dirty = true;
  canvas.renderAll();
},500)
Другие вопросы по тегам