理解SVG的fill-rule屬性

w3c標準圖示:
evenodd


fillrule-evenodd.png

nonzero;


fillrule-nonzero.png

要判斷一個點是否在圖形內,需要從該點作任意方向的一條射線,然后檢測射線與圖形路徑的交點值,假設為x,x初始值為0。

對于evenodd,每相交一次,x+1,最后的結果如果x為奇數則該點在圖形內,如果為偶數則在圖形外。

對于nonzero,情況則復雜一些,每相交一次,x的值也會變化,不過這個變化和你的射線同路徑相交的方向有關。要知道路徑本身是一個向量(也就是有方向的線段),你畫的射線也有方向,則射線同路徑相交的方向一定會有兩種方向,從路徑左側相交和右側相交。你可以任意假設一個方向為正,那么另一個相交方向為負,比如我假設左相交為正,那么右相交則為負。此時,計算x的方法是,正相交+1,負相交-1,看最后x的值,如果為0,則該點在圖形外,如果不為0則在圖形內。

最后,不要去鉆相切的牛角尖,因為射線是任意的,如果有相切,那么換個方向再畫。

這是用我自己的方式理解的fill-rule屬性。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內容

  • 18- UIBezierPath官方API中文翻譯(待校對) ----------------- 華麗的分割線 -...
    醉臥欄桿聽雨聲閱讀 1,161評論 1 1
  • Spring Cloud為開發(fā)人員提供了快速構建分布式系統(tǒng)中一些常見模式的工具(例如配置管理,服務發(fā)現,斷路器,智...
    卡卡羅2017閱讀 136,554評論 19 139
  • UIBezierPath Class Reference 譯:UIBezierPath類封裝了Core Graph...
    鋼鉄俠閱讀 1,943評論 0 3
  • 今天中午,老婆陪著三歲多的女兒在網上挑選鞋子,小小年紀,相當挑剔,鞋子一定要是紫色的,必須是小兔子鞋,而且小兔子要...
    c5de959d631b閱讀 2,047評論 18 21
  • 中學的時候,我們班上有一個傻姑娘。 她是傳說中的的三無少女,無美貌,無身材,無胸部,關鍵的是,成績還是中下的,平時...
    不看日漫中閱讀 268評論 0 0

友情鏈接更多精彩內容