手绘板.gif 原理思路 在touchesBegan 方法中,每次都创建一个CAShapeLayer加载在当前视图的layer上,在touchesMoved方法中改变该 CAShapeLayer 基于UIBezierPath...的路径,即可实现绘制路径的效果。...移除canceledLines 中的最后一个layer,并加入到lines中。 源码实现 ?...文件结构 自定义一个UIBezierPath的子类 LGPaintpath,下面是它的初始化方法 + (instancetype)paintPathWithLineWidth:(CGFloat)width...//会使图片和背景图层在结合的地方更自然 保存图片到相册中 - (void)loadImageFinished:(UIImage *)image{ UIImageWriteToSavedPhotosAlbum
前言 在开发中我们会遇到各种统计图,或者各种绘图,本文通过对基本三大统计图:折线图、柱状图、扇形图的实现来掌握基本统计图的绘制,在下一篇文中会带来复杂一些的绘图案例分析,循序渐进达、触类旁通达到绘制各式各样图表的能力...绘制折线的时候最基本的是绘制直线、绘制圆点、绘制数据 绘制线段 使用Core Graphics context为drawRect 方法中获取的。...自定义 UUBar类,展示的是单个柱状的效果,在 UUBarChart类中调用生成多个柱状的效果。...使用UIBezierPath绘制扇形 在我这篇文章中我说过:UIBezierPath是在 UIKit 中的一个类,继承于NSObject,可以创建基于矢量的路径.此类是Core Graphics...所以使用UIBezierPath当然也是可以绘制图形的,只是必须在 drawRect 方法中,不可在其他位置。
UIBezierPath是在 UIKit 中的一个类,继承于NSObject,可以创建基于矢量的路径.此类是Core Graphics框架关于path的一个OC封装。...下面我们看下, UIBezierPath类的头文件里定义的方法有哪些: UIBezierPath类头文件定义 + (instancetype)bezierPath; /** * 根据一个Rect 画一个椭圆曲线...// 确定弯曲路径短的绘制精度的因素 @property(nonatomic) CGFloat flatness; // 一个bool值 指定even-odd规则是否在path可用 @property(...绘制一行 - (void)strokeWithBlendMode:(CGBlendMode)blendMode alpha:(CGFloat)alpha; // 剪切被接收者路径包围的区域 该路径是带有剪切路径的当前绘图上下文...使用UIBezierPath绘图,必须要在一个UIView 的子类试图中的drawRect:方法中实现。
,而不是图形反向,比如一条路径是从(0,0)到(3,4),(0,0)是初始位置,(3,4)是末位置,如果使用此方法,则新的UIBezierPath对象的初始位置为(3,4),末位置是(0,0),但是两条直线看上去是一模一样的...将 UIBezierPath 对象的 currentPoint 移动到指定的点 - (void)moveToPoint:(CGPoint)point; 在当前子路径中追加一条直线 - (void...void)appendPath:(UIBezierPath *)bezierPath; //该方法将会在当前 UIBezierPath 对象的路径中追加 UIBezierPath的属性 CGPath...-> /** * 获取这个属性, 你将会获得一个不可变的 CGPathRef 对象, * 他可以传入 CoreGraphics 提供的函数中 * 你可以是用 CoreGraphics 框架提供的方法创建一个路径... * 如果当前路径为空, 那么该属性的值将会是 CGPointZero */ lineWidth -> /** * 线宽属性定义了 `UIBezierPath` 对象中绘制的曲线规格.
- (void)removeAnimationForKey:(NSString *)key; 还有一些其他的属性,就不一一介绍了,可以在使用的使用去.h文件中查看。...中可以放其他任何动画类(包括CAAnimationGroup),需要注意的是animations里的动画设置了duration之后动画可能会有不同,一般里面不设置,在最外层设置group的duration...示例代码可能与gif图不太一致,因为gif图是从其他demo中录制下来的。...方法六:绘制带圆角的矩形路径,参数2哪个角,参数3,横、纵向半径。 方法七:绘制每个角都是圆角的矩形,参数2是半径。...有三种方式:1、直接使用UIBezierPath的方法;2、使用CoreGraphics绘制;3、利用CAShapeLayer绘制。 示例代码如下,绘制一个右侧为弧型的视图: ?
在新版微信中,可以把浏览的文章缩小为浮窗.点击浮窗继续阅读.对于经常在微信里阅读的人来说,这简直就是人类之光. 微信效果如下 ? 微信效果 对于这功能我进行了仿写. 效果如下 ?...//手指在右下视图上的位置(若 x 0 && y 0 说明此时手指在右下视图上) CGPoint touchPoint = [kWindow convertPoint:[self.edgePan locationInView.....结束监听... } - (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event{ ...结束监听... } - (void)touchesMoved...; //开始/结束时的曲线 UIBezierPath *maskStartBP = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(floatBallRect.origin.x...#import “HKFloatManager.h” 中 //在AppDelegate中将类名传入即可,在该类控制器侧滑返回时启动浮窗功能(需要在实例化导航控制器之后) [HKFloatManager
小圆点的动画 根据数据源,在每一数据点处放上一个自定义UIView,在此自定义UIView的drawRect中绘制圆形图形,并且设置 shape.layer.opacity = 0;,即让这些小圆点(...@property CGPoint startPoint 映射locations中第一个位置,用单位向量表示,比如(0,0)表示从左上角开始变化。默认值是(0.5,0.0)。...** 在 drawRect 中 对小白点的动画延迟到 x 秒后,弹性动画开始的延迟时间为 0秒持续 x秒,这样就可以保证在弹性动画结束后,开始小白点的动画。...(4) 在弹性动画的执行期间,定时器会不断的获取某一时刻的所有的子视图的 坐标 ,并修改 曲线上的点的位置的坐标,并根据 currentLinePathForWave 这个方法绘制出 渐变图层的 mask...绘制关键步骤: 使用for循环在 drawRect方法中绘制每一个扇形(上篇文章已将讲过),因为环外的标注,所以圆环需要小些,否则外环线上的文字绘制起来有可能空间不够。
贝塞尔曲线,听着挺牛气一词,不过下面我们在做画图板的时候就用到贝塞尔绘直线,没用到绘制曲线的功能。如果会点PS的小伙伴会对贝塞尔曲线有更直观的理解。...点击保存时会把绘制的图片保存到手机的相册中。下面是具体的实现方案。 ? ...一.封装画图板 其实上面的白板就是一继承于UiView的一个子类,我们可以在这个子类中添加我们画图板相应的属性和方法,然后实例化成对象添加到ViewController中,当然为了省事添加白板的时候是通过...1.封装白板的第一步是新建一个UIView的子类MyView,然后添加相应的属性和方法。... 上面是封装画图板要用到的全部代码,下面的代码就是如何在ViewController中使用我们的画图板了,如何实例化控件,以及控件的初始化,注册回调等在这就不做赘述了,下面给出了主要控件的回调方法
和上一篇手势解锁不一样,手势解锁只画了一条路径,从触摸开始--》触摸移动--》触摸结束 ,然后路径完成了,渲染出来就是手势解锁了; 这次涂鸦想做到的效果是可以画很多次线段或弧,每次又可以设置不同的宽度和颜色...,然后还要有撤销、清屏、橡皮擦的功能,那就需要画很多条路径了,然后每条路径有自己的颜色和宽度,那么 UIBezierPath类也实现不了,需要自定义一个类,继承自UIBezierPath,然后再增加自己的颜色和宽度属性...//监听触摸移动中 42 - (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event{ 43 //追踪每次路径的移动过程...,重新绘制 47 } 48 49 //获取view对象中的当前位置 50 - (CGPoint)currentPoint: (NSSet *)touches{ 51 UITouch...的分类@interface UIView(UIViewRendering)中添加的方法 56 //setNeedsDisplay方法也是此分类中的方法 57 - (void)drawRect:(CGRect
iOS Programming – 触摸事件处理(2) 在上一篇《iOS Programming – 触摸事件处理(1)》中了解触摸、事件和响应者之后,接下去学习如何处理用户的触摸事件。...而这几个方法被调用时,正好对应了UITouch类中phase属性的4个枚举值。 上面的四个事件方法,在开发过程中并不要求全部实现,可以根据需要重写特定的方法。...,没有直接更改视图的背景属性,而是通过performSelector:withObject:afterDelay:方法设置2秒中后更改。...,因此在第一次点击的时候,设置背景色的方法已经启动,在检测到双击的时候先要把先前对应的方法取消掉,可以通过调用NSObject类的cancelPreviousPerformRequestWithTarget...[touch locationInView:self.view]获取手指触摸在当前视图上的位置,用CGPoint变量记录,然后在手指移动事件touchesMoved方法中获取触摸对象当前位置,并通过于与原始位置的差值计算出移动偏移量
他是一个二维的绘图引擎,同时支持iOS和Mac系统 2、Quartz2D能完成的工作 画基本线条,绘制文字,图片,截图,自定义UIView. 3、Quartz2D在开发中的价值 当我们的控件样式极其复杂时...相关联.才能将内容绘制到View上面.在DrawRect方法方法里 步骤: 1.要先自定定UIView 2.实现DrawRect方法 3.在DrawRect方法中取得跟View相关联的上下文...在调用这些方法之前,我们要进行一些其他的任务去确保正确的绘制path,以及path的设置。 使用UIColor类的方法去stroke和fill想要的颜色。...使用stroke和fill方法进行渲染时,不需要我们手动去获取上下文了,这两个方法会自定获取view的上下文,然后在该view上绘制渲染path对应的路径,stroke是绘制线,fill是填充path对应的封闭区域...扇形就是在圆弧的基础上进行填充,但是填充需要一个封闭的路径才能填充,所以画扇形的方法为: 1.先画一个圆弧 2.再添加一个一根线到圆心: 3.然后封闭路径:[path closePath],该方法会自动从路径的终点到路径的起点封闭起来
iOSProgramming – 触摸事件处理(2) 在上一篇《iOS Programming – 触摸事件处理(1)》中了解触摸、事件和响应者之后,接下去学习如何处理用户的触摸事件。...而这几个方法被调用时,正好对应了UITouch类中phase属性的4个枚举值。 上面的四个事件方法,在开发过程中并不要求全部实现,可以根据需要重写特定的方法。...,没有直接更改视图的背景属性,而是通过performSelector:withObject:afterDelay:方法设置2秒中后更改。...,因此在第一次点击的时候,设置背景色的方法已经启动,在检测到双击的时候先要把先前对应的方法取消掉,可以通过调用NSObject类的cancelPreviousPerformRequestWithTarget...[touch locationInView : self . view ] 获取手指触摸在当前视图上的位置,用CGPoint变量记录,然后在手指移动事件touchesMoved方法中获取触摸对象当前位置
用一个UISlider来模拟进度下载,这样可以通过拖动滑杆,感受到下载的过程。 实际开发中的提醒:在实际中,下载进度通常都不会放在主线程上,所以子线程获得下载的进度之后,不要忘记回到主线程刷新UI。...扇形进度指示器 定义扇形的中心、扇形的半径、扇形的起点; 计算扇形的结束位置:起点 + 进度百分比*2PI 根据起始点、原点、半径绘制弧线. 从弧线结束为止绘制一条线段到圆心。...这样系统会自动闭合图形,绘制一条从圆心到弧线起点的线段。 设置扇形的填充模式、填充颜色。 给View设置一个进度的属性,用来让外界赋值。...这样系统会自动闭合图形,绘制一条从圆心到弧线起点的线段。...设置扇形的填充模式 [sectorPath fill]; } //重写progress的set方法,可以在赋值的同时给label赋值 - (void)setProgress:(CGFloat
简单的动画,就是让他动起来 func sonar(_ beginTime: CFTimeInterval) { let circlePath1 = UIBezierPath(arcCenter...约束动画要注意的是,确保动画的起始位置准确,起始的时候,一般要调用其父视图的 layoutIfNeeded 方法,确保视图的实际位置与约束设置的一致。...return gradientLayer }() // 文字转图片,然后绘制到视图上 // 通过设置渐变图层的遮罩 `mask` , 为指定文字,来设置渐变闪烁的效果...UIGraphicsGetImageFromCurrentImageContext() UIGraphicsEndImageContext() // 从文字中...= UIBezierPath() // ...
——>redview对象 //************华丽分割线 便于阅读*********** 事件的传递其实就是在事件产生与分发之后如何寻找最优响应视图的一个过程。...,然后在调用hitTest: withEvent:依次获取处理这个事件的所有视图对象,在获取所有的可处理事件对象后,开始调用这些对象的touches回调方法 在自定义View中重写 touchesBegan...由于这些方法是事件进入应用程序的通道,所以,您可以从UIApplication或UIWindow派生出子类,重载其sendEvent:方法,实现对事件的监控或执行特殊的事件处理。...中创建一个 UIBezierPath,通过 [path containsPoint: point]来判断当前的点是否在圆内,pointInside的返回值直接影响到touchesEnded的调用,如果返回...- (BOOL)pointInside:(CGPoint)point withEvent:(UIEvent *)event { UIBezierPath * path = [UIBezierPath
首先,我们需要一张底图 第二,我们要从底图上截取一小部分作为一个滑块 最后,当滑块位置改变并且最终与截取的位置重合时应该验证成功 需求在这了,可能唯一的技术点就在于如何截取图片了。...其实UIControl有四个核心的方法,是用于控制事件追踪的。...此处可以分为两种思路,一种是通过DrawRect方法去追踪行为后不断绘制,另一种是通过Layer展示各个图层并追踪行为。...这里呢,老司机更加推荐使用Layer去处理图层,因为本身DrawRect方法中的代码是使用CPU进行预算然后将bitmap提交给GPU,他处理绘制的速度远不如CALayer直接使用GPU来的快。...图层的绘制老司机在CoreAnimation系列中已经写得很细了,在这也就不多写了。
,才干够接收和处理事件 父类响应者中定义的事件处理接口例如以下: 触摸事件处理的四个方法例如以下:(仅仅要实现,系统会自己主动调用) 一个UITouch对象,代表着一根手指,手指移动,...:三步曲(创建、设置、绑定) 重点关注三种手势识别的状态:開始\结束\取消 官方文档中关于手势识别的状态变化图 手势识别器的代理方法< UIGestureRecognizerDelegate...action:@selector(taping)]; // 2.设置手势的代理,目的是:决定手势仅仅有在特定场合才会被识别(触发监听的方法) tap.delegate = self;...获得当前的触摸点 UITouch *touch = [touches anyObject]; CGPoint startPos = [touch locationInView:touch.view...]; // 2.创建一个新的路径 UIBezierPath *currenPath = [UIBezierPath bezierPath]; currenPath.lineCapStyle
之前的文章老司机讲过,我们在drawRect中绘制文本的时候主要是根据Path去绘制的。...所以说,只要在这个地方我们传入的path中将特殊区域排除我们获得的frame就不包含该区域,从而绘制的文本也不会在该区域中绘制。 所以说上述的代码你看到的应该是这样子的文字区域 ?...老司机查阅了很多资料,有的资料说这个方法在当有段前缩进或者首行缩进的时候,并不准确,不会跟着缩进而进行偏移。然而老司机在将段前缩进设为0仍然有这个问题。...因为执行效率上一个屏幕内能展示的文字所包含的CTRun的数量在遍历过程中并不会造成过多的性能浪费,所以老司机当时也没有在意。...由于图片是在一个空白占位符上绘制文字,所以一定是以一个CTRun进行绘制的。但是第一篇文章中老司机说过,每个CTRun是所有具有相同属性的连续同行文字的集合。
二、数学基础 平面上的任意连续曲线可以通过伯恩斯坦多项式来进行逼近拟合,因此,当我们想在平面中画一条曲线的时候,如果可以模拟出此曲线的函数,则可以十分精准的控制计算机来描绘一系列曲线上的点来绘制曲线...下图可以很好的描述当t从0到1变化时,线段的绘制过程: ? 2、二阶贝塞尔曲线 二阶贝塞尔曲线有一个控制点,假设起始点,控制点和结束点分别为P0、P1、P2。...三、iOS中的贝塞尔曲线的应用 虽然贝塞尔曲线在很多开发领域都十分容易实现,由于我对iOS开发比较熟,并且上面的曲线绘制示例也是我通过iOS程序实现的。...这里就对在iOS中应用贝塞尔曲线进行简单的讨论,首先CoreGraphics核心图形框架中提供了CGPath可以直接创建贝塞尔曲线,系统支持的贝塞尔曲线函数有二阶与三阶。...这里主要列举UIKit框架中的UIBezierPath类。
,在初始化YYTextLayout时就将富文本中是否包含自定义 key 缓存起来。...9、小结 除开YYTextLayout初始化方法,还有在#pragma mark - Query标记下的一系列查询方法,这些查询方法都是基于上面的初始化计算数据。...(2) 绘制附件 绘制的逻辑在YYTextLayout下的方法YYTextDrawAttachment(...)...在YYLabel中,通过下列方法来写触发逻辑: - (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event; - (void)touchesMoved...具体实现有些复杂,所以关于异步绘制的具体原理可以看笔者专门的一篇博客: YYAsyncLayer 源码剖析:异步绘制 YYAsyncLayer 就是从 YYText 里面提取出来的组件,核心就是一个支持异步绘制的
领取专属 10元无门槛券
手把手带您无忧上云