ios 中calayer绘制图片的实例详解（ios 中calayer绘制图片的实例详解）

ios 中calayer绘制图片的实例详解

calayer渲染内容图层。与uiimageview相比，不具有事件响应功能，且uiimageview是管理内容。

注意事项：如何使用delegate对象执行代理方法进行绘制，切记需要将delegate设置为nil，否则会导致异常crash。

calayer绘制图片与线条效果图：

ios 中calayer绘制图片的实例详解（ios 中calayer绘制图片的实例详解）

代码示例：

1 2 3 4 cgpoint position = cgpointmake(160.0, 200.0); cgrect bounds = cgrectmake(0.0, 0.0, 150.0, 150.0); cgfloat cornerradius = 150.0 / 2; cgfloat borderwidth = 2.0;

1 2 3 4 5 6 7 8 9 10 11 12 // 阴影层 calayer *layershadow = [[calayer alloc] init]; layershadow.position = position; layershadow.bounds = bounds; layershadow.cornerradius = cornerradius; layershadow.borderwidth = borderwidth; layershadow.bordercolor = [uicolor whitecolor].cgcolor; layershadow.shadowcolor = [uicolor graycolor].cgcolor; layershadow.shadowoffset = cgsizemake(2.0, 1.0); layershadow.shadowopacity = 1.0; layershadow.shadowradius = 3.0; [self.view.layer addsublayer:layershadow];

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 // 容器层 calayer *layercontant = [[calayer alloc] init]; // 添加到父图层 [self.view.layer addsublayer:layercontant]; // 图层中心点、大小（中心点和大小构成frame） layercontant.position = position; layercontant.bounds = bounds; // 图层背景颜色 layercontant.backgroundcolor = [uicolor redcolor].cgcolor; // 图层圆角半径 layercontant.cornerradius = cornerradius; // 图层蒙版、子图层是否剪切图层边界 // layercontant.mask = nil; layercontant.maskstobounds = yes; // 边框宽度、颜色 layercontant.borderwidth = borderwidth; layercontant.bordercolor = [uicolor whitecolor].cgcolor; // 阴影颜色、偏移量、透明度、形状、模糊半径 // layercontant.shadowcolor = [uicolor graycolor].cgcolor; // layercontant.shadowoffset = cgsizemake(2.0, 1.0); // layercontant.shadowopacity = 1.0; // cgmutablepathref path = cgpathcreatemutable(); // layercontant.shadowpath = path; // layercontant.shadowradius = 3.0; // 图层透明度 layercontant.opacity = 1.0;

1 2 3 4 5 6 7 8 9 10 // 绘制图片显示方法1 // 图层形变 // 旋转（angle转换弧度：弧度=角度*m_pi/180；x上下对换、y左右对换、z先上下对换再左右对换；-1.0~1.0） // layercontant.transform = catransform3dmakerotation(m_pi, 0.0, 0.0, 0.0); // 缩放（0.0~1.0） // layercontant.transform = catransform3dmakescale(0.8, 0.8, 0.8); // 移动 // layercontant.transform = catransform3dmaketranslation(10.0, 1.0, 1.0); // 显示内容 [layercontant setcontents:[uiimage imagenamed:@"header"].cgimage];

绘制图片显示方法2

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 layercontant.delegate = self; [layercontant setneedsdisplay]; - (void)drawlayer:(calayer *)layer incontext:(cgcontextref)ctx { // 绘图 cgcontextsavegstate(ctx); // 图形上下文形变，避免图片倒立显示 cgcontextscalectm(ctx, 1.0, -1.0); cgcontexttranslatectm(ctx, 0.0, -150.0); // 图片 uiimage *image = [uiimage imagenamed:@"header"]; cgcontextdrawimage(ctx, cgrectmake(0.0, 0.0, 150.0, 150.0), image.cgimage); cgcontextrestoregstate(cox); }

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 // 绘制实线、虚线 - (void)drawlayer:(calayer *)layer incontext:(cgcontextref)ctx { // 绘实线 // 线条宽 cgcontextsetlinewidth(ctx, 1.0); // 线条颜色 // cgcontextsetrgbstrokecolor(ctx, 1.0, 0.0, 0.0, 1.0); cgcontextsetstrokecolorwithcolor(ctx, [uicolor greencolor].cgcolor); // 方法1 // 坐标点数组 cgpoint apoints[2]; apoints[0] = cgpointmake(10.0, 50.0); apoints[1] = cgpointmake(140.0, 50.0); // 添加线 points[]坐标数组，和count大小 cgcontextaddlines(ctx, apoints, 2); // 根据坐标绘制路径 cgcontextdrawpath(ctx, kcgpathstroke); // 方法2 cgcontextsetlinewidth(ctx, 5.0); cgcontextsetstrokecolorwithcolor(ctx, [uicolor purplecolor].cgcolor); cgcontextmovetopoint(ctx, 10.0, 60.0); // 起点坐标 cgcontextaddlinetopoint(ctx, 140.0, 60.0); // 终点坐标 cgcontextstrokepath(ctx); // 绘制路径 // 绘虚线 // 线条宽 cgcontextsetlinewidth(ctx, 2.0); // 线条颜色 cgcontextsetstrokecolorwithcolor(ctx, [uicolor bluecolor].cgcolor); // 虚线 cgfloat dasharray[] = {1, 1, 1, 1}; cgcontextsetlinedash(ctx, 1, dasharray, 1); // 起点 cgcontextmovetopoint(ctx, 10.0, 100.0); // 终点 cgcontextaddlinetopoint(ctx, 140.0, 100.0); // 绘制路径 cgcontextstrokepath(ctx); }

1 2 3 4 5 6 7 8 9 10 11 12 // 内存管理，避免异常crash - (void)dealloc { for (calayer *layer in self.view.layer.sublayers) { if ([layer.delegate isequal:self]) { layer.delegate = nil; } } nslog(@"%@ 被释放了~", self); }