UIView drawRect：绘制倒置像素，制作孔，窗口，负空间 [英] UIView drawRect: Draw the inverted pixels, make a hole, a window, negative space

问题描述

使用下面的代码，我正在绘制一个圆角矩形。它绘制了一个漂亮的浅灰色实心圆角矩形（大小为 self）。我实际上是想画一个与之相反的像素，即：不是一个实心的圆角矩形，而是一个以实心的浅灰色矩形形式绘制的圆形或矩形形状的窗口或孔。 b

是否需要使用反向剪辑方法？还是我需要使用贝塞尔曲线路径？

感谢您的阅读！

 -（void）drawRect：（CGRect）rect 
 {
 
 //获取上下文
 CGContextRef context = UIGraphicsGetCurrentContext 
 
 CGContextSaveGState（context）; 
 
 //绘制圆角矩形
 CGContextSetStrokeColorWithColor（context，[[UIColor blackColor] CGColor]）; 
 CGContextSetRGBFillColor（context，0.8，0.8，0.8，1.0）; 
 CGContextSetLineWidth（context，_lineWidth）; 
 
 CGRect rrect = CGRectMake（CGRectGetMinX（rect），CGRectGetMinY（rect），CGRectGetWidth（rect），CGRectGetHeight（rect））; 
 CGFloat半径= _cornerRadius; 
 
 CGFloat minx = CGRectGetMinX（rrect），midx = CGRectGetMidX（rrect），maxx = CGRectGetMaxX（rrect）; 
 CGFloat miny = CGRectGetMinY（rrect），midy = CGRectGetMidY（rrect），maxy = CGRectGetMaxY（rrect）; 
 
 CGContextMoveToPoint（context，minx，midy）; 
 //通过2到3添加一条弧线
 CGContextAddArcToPoint（context，minx，miny，midx，miny，radius）; 
 //通过4到5添加一条弧线
 CGContextAddArcToPoint（context，maxx，miny，maxx，midy，radius）; 
 //通过6到7添加一条弧线
 CGContextAddArcToPoint（context，maxx，maxy，midx，maxy，radius）; 
 //通过8到9添加一条弧线
 CGContextAddArcToPoint（context，minx，maxy，minx，midy，radius）; 
 //关闭路径
 CGContextClosePath（context）; 
 
 //填充路径
 CGContextDrawPath（context，kCGPathFill）; 
 
 CGContextRestoreGState（context）; 
 
} 
  

解决方案

添加多个子上下文的路径，并使用 kCGPathEOFill 模式绘制。 《 Quartz 2D编程指南》有更详细的说明。

  //外部子路径：整个矩形b $ b CGContextAddRect（context，rrect）; 
 
 //内部子路径：整个矩形内部的区域
 CGContextMoveToPoint（context，minx，midy）; 
 ... 
 //关闭内部子路径
 CGContextClosePath（context）; 
 
 //填充路径
 CGContextDrawPath（context，kCGPathEOFill）; 
  

With the code below I am drawing a rounded rectangle. It draws a nice solid light gray filled rounded rectangle (at the size of "self"). I actually want to draw the pixel inverse of this, that is: not a solid rounded rectangle, but a window or hole in the shape of this round rectangle in a solid light gray rectangle.

Is there a reverse clip method that I need to use? Or do I need to use a bezier path? Excuse if this is very basic, can't find the info though.

Thanks for reading!

- (void)drawRect:(CGRect)rect
{

    // get the context
    CGContextRef context = UIGraphicsGetCurrentContext

    CGContextSaveGState(context);    

    //draw the rounded rectangle
    CGContextSetStrokeColorWithColor(context, [[UIColor blackColor] CGColor]);
    CGContextSetRGBFillColor(context, 0.8, 0.8, 0.8, 1.0);
    CGContextSetLineWidth(context, _lineWidth);

    CGRect rrect = CGRectMake(CGRectGetMinX(rect), CGRectGetMinY(rect), CGRectGetWidth(rect), CGRectGetHeight(rect));
    CGFloat radius = _cornerRadius;

    CGFloat minx = CGRectGetMinX(rrect), midx = CGRectGetMidX(rrect), maxx = CGRectGetMaxX(rrect);
    CGFloat miny = CGRectGetMinY(rrect), midy = CGRectGetMidY(rrect), maxy = CGRectGetMaxY(rrect);

    CGContextMoveToPoint(context, minx, midy);
    // Add an arc through 2 to 3
    CGContextAddArcToPoint(context, minx, miny, midx, miny, radius);
    // Add an arc through 4 to 5
    CGContextAddArcToPoint(context, maxx, miny, maxx, midy, radius);
    // Add an arc through 6 to 7
    CGContextAddArcToPoint(context, maxx, maxy, midx, maxy, radius);
    // Add an arc through 8 to 9
    CGContextAddArcToPoint(context, minx, maxy, minx, midy, radius);
    // Close the path
    CGContextClosePath(context);

    // Fill the path
    CGContextDrawPath(context, kCGPathFill);

    CGContextRestoreGState(context);

}

解决方案

Add multiple subpaths to your context, and draw with mode kCGPathEOFill. The Quartz 2D Programming Guide explains in more detail.

// Outer subpath: the whole rect
CGContextAddRect(context, rrect);

// Inner subpath: the area inside the whole rect    
CGContextMoveToPoint(context, minx, midy);
...
// Close the inner subpath
CGContextClosePath(context);

// Fill the path
CGContextDrawPath(context, kCGPathEOFill);

这篇关于UIView drawRect：绘制倒置像素，制作孔，窗口，负空间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！