Маскирование с использованием "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)