之前讲过使用UIBezierPath在UIView的drawRect中绘图, 今天我们讲下另外一种方式: CAShaperLayer 先说说使用CAShapeLayer的优点: GPU执行, GPU执行...CAShapeLayer *myShapeLayer = ({ //初始化一个实例对象 CAShapeLayer *circle = [CAShapeLayer...下面我们再使用CAShapeLayer绘制一些特殊的形状 ?...比如hud这个, 我们之前用UIBezierPath在UIView的DrawRect中画画过, 相对比较简单 我们用CAShapeLayer事实看。...思路是在绿色的CALayer上面放一个红色的CAShapeLayer, 然后逐渐增加CAShapeLayer的填色大小 上代码: #import "ViewController.h" static CGFloat
1.CAShapeLayer简介 CAShapeLayer是一个通过矢量图形而不是bitmap来绘制的图层子类。...CAShapeLayer继承自CALayer,可以使用CALayer的所有属性值。 CAShapeLayer需要与 贝塞尔曲线 配合使用才有意义(这是个人经验)。...使用CAShapeLayer与贝塞尔曲线可以画出你想要的图形。 相对于Core Graphics绘制图片,使用CAShapeLayer有以下一些优点: 渲染快速。...一个CAShapeLayer不需要像普通CALayer一样创建一个寄宿图形,所以无论有多大,都不会占用太多的内存。 不会被图层边界剪裁掉。一个CAShapeLayer可以在边界之外绘制。...3.简单的使用 使用CAShapeLayer和UIBezierPath画一条直线和一个椭圆形,效果如下: ?
CAShapeLayer CAShapeLayer顾名思义,继承于CALayer。 每个CAShapeLayer对象都代表着将要被渲染到屏幕上的一个任意的形状(shape)。...CAShapeLayer动画仅仅限于沿着边缘的动画效果,它实现不了填充效果 我们可以使用CAShapeLayer与UIBezierPath可以实现不在view的drawRect方法中就画出一些想要的图形...大致步骤如下: 1、新建UIBezierPath对象bezierPath 2、新建CAShapeLayer对象caShapeLayer 3、将bezierPath的CGPath赋值给caShapeLayer...的path,即caShapeLayer.path = bezierPath.CGPath 4、把caShapeLayer添加到某个显示该图形的layer中 #值得注意的是,CAShapeLayer...动态绘图.gif #核心实现代码 //头 CAShapeLayer *headLayer = [CAShapeLayer layer]; UIBezierPath *headPath = [UIBezierPath
这篇文章通过使用CAShapeLayer和UIBezierPath来画出一个动态显示剩余流量的小动画。...CAShapeLayer 实际中,能够用CALayer完成的任务是比较少的,如果使用这个基础图层就能实现绝大部分的功能,咱们就没有必要再开启一个CAShapeLayer了嘛。...1.1 CAShapeLayer的优点 那CAShapeLayer到底有啥子优点嘛! CAShapeLayer作为继承自CALayer的子类,当然可使用CALayer的所有属性。...CAShapeLayer是一个通过矢量图形而不是位图来绘制的图层子类。指定诸如颜色和线宽等属性,用path来定义想要绘制的图形,最后CAShapeLayer就自动渲染出来了。...使用CAShapeLayer绘画动态流量图 有了上面对于CAShapeLayer 的基础训练,绘制一个动态的流量图就不是什么困难的事情了。
就讲讲CALayer的两个子类,CAShapeLayer和CATextLayer吧。...CAShapeLayer的优势 老生常谈了,肯定是性能啊(不提性能要如何装作一副很厉害的样子),他的渲染都在GPU里面,不!占!内!存! CAShapeLayer如何绘制出各种图形?...我们知道,这就是个路径,没错,CAShapeLayer就是根据这个路径绘制出各种形状的图形的。...CAShapeLayer * circle = [CAShapeLayer layer]; circle.bounds = CGRectMake(0, 0, 100, 100); circle.position...说到这里,CAShapeLayer的一些用法就真的介绍完毕了。 ---- CATextLayer 相比CAShapeLayer,可能CATextLayer的用途更加单一一些,他可以用来展示文字。
主要代码如下: #import "MOAnnularProgressView.h" @implementation MOAnnularProgressView { CAShapeLayer *backgroundLayer...; // 背景图层 CAShapeLayer *frontFillLayer; // 填充图层 UIBezierPath *backgroundPath; // 背景贝赛尔曲线 UIBezierPath...if (self) { [self setupView]; } return self; } - (void)setupView { backgroundLayer = [CAShapeLayer...backgroundLayer.fillColor = nil; [self.layer addSublayer:backgroundLayer]; frontFillLayer = [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...*maskLayer = [[CAShapeLayer alloc] init]; maskLayer.frame = self.bounds; maskLayer.path = maskPath.CGPath
使用CAShapeLayer 和 UIBezierPath,可以实现动态绘制的动画效果。...初始化 UIBezierPath 供CAShapeLayer 使用; 使用 for循环再绘制余下的每一个圆点,确保每一个圆点都在 CAShapeLayer 的上层, 同时对UIBezierPath...for (int i=0; i<_yValues.count; i++) { //划线 CAShapeLayer *_chartLine = [CAShapeLayer layer]; _chartLine.lineCap...设置一个 UIBezierPath 绘制好路径赋值给 CAShapeLayer即可。...UUBar中 使用CAShapeLayer 、UIBezierPath、CABasicAnimation可实现动态柱状图 CAShapeLayer设置 _chartLine.fillColor =
self.cornerView.bounds byRoundingCorners:UIRectCornerTopLeft | UIRectCornerTopRight cornerRadii:(CGSize){20.0}]; CAShapeLayer...*shapeLayer = [CAShapeLayer layer]; // 设置绘制路径 shapeLayer.path = bezierPath.CGPath; // 将shapeLayer设置为...UIBezierPath *bezierPath = [UIBezierPath bezierPathWithRoundedRect:self.cornerView.bounds cornerRadius:20.0]; CAShapeLayer...*shapeLayer = [CAShapeLayer layer]; // 设置绘制路径 shapeLayer.path = bezierPath.CGPath; self.cornerView.layer.mask
UIRectCornerTopLeft | UIRectCornerTopRight) cornerRadii:CGSizeMake(cornerRadius, cornerRadius)]; 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
选择CAShapeLayer 的原因: 渲染效率高渲染快速。CAShapeLayer使用了硬件加速,绘制同一图形会比用Core Graphics快很多。 高效使用内存。...一个CAShapeLayer不需要像普通CALayer一样创建一个寄宿图形,所以无论有多大,都不会占用太多的内存。 不会被图层边界剪裁掉。一个CAShapeLayer可以在边界之外绘制。...当你给CAShapeLayer做3D变换时,它不像一个有寄宿图的普通图层一样变得像素化。
使用自定义形状的CAShapeLayer作为mask也可以达到使图层显示出镂空的效果。同样的,图层显示出来的区域是 CAShapeLayer的外形。...(1) 这里特别强调下,当CAShapeLayer没有设置backgroundColor时,(默认为backgroundColor = [UIColor clearColor].CGColor),CAShapeLayer...,这种情况下CAShapeLayer的fillColor的透明度,也会对图层的显示起到影响作用,图层最终的显示只跟fillColor的透明度有关,跟fillColor的颜色无关。...(2) 当CAShapeLayer的backgroundColor不是clearColor的时候,CAShapeLayer的显示区域就是它本身的Frame,跟它的path区域就没关系了。...(3) CAShapeLayer的path区域不能超出CAShapeLayer的Frame,超出部分不会对图层的显示起作用。 例子 叶子状进度条 ?
手绘板.gif 原理思路 在touchesBegan 方法中,每次都创建一个CAShapeLayer加载在当前视图的layer上,在touchesMoved方法中改变该 CAShapeLayer 基于UIBezierPath...创建两个容器,lines用来盛放每次创建的CAShapeLayer,canceledLines 用来盛放每次删除的layer。 清屏操作:移除当前视图layer上的所有子图层。并清空lines。...startPoint:startP]; _path = path; CAShapeLayer...* slayer = [CAShapeLayer layer]; slayer.path = path.CGPath; slayer.backgroundColor = [UIColor
思路: 1、创建UIButton分类,重写layoutSubviews方法; 2、绘制六边形路径,将绘制的六边形path赋值给新建的CAShapeLayer; 3、将新建的CAShapeLayer覆盖self.layer.mask...addLineToPoint:CGPointMake(shortSide, longSide * 2 + k)]; [self.path closePath]; CAShapeLayer...*maskLayer = [CAShapeLayer layer]; maskLayer.path = [self.path CGPath]; self.layer.mask
1.使用layer去实现, 见http://blog.csdn.net/johnzhjfly/article/details/39993345 2.使用CAShapeLayer, CALayer怎样去实现...我们来看看怎样使用CAShapeLayer去实现, 定义一个ShapedImageView。...代码例如以下: #import "ShapedImageView.h" @interface ShapedImageView() { CALayer *_contentLayer; CAShapeLayer...; if (self) { [self setup]; } return self; } - (void)setup { _maskLayer = [CAShapeLayer...答案是肯定的,代码例如以下: _maskLayer = [CAShapeLayer layer]; _maskLayer.fillColor = [UIColor blackColor]
2.0, self.bounds.size.height / 2.0) @interface RoundProgressView() @property (strong, nonatomic) CAShapeLayer...*outLayer; @property (strong, nonatomic) CAShapeLayer *progressLayer; @property (strong, nonatomic)...2.0 startAngle:-M_PI_2 endAngle:M_PI * 3.0 / 2.0 clockwise:YES]; // 外圈 self.outLayer = [CAShapeLayer...loopPath.CGPath; [self.layer addSublayer:self.outLayer]; // 进度条 self.progressLayer = [CAShapeLayer
} } 使用 CAShapeLayer 和 CABasicAnimation 实现环形进度动图 进度.gif 核心源码 # 橘红色的背景 CAShapeLayer *shapeLayer11...=[CAShapeLayer layer]; UIBezierPath*path12=[UIBezierPath bezierPathWithOvalInRect:CGRectMake(89, 299,...设置末端的形状为圆形 path12.lineCapStyle = kCGLineCapRound; shapeLayer11.path=path12.CGPath; # 就是图中我们看到的橘红色 CAShapeLayer...colorWithRed:0.95 green:0.37 blue:0.38 alpha:1.00].CGColor; [self.layer addSublayer:shapeLayer11]; # 深绿色的区域 CAShapeLayer...*shapeLayer1 = [CAShapeLayer layer]; UIBezierPath *path1 = [UIBezierPath bezierPathWithOvalInRect:CGRectMake
四、CAShapeLayer CAShapeLayer是图形layer层,我们可以自定义这个层的形状。...先来看其中我们可以使用的属性和方法: @property(nullable) CGPathRef path; path属性为CAShapeLayer设置一个边界路径,例如我们可以创建一个三角形的路径通过如下代码...: CAShapeLayer * layer = [CAShapeLayer layer]; layer.position=CGPointMake(0,0); CGMutablePathRef...kCALineJoinRound; 折线 NSString *const kCALineJoinBevel; */ @property(copy) NSString *lineJoin; 修改一下上面的代码,如下: CAShapeLayer... * layer = [CAShapeLayer layer]; layer.position=CGPointMake(0,0); CGMutablePathRef path = CGPathCreateMutable
CAShapeLayer *border = [CAShapeLayer layer]; border.strokeColor = SLColorLine.CGColor; border.fillColor
领取专属 10元无门槛券
手把手带您无忧上云