之前讲过使用UIBezierPath在UIView的drawRect中绘图， 今天我们讲下另外一种方式: CAShaperLayer 先说说使用CAShapeLayer的优点: GPU执行, GPU执行...= \ [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0, 0, 100, 100)].CGPath; //设置绘制路径...重点是这里有一个初学者经常会犯的错误， 同学们在绘制曲线的时候经常会以layer在父图层中的相对位置去绘制曲线，这是错的！！！ 应该以layer自身的坐标系划线。...另外，如下图所示，整个圆形UIBezierPath其实是分为多个子路径绘制的 strokeEnd 是轮廓终点的属性，取值范围[0,1]。...下面我们再使用CAShapeLayer绘制一些特殊的形状 ?
这篇文章通过使用CAShapeLayer和UIBezierPath来画出一个动态显示剩余流量的小动画。...1.1 CAShapeLayer的优点 那CAShapeLayer到底有啥子优点嘛！ CAShapeLayer作为继承自CALayer的子类，当然可使用CALayer的所有属性。...CAShapeLayer是一个通过矢量图形而不是位图来绘制的图层子类。指定诸如颜色和线宽等属性，用path来定义想要绘制的图形，最后CAShapeLayer就自动渲染出来了。...CAShapeLayer使用了硬件加速，绘制同一图形会比用CoreGraphics快很多。...使用CAShapeLayer绘画动态流量图 有了上面对于CAShapeLayer 的基础训练，绘制一个动态的流量图就不是什么困难的事情了。
1.CAShapeLayer简介 CAShapeLayer是一个通过矢量图形而不是bitmap来绘制的图层子类。...CAShapeLayer继承自CALayer，可以使用CALayer的所有属性值。 CAShapeLayer需要与 贝塞尔曲线 配合使用才有意义（这是个人经验）。...使用CAShapeLayer与贝塞尔曲线可以画出你想要的图形。 相对于Core Graphics绘制图片，使用CAShapeLayer有以下一些优点: 渲染快速。...CAShapeLayer使用了硬件加速(使用CPU渲染)，绘制同一图形会比用Core Graphics快很多 高效使用内存。...3.简单的使用 使用CAShapeLayer和UIBezierPath画一条直线和一个椭圆形，效果如下： ?
使用方法 使图层覆盖在应用图标上方，大小为app图标的bounds -(ICSectorProgressView *)sectorView { if (!...beginSetDefault]; // 设置初始化值 _sectorView.hidden = YES;// 默认隐藏 } return _sectorView; } 与下载进度配合使用...bezierPathWithArcCenter:origin radius:radius startAngle:startAngle endAngle:endAngle clockwise:YES]; // 从弧线结束为止绘制一条线段到圆心...这样系统会自动闭合图形，绘制一条从圆心到弧线起点的线段。..._borderLayer) { _borderLayer = [CAShapeLayer layer]; _borderLayer.fillColor = [UIColor
iOS开发CoreAnimation解读之三——几种常用Layer的使用解析 一、CAEmitterLayer CAEmitterLayer是CoreAnimation框架中的粒子发射层...四、CAShapeLayer CAShapeLayer是图形layer层，我们可以自定义这个层的形状。...先来看其中我们可以使用的属性和方法： @property(nullable) CGPathRef path; path属性为CAShapeLayer设置一个边界路径，例如我们可以创建一个三角形的路径通过如下代码...除此之外，我们还可以设置边界的线条为虚线，通过下面两个属性： //设置线段的宽度为5px 间距为10px /* 这个数组中还可以继续添加，会循环进行设置 例如 5 2 1 3 则第一条线段...五、CATextLayer CATextLayer可以进行文本的绘制，属性方法如下： //渲染的文字字符串 @property(nullable, copy) id string; //
不过今天的内容稍微有点多，我呢尽量只说最重要的部分，这里面所有的内容都是通过代码绘制出来的。 实现后的效果图：（这也是为了简书抓图用的，不知道为啥现在如果是gif，简书不会当成文章的缩略图。...过山车思维导图.png 1.2 所用到的知识 在这里，我们使用到了： CALayer、CAShapeLayer、CAGradientLayer三种layer。...UIBeizerPath的使用，包括二次贝塞尔曲线、三次贝塞尔曲线的应用，使用BeizerPath绘画圆。 CAKeyframeAnimation的应用。...2.2 草坪 主要是使用两个二次贝塞尔曲线实现的。...Paste_Image.png 4.3 代码实现 绿色轨道绘制部分的代码： // 绿色铁轨的火车从右侧进入，所以从右侧开始绘画。
绘制折线的时候最基本的是绘制直线、绘制圆点、绘制数据 绘制线段 使用Core Graphics context为drawRect 方法中获取的。...使用CAShapeLayer 和 UIBezierPath，可以实现动态绘制的动画效果。...使用for循环绘制多条折线的步骤（for 循环一次的情况下）： 初始化一个 CAShapeLayer ，加载在 当前的layer上。...初始化 UIBezierPath 供CAShapeLayer 使用； 使用 for循环再绘制余下的每一个圆点，确保每一个圆点都在 CAShapeLayer 的上层， 同时对UIBezierPath...使用CABasicAnimation 利用layer 的strokeEnd属性动态绘制，不使用动画时，会直接一下绘制完成。
选择CAShapeLayer 的原因： 渲染效率高渲染快速。CAShapeLayer使用了硬件加速，绘制同一图形会比用Core Graphics快很多。 高效使用内存。...一个CAShapeLayer不需要像普通CALayer一样创建一个寄宿图形，所以无论有多大，都不会占用太多的内存。 不会被图层边界剪裁掉。一个CAShapeLayer可以在边界之外绘制。...你的图层路径不会像在使用Core Graphics的普通CALayer一样被剪裁掉。 不会出现像素化。当你给CAShapeLayer做3D变换时，它不像一个有寄宿图的普通图层一样变得像素化。...CADisplayLink 了解更多 实现的主要过程： 使用CADisplayLink 注册定时器 创建两个图层，一个为前面的实浪图层，一个为后面的遮罩浪图层。...设置两个图层的大小相同，高度都是一个浪的高度 在定时器的绑定方法中 使用 正弦曲线函数和for 方法绘制路径 把绘制好的路径分别赋给两个图层。 设定好“船”的 y坐标。
---- CAShapeLayer 其实在日常使用中，CALayer能满足需求的情况还是比较少的，（当然你用它来划线还是很好用的），原因就在于CALayer并不能很方便的生成除了矩形的其他形状。...CAShapeLayer的优势 老生常谈了，肯定是性能啊（不提性能要如何装作一副很厉害的样子），他的渲染都在GPU里面，不！占！内！存！ CAShapeLayer如何绘制出各种图形？...我们知道，这就是个路径，没错，CAShapeLayer就是根据这个路径绘制出各种形状的图形的。...这都不是重点，老司机并不想讲怎么使用UIBezierPath。重点是这里有一个初学者经常会犯的错误，同学们在绘制曲线的时候经常会以layer在父图层中的相对位置去绘制曲线，这是错的！！！...1.绘制空心图层 绿油油的好护眼 大家看看上面这个简单的效果，看上去还可以是吧。 这个跟第三篇里面那个系统更新样式采用的是两种画法，这个没有使用CADisplayLink做重绘。
self.cornerView.bounds byRoundingCorners:UIRectCornerTopLeft | UIRectCornerTopRight cornerRadii:(CGSize){20.0}]; CAShapeLayer...*shapeLayer = [CAShapeLayer layer]; // 设置绘制路径 shapeLayer.path = bezierPath.CGPath; // 将shapeLayer设置为...cornerView的layer的mask self.cornerView.layer.mask = shapeLayer; 实现四个圆角 // 绘制4个角， UIBezierPath *bezierPath...= [UIBezierPath bezierPathWithRoundedRect:self.cornerView.bounds cornerRadius:20.0]; CAShapeLayer *shapeLayer...= [CAShapeLayer layer]; // 设置绘制路径 shapeLayer.path = bezierPath.CGPath; self.cornerView.layer.mask =
思路： 1、创建UIButton分类，重写layoutSubviews方法； 2、绘制六边形路径，将绘制的六边形path赋值给新建的CAShapeLayer； 3、将新建的CAShapeLayer覆盖self.layer.mask.../UIKit.h> @interface UIButton (Extension) @property (nonatomic, assign) BOOL drawHexagon; // 是否绘制六边形...sin(M_PI * 30 / 180); CGFloat k = width * 0.5 - longSide; // 为了使个边相等 // 绘制六边形曲线...addLineToPoint:CGPointMake(shortSide, longSide * 2 + k)]; [self.path closePath]; CAShapeLayer...*maskLayer = [CAShapeLayer layer]; maskLayer.path = [self.path CGPath]; self.layer.mask
CAShapeLayer有不同于CALayer的属性，它从CALayer继承而来的属性在绘制时是不起作用的。...CAShapeLayer动画仅仅限于沿着边缘的动画效果,它实现不了填充效果 我们可以使用CAShapeLayer与UIBezierPath可以实现不在view的drawRect方法中就画出一些想要的图形...LineWidth 是在边界上绘制的宽度，而且 绘制的宽度被边界一分为二。 #如果LineWidth 为0 ，strokeColor设置后也是没有效果的。...这面这个例子就是使用 CAShapeLayer与UIBezierPath以及CABasicAnimation结合在一起，实现的动态画图。 ?...valueFunction -> 此属性配合CALayer的transform属性使用。
使用图片作为mask可以直接获得需要显示的外形，需要注意的是这样的图片中需要展示的区域必须有像素，不需要显示的地方不可以有像素为空白，才能出效果，而且有像素的区域的透明度也会影响到最终的效果。...使用自定义形状的CAShapeLayer作为mask也可以达到使图层显示出镂空的效果。同样的，图层显示出来的区域是 CAShapeLayer的外形。...的显示区域就是它的 path区域（一般为UIBezierPath绘制。）...，self.waveView为一个水波上涨的自定义试图，其中水波的上升效果是通过核心动画和 CAShapeLayer的path动态绘制实现的，先了解更多的可以看我的其他两篇文章： 绘图－视图遮罩MaskView...的使用 绘图－类似百度外卖波浪效果的实现与关键点解析 叶子状裁图 ?
前言 实现了一款时下比较流行的环状进度动图，以下是源码解析 使用 Core Graphics 和 定时器 实现环形进度动图 圆环进度.gif 核心源码 # 使用 [self setNeedsDisplay...CGContextAddPath(ctx, valuePath.CGPath); //渲染数值线 CGContextStrokePath(ctx); #画小圆点 使用是...绘制一张图片，其中图片的 Frame 中 x，y 使用到 正弦，余弦函数得到。...strokeWidth/2.0, _strokeWidth, _strokeWidth), [UIImage imageNamed:@"circle_point"].CGImage); } # 绘制中间的文字...} } 使用 CAShapeLayer 和 CABasicAnimation 实现环形进度动图 进度.gif 核心源码 # 橘红色的背景 CAShapeLayer *shapeLayer11
CAShapeLayer是一个通过矢量图形而不是bitmap来绘制的图层子类。...你指定诸如颜色和线宽等属性，用CGPath来定义想要绘制的图形，最后CAShapeLayer就自动渲染出来了。...当然，你也可以用Core Graphics直接向原始的CALyer的内容中绘制一个路径，相比直下，使用CAShapeLayer有以下一些优点： 渲染快速。...CAShapeLayer使用了硬件加速，绘制同一图形会比用Core Graphics快很多。 高效使用内存。...一个CAShapeLayer可以在边界之外绘制。 你的图层路径不会像在使用Core Graphics的普通CALayer一样被剪裁掉。 不会出现像素化。
同时对横竖方向的CAShapeLayer做动画，就会出现如图所示的效果。...最后对CAShapeLayer的strokeEnd 作CABasicAnimation动画即可实现。...设置渐变图层的 mask（遮罩层）为一个CAShapeLayer maskLayer = [CAShapeLayer layer]; maskLayer.strokeColor = [...： 使用for循环在 drawRect方法中绘制每一个扇形（上篇文章已将讲过），因为环外的标注，所以圆环需要小些，否则外环线上的文字绘制起来有可能空间不够。...绘制，文字使用drawInRect: withAttributes绘制，字体左右对齐使用到以下方法： NSMutableParagraphStyle * paragraph = [[NSMutableParagraphStyle
这个属性本身就是个CALayer类型，有和其他图层一样的绘制和布局属性。 它类似于一个子图层，相对于父图层（即拥有该属性的图层）布局，但是它却不是一个普通的子图层。...不同于那些绘制在父图层中的子图层，mask图层定义了父图层的部分可见区域。 mask图层的Color属性是无关紧要的，真正重要的是图层的轮廓。...apath = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(20, 20, 60, 60)]; //创建maskLayer CAShapeLayer...*maskLayer = [CAShapeLayer layer]; maskLayer.path = apath.CGPath; maskLayer.fillColor = [UIColor...ViewController.h" static CGFloat num; @interface ViewController () @property (nonatomic, strong) CAShapeLayer
*maskLayer = [[CAShapeLayer alloc] init]; maskLayer.frame = self.bounds; maskLayer.path = maskPath.CGPath...*maskLayer = [[CAShapeLayer alloc] init]; maskLayer.frame = self.bounds; maskLayer.path = maskPath.CGPath...*maskLayer = [[CAShapeLayer alloc] init]; maskLayer.frame = self.bounds; maskLayer.path = maskPath.CGPath...*maskLayer = [[CAShapeLayer alloc] init]; maskLayer.frame = self.bounds; maskLayer.path = maskPath.CGPath...绘制cell不建议使用UIView，建议使用CALayer。
饼状图.gif 大家都知道这是通过 CAShapeLayer 和 CABasicAnimation 结合起来实现的，可是其中还是有需要注意的地方，实现的步骤大致如下： 绘制一个 CAShapeLayer...不用指定大小，_pieLayer = [CAShapeLayer layer]; 绘制三个 彩色的扇形CAShapeLayer 并加载在 _pieLayer 上。...绘制一个 遮盖住 这三个 CAShapeLayer 的 CAShapeLayer 并赋值给 _pieLayer.mask ,我们都知道 maskLayer的颜色是不会印象视图的显示的，视图的显示只跟maskLayer..._pieLayer.mask 添加 CABasicAnimation 动画，使 _pieLayer.mask 动画绘制，就达到了 _pieLayer 的动态绘制，其实是无法对 _pieLayer 动态绘制...4.使用UIAlertView做简单文本框输入 使用UIAlertView做登录输入， 默认的是 登录名、密码，我们可以修改 TF的placeholer字体来达到我们想要的效果。
https://github.com/johnil/VVeboTableViewDemo dispatch_async(DISPATCH_QUEUE_PRIORITY_DEFAULT, ^{ // 异步绘制...}); // 缓存一切可以缓存的 // 默认高度44 定高的cell最好指定高度, 减少不必要的计算 self.tabelView.rowHeight = 88; // 减少视图数目 // 减少多余的绘制操作...) CAShapeLayer UIBezierPath 结合, 可设置单个圆角 UIBezierPath *maskPath = [UIBezierPath bezierPathWithRoundedRect...:imgV.bounds byRoundingCorners:UIRectCornerAllCorners cornerRadii:imgV.bounds.size]; CAShapeLayer *maskLayer...layer渲染（Facebook开源的异步绘制框架AsyncDisplayKit） // 设置layer的opaque(不透明)值为YES，减少复杂图层合成 // 尽量使用不包含透明（alpha）通道的图片资源
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
腾讯会议
云直播
对象存储
