2017-07-24 283 views
3

我希望你能幫我解決我遇到的這個問題。在我的應用程序中,我使用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()完美工作。

+0

這看起來像一個bug,但它也似乎不可思議,他們沒有實現的'updateCache'方法......有些LIB的維護人員也來這裏經常,所以他們會給出一個正確的答案,但是,這裏是我的一個快速和醜陋的解決方法:http://jsfiddle.net/hk1on32n/3/(l191) – Kaiido

+0

不要禁用緩存,如果你需要再次渲染對象(即改變一個屬性不是列表'object.stateProperties'),然後設置信號量'object.dirty = true;'。這將在下次渲染調用時強制執行緩存更新。 – Blindman67

+0

謝謝@Kaiido是的,對於我來說真的很奇怪,像清除緩存這樣的函數沒有明確實現。而且我看到你在那裏做了什麼,不幸的是,用戶可以在svg添加到畫布後動態改變顏色,所以我不能真正刪除並添加svg。非常感謝。 –

回答

4

爲了使它更清晰一點

保持緩存。

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) 
+0

啊,這是'髒'是... – Kaiido

+0

@Kaiido我也從來不知道xD的骯髒選項是什麼。感謝Blindman67 –

相關問題