iOS - 使用UIBezierPath appendPath剪切两个路径的联合 [英] iOS - Clipping union of two paths using UIBezierPath appendPath

问题描述

我试图以加号的形式创建一个剪切路径，以便我在同一个上下文中绘制的后续路径将此部分删除。我使用彼此重叠的两个矩形路径创建剪切路径。

I'm attempting the create a clipping path in the shape of a plus sign, so that subsequent paths that I draw into the same context have this portion removed. I create the clipping path using two rectangle paths overlaid on each other.

这就是我希望最终的绘图看起来像我随后画一个圆圈时的样子：

This is what I'd like the final drawing to look like when I subsequently draw a circle:

       xXX |    | XXx

    XXXX |    | XXXX

  XXXXX |    | XXXXX

  ---       ---

  ---       ---

  XXXXX |    | XXXXX

    XXXX |    | XXXX

       xXX |    | XXx

      xXX|   |XXx
   XXXX|   |XXXX
 XXXXX|   |XXXXX
 ———      ———
 ———      ———
 XXXXX|   |XXXXX
   XXXX|   |XXXX
      xXX|   |XXx

然而，它看起来像这样：

However, it actually looks like this:

       xXX |     | XXx

    XXXX |    | XXXX

  XXXXX |    | XXXXX

  ---  XX ---

  ---  XX ---

  XXXXX |    | XXXXX

    XXXX |    | XXXX

      ;  xXX |    | XXx

      xXX|   |XXx
   XXXX|   |XXXX
 XXXXX|   |XXXXX
 ——— XX———
 ——— XX———
 XXXXX|   |XXXXX
   XXXX|   |XXXX
      xXX|   |XXx

如果我正确读取此行为，则两个矩形路径的交集不构成剪切蒙版的一部分。

If I read this behaviour correctly, the intersection of the two rectangle paths is not forming part of the clipping mask.

在这种情况下，似乎（并不奇怪）appendPath不会从我的两个矩形路径创建单个统一路径 - 我假设我没有任何东西做这件事。此外，Core Graphics似乎没有任何与路径联盟有关的功能。

It seems (not surprisingly) that appendPath does not create a single unified path from my two rectangle paths in this case - I'm assuming that there is nothing I can do about this. Furthermore, Core Graphics doesn't seem to have any functions relating to path unions etc.

有人知道我能做什么吗？我已经包含了相关的代码片段。

Does anyone have any idea what I can do? I've included the relevant code snippet.

使用一个路径绘制加号不是解决方案，因为我想将其他重叠路径添加到剪贴蒙版。

Drawing the plus sign using one path isn't a solution, as I want to add other overlapping paths to my clipping mask.

        CGContextSaveGState(context);

        // create clipping path
        UIBezierPath *clippingPath = [UIBezierPath bezierPath];
        clippingPath = [UIBezierPath bezierPathWithRect:CGRectMake(centrePoint.x - 2.0f, 0.0f, 4.0f, self.sizeY)];
        [clippingPath appendPath:[UIBezierPath bezierPathWithRect:CGRectMake(0.0f, centrePoint.y - 2.0f, self.sizeX, 4.0f)]];

        // use the clipping path to create a hole in the context
        CGContextAddPath(context, clippingPath.CGPath);
        CGRect boundingRect = CGContextGetClipBoundingBox(context);
        CGContextAddRect(context, boundingRect);
        CGContextEOClip(context);

        // draw the icon shape (clipped portion is removed)
        iconBezierPath = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(self.sizeX / 3.0f, self.sizeY / 2.25f, self.sizeX / 3.0f, self.sizeX / 3.0f)];

        [highlightColor setFill];
        [iconBezierPath fill];
        CGContextRestoreGState(context);

推荐答案

您可以添加被淘汰的棋子使用 CGRectIntersection

You can add back the piece that gets knocked out by the intersection using CGRectIntersection

    CGContextSaveGState(context);

    CGRect rect1 = CGRectMake(centrePoint.x - 2.0f, 0.0f, 4.0f, self.sizeY);
    CGRect rect2 = CGRectMake(0.0f, centrePoint.y - 2.0f, self.sizeX, 4.0f);
    CGRect rect3 = CGRectIntersection(rect1, rect2);

    CGContextAddRect(context, rect1);
    CGContextAddRect(context, rect2);
    CGContextAddRect(context, rect3);

    CGRect boundingRect = CGContextGetClipBoundingBox(context);
    CGContextAddRect(context, boundingRect);
    CGContextEOClip(context);

        // draw the icon shape (clipped portion is removed)
    iconBezierPath = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(self.sizeX / 3.0f, self.sizeY / 2.25f, self.sizeX / 3.0f, self.sizeX / 3.0f)];

    [highlightColor setFill];
    [iconBezierPath fill];

    CGContextRestoreGState(context);

这符合您问题的要求，但它是否完全满足您的需求取决于其他重叠路径。

This satisfies the requirements of your question, but whether it entirely satisfies your needs depends on the nature of the "other overlapping paths".

这篇关于iOS - 使用UIBezierPath appendPath剪切两个路径的联合的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！