如何在UIImageView中的UIImage上绘制一个三角形

时间:2013-07-22 05:47:05

标签: ios objective-c uiimageview uiimage cgcontextdrawimage

我在UIImageView中绘制图像时遇到了麻烦,我已经看过"Draw another image on a UIImage"但它只是帮助很多。这是我的场景:我有一个带有UITableView的UIPopoverController,当用户位于可滚动表视图的底部时,我想显示一个向上的三角形。

我的代码:

- (UIImage *) drawTriangleInViewForSize:(CGSize)sizeOfView
                     imageToDrawOn:(UIImage *)underImage
                           isAtTop:(BOOL)top{
CGPoint firstPoint;
CGPoint secondPoint;
CGPoint thirdPoint;

if(!top){
 //I want to draw a equilateral triangle (side length 10) in the center of the image in
 //the imageView, these are the coordinates I am using.
    firstPoint = CGPointMake(underImage.size.width * 0.5 + 5, underImage.size.height * 0.5 - 5);
    secondPoint = CGPointMake((firstPoint.x - 10), firstPoint.y);
    thirdPoint = CGPointMake(underImage.size.width * 0.5,
                             underImage.size.width * 0.5 + 5);

}
*/
**DISREGARD**
else{
    firstPoint = CGPointMake(sizeOfView.width * 0.5 + 5,
                             self.tableViewChoices.rowHeight * 0.5 - 5);
    secondPoint = CGPointMake((firstPoint.x - 10), firstPoint.y);
    thirdPoint = CGPointMake(sizeOfView.width * 0.5,
                             self.tableViewChoices.rowHeight * 0.5 + 5);
}*/
//get the size of the image for the drawInRect: method
CGFloat imageViewWidth = sizeOfView.width;
CGFloat imageViewHeight = self.tableViewChoices.rowHeight;

//set the graphics context to be the size of the image
UIGraphicsBeginImageContextWithOptions(underImage.size, YES, 0.0);

[underImage drawInRect:CGRectMake(0.0, 0.0, imageViewWidth, imageViewHeight)];

//set the line attributes
CGContextRef ctx = UIGraphicsGetCurrentContext();
CGContextSetStrokeColorWithColor(ctx, [UIColor blackColor].CGColor);
CGContextSetFillColorWithColor(ctx, [UIColor clearColor].CGColor);
CGContextSetLineWidth(ctx, 0.05);

UIGraphicsPushContext(ctx);
    //draw the triangle
CGContextBeginPath(ctx);
CGContextMoveToPoint(ctx, firstPoint.x, firstPoint.y);
CGContextAddLineToPoint(ctx, secondPoint.x, secondPoint.y);
CGContextAddLineToPoint(ctx, thirdPoint.x, thirdPoint.y);
CGContextAddLineToPoint(ctx, firstPoint.x, firstPoint.y);
CGContextClosePath(ctx);

UIGraphicsPopContext();

//get the image
UIImage *rslt = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();

return rslt;
}

我似乎无法在imageView中绘制到UIImage的三角形,最终结果是完全黑色的ImageView(UIImage只是一个white.png),或者是imageview顶部的一行(取决于我是使用drawInRect:还是drawAtPoint:以及我使用的坐标。我需要做的只是绘制一个向上的三角形,而不是一件很难的东西,而且看起来我正在“按照这本书的方式做到这一点。”

2 个答案:

答案 0 :(得分:2)

这是我在UIImageView中将三角形绘制到UIImage上的完整代码。

//draws triangle up or down on a UIImage.
+(UIImage *) drawTriangleInViewForSize:(CGSize)sizeOfView
                     imageToDrawOn:(UIImage *)underImage
                           isAtTop:(BOOL)top
{
CGFloat rowHeight = underImage.size.height; //44; //self.tableViewChoices.rowHeight;
CGPoint firstPoint;
CGPoint secondPoint;
CGPoint thirdPoint;

CGFloat imageViewWidth = sizeOfView.width;
CGFloat imageViewHeight = rowHeight;


if(!top){
    //draw a upward facing triangle in the center of the view.
    firstPoint = CGPointMake(imageViewWidth * 0.5 + 15, imageViewHeight * 0.5 - 5);
    secondPoint = CGPointMake((firstPoint.x - 30), firstPoint.y);
    thirdPoint = CGPointMake(imageViewWidth * 0.5,
                             imageViewHeight * 0.5 + 5);

}else{
    //disregard this 'else'
    firstPoint = CGPointMake(sizeOfView.width * 0.5 + 15,
                             rowHeight * 0.5 - 5);
    secondPoint = CGPointMake((firstPoint.x - 10), firstPoint.y);
    thirdPoint = CGPointMake(sizeOfView.width * 0.5,
                             rowHeight * 0.5 + 5);

}


//get the image context with options(recommended funct to use)
//get the size of the imageView
UIGraphicsBeginImageContextWithOptions(CGSizeMake(imageViewWidth, imageViewHeight), YES, 0.0);

//use the the image that is going to be drawn on as the receiver
[underImage drawInRect:CGRectMake(0.0, 0.0, imageViewWidth, imageViewHeight)];



CGContextRef ctx = UIGraphicsGetCurrentContext();

CGContextSetLineWidth(ctx, 0.5);

//UIGraphicsPushContext(ctx);

//uses path ref
CGMutablePathRef path = CGPathCreateMutable();
//draw the triangle
CGPathMoveToPoint(path, NULL, firstPoint.x, firstPoint.y);
CGPathAddLineToPoint(path, NULL, secondPoint.x, secondPoint.y);
CGPathAddLineToPoint(path, NULL, thirdPoint.x, thirdPoint.y);
CGPathAddLineToPoint(path, NULL, firstPoint.x, firstPoint.y);
//close the path
CGPathCloseSubpath(path);
//add the path to the context
CGContextAddPath(ctx, path);
CGContextSetFillColorWithColor(ctx, [UIColor whiteColor].CGColor);
CGContextSetStrokeColorWithColor(ctx, [UIColor blackColor].CGColor);
CGContextFillPath(ctx);
CGContextAddPath(ctx, path);
CGContextStrokePath(ctx);
CGPathRelease(path);

//UIGraphicsPopContext();

//get the new image with the triangle
UIImage *rslt = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();

return rslt;

}

答案 1 :(得分:1)

您的代码对于这种任务看起来太复杂了。为什么不将简单UIImageView与您想要的任何三角形图像一起使用?只需在桌子底部显示它就可以了。

请注意,当您为UITableView实施委托时,您还可以捕获UIScrollView的委托消息,例如scrollView:didEndDecelerating:等。

关于你的代码,你错过了实际的路径绘制:

CGContextAddPath(context, trianglePath);
CGContextFillPath(context);

为了使您能够使用与路径相关的功能。使用CGContext相关函数似乎是不合适的,因为这种方法可能会删除旧路径。因此,更好的方法是在上下文中创建自己的可变路径,在其中绘制三角形,然后通过上述函数将此路径绘制到上下文中。