美文网首页iOS技术资料iOS DeveloperiOS
iOS 绘图中的 FillMode 填充模式

iOS 绘图中的 FillMode 填充模式

作者: 李国安 | 来源:发表于2016-09-14 16:50 被阅读842次

    简介


    在绘图中, 我们经常需要对路径进行填充操作. 那么问题来了, 在一个路径的覆盖范围内, 如何判断哪些区域需要被填充, 哪些区域不需要被填充呢? 其实很简单, 在你的 画布 中设置一个, 判断这个点是否在路径覆盖范围内, 如果在路径覆盖的范围内, 那么所在的封闭区域就是需要填充的区域(内部点), 否则(外部点)则不需要填充. 这时候有的小伙伴可能会说: 我去, 你这不废话么?. 别急, 我来解释解释我为什么会说这句废话, 往下看.
    我想大家应该都听说过 不自交自相交这两种多边形. 定义如下:

    • 不自交: 一个多边形, 仅顶点处连接, 而在画布内没有其他的公共交点.
    • 自相交: 一个多边形, 除了顶点连接外, 在画布内还有其他的公共交点.

    这下大家明白了吧? 如果是一个不自交的多边形, 那很容易判断一个点是否在这个多边形路径的覆盖范围内, 那么我们也就很容易知道哪部分是填充区域. 但是如果判断一个点, 是否在自相交多边形内, 则需要用到一下两种原则来进行判断, 这两种原则, 也就是传说中的FillMode.

    1. Even-Odd Rule: 基偶原则
    2. Nonzero Winding Number Rule: 非零环绕数原则

    这俩破玩意儿从字面上看, 有点难理解, 不过别着急, 我来带大家一一进行讲解.

    FileMode


    Even-Odd Rule

    奇偶原则: 从路径覆盖范围内的任意一点做一条射线(确保这条射线的长度要比路径覆盖范围要大) , 如果与该射线相交的边的数量为奇数, 则该点是路径的内部点, 反之该点则是路径的外部点. 举个例子, 来看一张图:

    奇偶原则

    这么简单的东西, 我就不多说了, 接着看另外一个填充模式.

    Nonzero Winding Number Rule

    非零环绕数原则: 在我们脑海中定义一个变量, 比如叫:count, 然后从路径覆盖范围内的任意一点做一条射线(确保这条射线的长度要比路径覆盖范围要大). 然后我们对每一条和该射线相交的路径进行统计, 统计规则是这样的: 当路径是从右向左穿过射线的时候, count++, 当路径是从左向右穿过射线的时候, count--. 当我们统计完所有相交的路径后, 如果 count 不为0, 则该点是内部点, 该点所在的封闭区域需要填充, 反之该点则是路径的外部点. 举个例子, 来看一张图:

    非零环绕数原则

    从图中看的很清晰, 从左图中的红点开始, 绘制了一条射线, 图中经过了两条路径, 这两条路径的方向都是从左向右穿过射线的, 每经过一条从左向右穿过射线的路径, count 会减一, 那么最终count-2, 通过非零环绕数原则判定, 该点为内部点, 所以该点所在的区域进行了填充. 右图射线同样经过了两条路径, 但是这两条路径的方向一个是从左向右穿过射线的, 另一个是从右向左穿过射线的,那么最终count0, 通过非零环绕数原则判定, 该点为外部点, 所以该点所在的区域不进行填充操作.

    再来看一个例子, 如下图:

    非零环绕数原则

    从图中看出, 蓝色的射线经过的三条路径, 最终的结果count1, 所以蓝色点所在的封闭区域是需要填充的.

    OK, 就介绍这么多吧. 图片都是自己一点一点画的, 有点丑, 将就看哈!


    Lemon龙说:

    如果您在文章中看到了错误 或 误导大家的地方, 请您帮我指出, 我会尽快更改

    如果您有什么疑问或者不懂的地方, 请留言给我, 我会尽快回复您

    如果您觉得本文对您有所帮助, 您的喜欢是对我最大的鼓励

    如果您有好的文章, 可以投稿给我, 让更多的 iOS Developer 在简书这个平台能够更快速的成长


    相关文章

      网友评论

      • 木木等你:是从bezierpath看过来的。。懂了好多。。哈哈
      • 请叫我魔法师:好耐心,画了这么多
      • 95114676ad51:如果这条射线刚好经过了图形的某个线的交点呢?这时候咋办?
        ChenJZ:@李国安 我想了一下,应该交点经过多少条线,实际就相当于穿过多少条线.
        李国安:我曾经也想过这个问题! 但是这毕竟是一种计算区域是否需要填充的方式, 所以何必为难自己呢? 你说是不? :scream::scream::scream:

      本文标题:iOS 绘图中的 FillMode 填充模式

      本文链接:https://www.haomeiwen.com/subject/ocvvettx.html