我希望你能幫我解決我遇到的這個問題。在我的應用程序中,我使用globalCompositionOperation設置爲'source-atop'來將圖像和svg對象隱藏到基礎對象。基礎對象是添加到畫布上的第一個對象,所有其他對象都應該剪切。當「objectCaching」爲false時,使用「globalCompositionOperation」設置爲「source-atop」的掩碼不起作用
問題顯示,當我添加一個svg到畫布,並將其屬性objectCaching設置爲false。然後該對象不會剪裁到基礎對象,並且設置爲'source-atop'的globalCompositionOperation不起作用。只要我將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對象爲假,因爲我需要改變後對SVG的顏色,爲此,它似乎當objectCaching是假的,只工作。
如果有一種方法可以在操作後手動「清除」對象的緩存,那就太棒了,但我不認爲當前的api允許它。這樣我可以將objectCaching設置爲true,並且使用globalCompositionOperation進行剪裁將會起作用,並且在更改svgs的顏色後,我可以清除/刷新其緩存。
這裏舉例: http://jsfiddle.net/josefano09/hk1on32n/
UPDATE:
我用objectCaching設置爲false的原因是因爲我的SVG沒有渲染時正確它被設置爲true。我發現這是由於我的代碼在獲取svg顏色時出現錯誤。一旦我修復了這個錯誤,我可以利用objectCaching設置爲true來獲得更好的性能優勢,並且使用globalCompositionOperation的對象剪切也可以正常工作。
之後,我需要的是能夠在更改svg的某些路徑的顏色後更新svg。將「髒」標誌設置爲true,並執行canvas.renderAll()完美工作。
這看起來像一個bug,但它也似乎不可思議,他們沒有實現的'updateCache'方法......有些LIB的維護人員也來這裏經常,所以他們會給出一個正確的答案,但是,這裏是我的一個快速和醜陋的解決方法:http://jsfiddle.net/hk1on32n/3/(l191) – Kaiido
不要禁用緩存,如果你需要再次渲染對象(即改變一個屬性不是列表'object.stateProperties'),然後設置信號量'object.dirty = true;'。這將在下次渲染調用時強制執行緩存更新。 – Blindman67
謝謝@Kaiido是的,對於我來說真的很奇怪,像清除緩存這樣的函數沒有明確實現。而且我看到你在那裏做了什麼,不幸的是,用戶可以在svg添加到畫布後動態改變顏色,所以我不能真正刪除並添加svg。非常感謝。 –