【发布时间】:2016-10-15 22:59:52
【问题描述】:
如何使用核心图形在 IOS 中的形状填充上划线(应用一组 45 度平行线)?示例代码?
(我对在 MKMapKit 中与 MKPolygon 一起使用特别感兴趣,但目前只是想看看它是否可以在 UIView 中使用 drawRect?所以用交叉影线填充 UIView 的背景)
【问题讨论】:
标签: ios uiview core-graphics gradient drawrect
如何使用核心图形在 IOS 中的形状填充上划线(应用一组 45 度平行线)?示例代码?
(我对在 MKMapKit 中与 MKPolygon 一起使用特别感兴趣,但目前只是想看看它是否可以在 UIView 中使用 drawRect?所以用交叉影线填充 UIView 的背景)
【问题讨论】:
标签: ios uiview core-graphics gradient drawrect
创建一个UIImage,以任何您想要的方式包含您的剖面线图案(例如,使用 Core Graphics 绘制它或从 PNG 文件加载它)。
然后使用+[UIColor colorWithPatternImage:] (Swift UIColor(patternImage:)) 创建一个“颜色”来绘制交叉影线图像。
最后,将图案颜色设置为您的填充颜色,并填充形状(可能是通过填充轮廓轮廓的路径,或使用UIRectFill)。
如果您需要对图案进行更多控制(以更改其平铺或对齐方式),您可以下拉到核心图形级别并使用CGPatternCreate 和CGColorCreateWithPattern。
【讨论】:
嘿,试试这个我在 300x300 UIView 上尝试过的示例代码
- (void)drawRect:(CGRect)rect
{
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetLineWidth(context, 1.5);
CGContextSetStrokeColorWithColor(context, [UIColor grayColor].CGColor);
int backward=0;
for (int i=0;i<15; i++)
{
CGContextMoveToPoint(context, backward, 0);
CGContextAddLineToPoint(context, 300, 300-backward);
backward=backward+20;
}
int backwardNegitive=0;
for (int i=0;i<15; i++)
{
CGContextMoveToPoint(context, 0,backwardNegitive);
CGContextAddLineToPoint(context, 300-backwardNegitive,300);
backwardNegitive=backwardNegitive+20;
}
int forward=0;
for (int i=0;i<15; i++)
{
CGContextMoveToPoint(context, 300-forward, 0);
CGContextAddLineToPoint(context, 0, 300-forward);
forward=forward+20;
}
int forwardNegative=0;
for (int i=0;i<15; i++)
{
CGContextMoveToPoint(context, 0,300+forwardNegative);
CGContextAddLineToPoint(context,300+forwardNegative,0);
forwardNegative=forwardNegative+20;
}
CGContextStrokePath(context);
}
希望对您有所帮助。
【讨论】:
这就是我在 Apple 开发者论坛上所说的内容:
#import "CrossHatchView.h"
@implementation CrossHatchView
static CGFloat sides = 5.0;
- (void)drawRect:(CGRect)rect
{
CGRect bounds = self.bounds;
UIBezierPath *path = [UIBezierPath bezierPath];
CGFloat xCentre = CGRectGetMidX(bounds);
CGFloat yCentre = CGRectGetMidY(bounds);
CGFloat radius = 0.0;
if (CGRectGetWidth(bounds) > CGRectGetHeight(bounds)) {
radius = CGRectGetHeight(bounds) / 2.0;
} else {
radius = CGRectGetWidth(bounds) / 2.0;
}
CGFloat angleIncrement = 2.0 * M_PI / sides;
CGFloat initialAngle = ( M_PI + (2.0 * M_PI / sides) ) / 2.0;
for (NSUInteger i = 0; i < sides; i++) {
CGFloat angle = initialAngle + i * angleIncrement;
CGFloat x = xCentre + radius * cos(angle);
CGFloat y = yCentre + radius * sin(angle);
CGPoint point = CGPointMake(x, y);
if (i == 0) {
[path moveToPoint:point];
} else {
[path addLineToPoint:point];
}
}
[path closePath];
[[UIColor cyanColor] set];
[path addClip];
CGRect pathBounds = [path bounds];
[path removeAllPoints];
CGPoint p1 = pathBounds.origin;
CGPoint p2 = CGPointMake(CGRectGetMaxX(pathBounds), CGRectGetMaxY(pathBounds));
[path moveToPoint:p1];
[path addLineToPoint:p2];
path.lineWidth = 400.0;
CGFloat dashes[] = { 2.0, 2.0 };
[path setLineDash:dashes count:2 phase:0.0];
[[UIColor blackColor] set];
[path stroke];
}
@end
【讨论】:
对于 swift 3.,使用来自 @user3230875 的方法
final class CrossHatchView: UIView {
// MARK: - LifeCycle
override func draw(_ rect: CGRect) {
// create rect path with bounds that equal to the
// size of a view, in addition it adds rounded corners, this will
// be used later as a canvas for dash drawing
let path:UIBezierPath = UIBezierPath(roundedRect: bounds, cornerRadius: 5)
// specify the new area where the our drawing will be visible
// check [link][1] for more
path.addClip()
// grab the size of drawing area
let pathBounds = path.bounds
// cleanUp rounded rect, that is drawn above
// just remove roundedRect in the words
path.removeAllPoints()
// get start and end point of the line
let p1 = CGPoint(x:pathBounds.maxX, y:0)
let p2 = CGPoint(x:0, y:pathBounds.maxX)
// draw line
path.move(to: p1)
path.addLine(to: p2)
// set line width equal to double width of view
// because we later will draw this line using dash pattern
path.lineWidth = bounds.width * 2
// set dash pattern with some interval
let dashes:[CGFloat] = [0.5, 7.0]
path.setLineDash(dashes, count: 2, phase: 0.0)
// set color for line
UIColor.lightGray.withAlphaComponent(0.5).set()
// actually draw a line using specific
// color and dash pattern
path.stroke()
}
}
结果:
【讨论】: