博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
CAShaperLayer&UIBezierPath系列(一)
阅读量:5749 次
发布时间:2019-06-18

本文共 3410 字,大约阅读时间需要 11 分钟。

CAShaperLayer&UIBezierPath简介

使用 UIbezierPath 和 CAShapeLayer 可以画出你想要的任何形状,没有它做不到,只有你想不到,搞定了它们你就可以轻松定制你想要的任何控件了。

CAShaperLayer

苹果官方的定义:A layer that draws a cubic Bezier spline in its coordinate space.

继承于CALayer。 每个CAShapeLayer对象都代表着将要被渲染到屏幕上的一个任意的形状(shape)。

同时CAShaperLayer具有以下特点:

  1. CAShapeLayer可以被触碰和填充,并且CAShapeLayer可以通过Path属性进行形状的调节
  2. CAshapeLayer具有许多动画特性,与UIBezierPath结合,可以轻松定制你想要的图形
  3. CAshapeLayer能在GPU上渲染,提升效率,减少CPU的负担

Note:

Shape rasterization may favor speed over accuracy. For example, pixels with multiple intersecting path segments may not give exact results.

由于CAShapeLayer更喜欢速度超过准确性,所以用CAShapeLayer绘制的图形会出现锯齿。(如果不用放大镜的话,应该很难看出区别)

常用属性的介绍

1.CGPathRef path

/* The path defining the shape to be rendered. If the path extends * outside the layer bounds it will not automatically be clipped to the * layer, only if the normal layer masking rules cause that. Upon * assignment the path is copied. Defaults to null. Animatable. * (Note that although the path property is animatable, no implicit * animation will be created when the property is changed.) */复制代码

path定义了形状的渲染,如果路径超过layer的bounds,那么那部分的path将不会在layer上显示。同时path在赋值的时候将会进行深拷贝。默认值为空。请注意,尽管path属性是可动画的,但在更改属性时不会创建隐式动画。

隐式动画

当对非Root Layer的部分属性进行修改时,默认会自动产生一些动画效果,而这些属性称为Animatable Properties(可动画属性)

  • bounds:用于设置CALayer的宽度和高度。修改这个属性会产生缩放动画
  • backgroundColor:用于设置CALayer的背景色。修改这个属性会产生背景色的渐变动画
  • position:用于设置CALayer的位置。修改这个属性会产生平移动画

可以通过动画事务CATransaction关闭默认的隐式动画效果

[CATransaction begin]; [CATransaction setDisableActions:YES]; self.myview.layer.position = CGPointMake(10, 10); [CATransaction commit];复制代码

2.CGFloat strokeStart && CGFloat strokeEnd

/* These values define the subregion of the path used to draw the

* stroked outline. The values must be in the range [0,1] with zero

* representing the start of the path and one the end. Values in

* between zero and one are interpolated linearly along the path

* length. strokeStart defaults to zero and strokeEnd to one. Both are

* animatable. */

  • strokeStart它表示描线开始的地方占总路径的百分比
  • 对比strokeStart stokeEnd代表了绘制结束的地方站总路径的百分比

UIBezierPath

A path that consists of straight and curved line segments that you can render in your custom views.

UIBezierPath对象是CGPathRef数据类型的封装。有两种使用方式:

1.重写view的drawRect方法

- (void)drawRect:(CGRect)rect {        UIColor *color = [UIColor redColor];    [color set]; //设置线条颜色        UIBezierPath *path = [UIBezierPath bezierPath];    [path moveToPoint:CGPointMake(10, 10)];    [path addLineToPoint:CGPointMake(200, 80)];       path.lineWidth = 5.0;    path.lineCapStyle = kCGLineCapRound; //线条拐角    path.lineJoinStyle = kCGLineJoinRound; //终点处理        [path stroke];}复制代码
  • path.lineWidth = 5.0设置划线的宽度
  • path.lineCapStyle终点的样式
    • kCGLineCapButt 该属性值指定不绘制端点, 线条结尾处直接结束。这是默认值
    • kCGLineCapRound该属性值指定绘制圆形端点, 线条结尾处绘制一个直径为线条宽度的半圆。
    • kCGLineCapSquare该属性值指定绘制方形端点。 线条结尾处绘制半个边长为线条宽度的正方形。需要说明的是,这种形状的端点与“butt”形状的端点十分相似,只是采用这种形式的端点的线条略长一点而已
  • path.lineJoinStyle 设置两条线连结点的样式
    • kCGLineJoinMiter 斜接
    • kCGLineJoinRound 圆滑衔接
    • kCGLineJoinBevel 斜角连接
  • [path stroke] 描边
  • [path fill] 填充边框内部

2.结合CAShaperLayer进行使用

UIBezierPath *path = [UIBezierPath bezierPathWithRect:CGRectMake(110, 100, 150, 100)];    CAShapeLayer *layer = [CAShapeLayer layer];    layer.path = path.CGPath;    layer.strokeColor = [UIColor blackColor].CGColor;    layer.fillColor = [UIColor redColor].CGColor;    [self.view.layer addSublayer:layer];复制代码
  • stokeColor 设置图形边框的颜色
  • fillColor 设置图形填充的颜色,如果不设置,默认为stokeColor

转载于:https://juejin.im/post/5c8ba446e51d451bfc6dd541

你可能感兴趣的文章
关于电梯阻塞原因的小思考
查看>>
多维透视表 - 矩表实现商品销售对比统计
查看>>
INNODB 页节点数据的存储方式、数据链、删除链的学习和实验总结
查看>>
使用 readfile() 下载文件
查看>>
[20150619]undo文件损坏或者丢失的恢复2
查看>>
MYSQL 导入出错从指定行号截取文件(C语言写的)及注意事项
查看>>
JAVA深入研究——Method的Invoke方法(转)
查看>>
js中的各种宽高以及位置总结
查看>>
[老老实实学WCF] 第一篇 Hello WCF
查看>>
Git常用命令(转)
查看>>
使用 InstallShield limited edition 打包部署Outlook 2013 Office add-in插件
查看>>
十天学Linux内核之第二天---进程
查看>>
一个疑难故障,坑了我半年青春-----知识就是生产力
查看>>
ArcGIS API for Silverlight之配准JPG图片地图文字倾斜解决方案
查看>>
微信智能硬件——微信相框
查看>>
我的Android进阶之旅------>Android Activity的singleTask加载模式和onActivityResult方法之间的冲突...
查看>>
Kernel 中的 GPIO 定义和控制
查看>>
sqlserver性能调优方法论
查看>>
Sql Server服务远程过程调用失败
查看>>
国标28181sip开源库介绍(陆续补充完备)
查看>>