UIImageView绘图具有不透明的绘图和透明背景

Question

我正在使用a tutorial来创建绘图应用的开头。绘图发生在一个图像视图上，完成笔划后，它将与下面的图像视图合并，并清除顶部图像。

目前，我的应用可以在白色背景上绘制黑色数字。但是，我希望最终在透明背景上绘制图形，以便在图形后面可以看到主要图纸视图后面的任何背景/图像/ UIViews。使用我使用的绘图方法可以实现吗？

我的.m代码：

#import "ViewController.h"

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.

    // DEFAULT VALUES
    red = 0.0/255.0;
    green = 0.0/255.0;
    blue = 0.0/255.0;
    brush = 10.0;
    opacity = 1.0;
}


- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

/////////////// TOUCH RESPONSE METHODS (for drawing) ///////////////
- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {

    mouseSwiped = NO;
    UITouch *touch = [touches anyObject];
    lastPoint = [touch locationInView:self.view]; // first point touched
}

- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event {

    mouseSwiped = YES;
    UITouch *touch = [touches anyObject];
    CGPoint currentPoint = [touch locationInView:self.view]; // second point touched (to be connected to first point)

    // initialize the tempDrawImage UIImageView that will be drawn on
    UIGraphicsBeginImageContext(self.view.frame.size);
    [self.tempDrawImage.image drawInRect:CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height)];

    // draw a line with CGContextAddLineToPoint from lastPoint to currentPoint
    CGContextMoveToPoint(UIGraphicsGetCurrentContext(), lastPoint.x, lastPoint.y);
    CGContextAddLineToPoint(UIGraphicsGetCurrentContext(), currentPoint.x, currentPoint.y);
    CGContextSetLineCap(UIGraphicsGetCurrentContext(), kCGLineCapRound);

    // set brush size and opacity and brush stroke color
    CGContextSetLineWidth(UIGraphicsGetCurrentContext(), brush );
    CGContextSetRGBStrokeColor(UIGraphicsGetCurrentContext(), red, green, blue, 1.0);
    CGContextSetBlendMode(UIGraphicsGetCurrentContext(),kCGBlendModeNormal);

    // draw the path
    CGContextStrokePath(UIGraphicsGetCurrentContext());

    // draw on the tempDrawImage UIImageView
    self.tempDrawImage.image = UIGraphicsGetImageFromCurrentImageContext();
    [self.tempDrawImage setAlpha:opacity];

    UIGraphicsEndImageContext();
    lastPoint = currentPoint;
}

- (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event {

    // if screen was not swiped (i.e. the screen was only tapped), draw a single point
    if(!mouseSwiped) {
        UIGraphicsBeginImageContext(self.view.frame.size);
        [self.tempDrawImage.image drawInRect:CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height)];
        CGContextSetLineCap(UIGraphicsGetCurrentContext(), kCGLineCapRound);
        CGContextSetLineWidth(UIGraphicsGetCurrentContext(), brush);
        CGContextSetRGBStrokeColor(UIGraphicsGetCurrentContext(), red, green, blue, opacity);
        CGContextMoveToPoint(UIGraphicsGetCurrentContext(), lastPoint.x, lastPoint.y);
        CGContextAddLineToPoint(UIGraphicsGetCurrentContext(), lastPoint.x, lastPoint.y);
        CGContextStrokePath(UIGraphicsGetCurrentContext());
        CGContextFlush(UIGraphicsGetCurrentContext());
        self.tempDrawImage.image = UIGraphicsGetImageFromCurrentImageContext();
        UIGraphicsEndImageContext();
    }

    ///////BRUSH STROKE IS DONE; BEGIN UIIMAGEVIEW MERGE//////

    // initialize mainImage (for merge)
    UIGraphicsBeginImageContext(self.mainImage.frame.size);

    // merge tempDrawImage with mainImage
    [self.mainImage.image drawInRect:CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height) blendMode:kCGBlendModeNormal alpha:1.0];
    [self.tempDrawImage.image drawInRect:CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height) blendMode:kCGBlendModeNormal alpha:opacity];
    self.mainImage.image = UIGraphicsGetImageFromCurrentImageContext();

    // clear tempDrawImage
    self.tempDrawImage.image = nil;

    UIGraphicsEndImageContext();
}

我的.h代码：

#import <UIKit/UIKit.h>

@interface ViewController : UIViewController {

    CGPoint lastPoint; // stores the last drawn point on the canvas; used when a continuous brush stroke is being drawn on the canvas.

    // RGB values
    CGFloat red;
    CGFloat green;
    CGFloat blue;

    // brush stroke width and opacity
    CGFloat brush;
    CGFloat opacity;

    BOOL mouseSwiped; // identifies if the brush stroke is continuous
}

// IMAGE VIEWS
@property (weak, nonatomic) IBOutlet UIImageView *songSheetBase;
@property (weak, nonatomic) IBOutlet UIImageView *mainImage;
@property (weak, nonatomic) IBOutlet UIImageView *tempDrawImage;

@end

谢谢！

Answer 1

您可以使用您正在使用的开始上下文方法的WithOptions变体创建透明图像上下文（并使其成为当前上下文），将opaque参数设置为NO

// change these:
// UIGraphicsBeginImageContext(self.view.frame.size);

// to:
UIGraphicsBeginImageContextWithOptions(self.view.bounds.size, NO, 0.0);

[[UIColor clearColor] setFill];
CGContextFillRect(context, self.view.bounds);

为每个地方创建绘制图像的上下文，除此之外，我想用于绘制合并后的图像......

// not here... initialize mainImage (for merge)
UIGraphicsBeginImageContext(self.mainImage.frame.size);