理解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属性。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 18- UIBezierPath官方API中文翻译(待校对) ----------------- 华丽的分割线 -...
    醉卧栏杆听雨声阅读 1,082评论 1 1
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,837评论 18 139
  • UIBezierPath Class Reference 译:UIBezierPath类封装了Core Graph...
    鋼鉄侠阅读 1,766评论 0 3
  • 今天中午,老婆陪着三岁多的女儿在网上挑选鞋子,小小年纪,相当挑剔,鞋子一定要是紫色的,必须是小兔子鞋,而且小兔子要...
    c5de959d631b阅读 1,976评论 18 21
  • 中学的时候,我们班上有一个傻姑娘。 她是传说中的的三无少女,无美貌,无身材,无胸部,关键的是,成绩还是中下的,平时...
    不看日漫中阅读 252评论 0 0