UIBezierPath学习 绘制中国地图

#一、UIBezierPath

几种图形英文名称:rectangle(长方形)、oval(椭圆)、arc(弧形)、curve(曲线)

##1.初始化

+ (instancetype)bezierPath;

+ (instancetype)bezierPathWithRect:(CGRect)rect;//返回一个长方形

+ (instancetype)bezierPathWithOvalInRect:(CGRect)rect;//返回一个椭圆

+ (instancetype)bezierPathWithRoundedRect:(CGRect)rect cornerRadius:(CGFloat)cornerRadius; //返回一个圆角长方形

+ (instancetype)bezierPathWithRoundedRect:(CGRect)rect byRoundingCorners:(UIRectCorner)corners cornerRadii:(CGSize)cornerRadii;//返回一个圆角长方形

+ (instancetype)bezierPathWithArcCenter:(CGPoint)center radius:(CGFloat)radius startAngle:(CGFloat)startAngle endAngle:(CGFloat)endAngle clockwise:(BOOL)clockwise;//返回圆上一段弧

+ (instancetype)bezierPathWithCGPath:(CGPathRef)CGPath;

##2.创建图形方法

- (void)moveToPoint:(CGPoint)point;

- (void)addLineToPoint:(CGPoint)point;//画一条直线

- (void)addCurveToPoint:(CGPoint)endPoint controlPoint1:(CGPoint)controlPoint1 controlPoint2:(CGPoint)controlPoint2;//弧线,两个控制点

- (void)addQuadCurveToPoint:(CGPoint)endPoint controlPoint:(CGPoint)controlPoint;//弧线,一个控制点

- (void)addArcWithCenter:(CGPoint)center radius:(CGFloat)radius startAngle:(CGFloat)startAngle endAngle:(CGFloat)endAngle clockwise://取自指定圆上的一段弧线

- (void)closePath;

- (void)removeAllPoints;

- (void)appendPath:(UIBezierPath *)bezierPath;

- (UIBezierPath *)bezierPathByReversingPath;//翻转绘图,没发现有什么用

- (void)applyTransform:(CGAffineTransform)transform;

##3.结合CAShapeLayer在视图上绘制路线

>

//创建一个UIBezierPath对象

UIBezierPath *aPath = [UIBezierPath bezierPath];

//设置路径

int ratio = 5;

for (int i = 0; i < XArray.count; i++) {

if (i == 0) {

[aPath moveToPoint:CGPointMake(([XArray[i] floatValue] - 0) * ratio - 360,([YArray[i] floatValue] - 0) * ratio)];

}else{

[aPath addLineToPoint:CGPointMake(([XArray[i] floatValue] - 0) * ratio - 360,([YArray[i] floatValue] - 0) * ratio)];

}

}


//创建一个CAShapeLayer对象

CAShapeLayer *shapelayer = [CAShapeLayer layer];

shapelayer.strokeColor = [[UIColor redColor]CGColor];//线条颜色

shapelayer.fillColor = [[UIColor blueColor]CGColor];//填充色

shapelayer.lineWidth = 0.1;//线条宽度

shapelayer.path = aPath.CGPath;//设置路径

[mMapView.layer addSublayer:shapelayer];

UIBezierPath学习 绘制中国地图_第1张图片

这里我的数据源XArray来自于本地文件,从百度地图获取到全国各省市边界坐标,获取方法参照:http://www.cnblogs.com/milkmap/archive/2012/04/11/2442430.html

##4.问题

a.百度获取到的坐标的坐标系跟手机是相反的,直接使用绘制出来的图形是头朝下的。需要翻转。

>mMapView.transform = CGAffineTransformScale(mMapView.transform, 1, -1);

b.UIscrollView缩放过程中,mScrollView.frame.origin是无规律变化的,因为捏合手势放大时,mScrollView.contentSize上下左右向外扩张,不容易找到规律。所以设置subViews的frame变化时以mScrollView.contentSize为基准比较靠谱。

>mMapView.center = CGPointMake( mScroll.contentSize.width/2,mScroll.contentSize.height/2);

c.点击各省市区域,利用UIBezierPath containsPoint:可以轻松判断出当前点击的是哪一个区域。如果这样我可能需要把每个省的mPath对象存到本地一个个去匹配,不知道效率怎么样。

d.有许多省查出来的坐标不止一个闭合曲线,我的做法是在每一个闭合曲线的坐标后加shaokan当做分隔符,然后拆分来画。关键JS代码:

>

function getBoundary(){

var bdary = new BMap.Boundary();

var name = document.getElementById("districtName").value;

bdary.get(name, function(rs){      //获取行政区域

var fileName = "";

//var newFileObject = fso.CreateTextFile(folderName + "\\" + name + ".txt", true);

map.clearOverlays();        //清除地图覆盖物

var count = rs.boundaries.length; //行政区域的点有多少个

for(var i = 0; i < count; i++){

var ply = new BMap.Polygon(rs.boundaries[i], {strokeWeight: 2, strokeColor: "#ff0000"}); //建立多边形覆盖物

map.addOverlay(ply);  //添加覆盖物

map.setViewport(ply.getPath());    //调整视野

document.getElementById("info").innerHTML += rs.boundaries[i] + "shaokan";

}

//newFileObject.write(rs.boundaries[0]);

//newFileObject.Close();

});

}

f.百度地图中查不到台湾省的闭合曲线

你可能感兴趣的:(UIBezierPath学习 绘制中国地图)