CN111443864B - 基于iOS的曲线绘制方法 - Google Patents

Abstract

本发明涉及绘图技术领域，公开了一种基于iOS的曲线绘制方法，采用该方法对于任何复杂曲线，在获取手指落在屏幕上触点后，只需要取出曲线上一系列的参考点，将曲线转化成由若干直线线段组成的线段集合，然后判断触点到该线段的距离或到线段两端点距离的最小值是否小于第一阈值，即可得判断出该触点是否在该曲线上，解决了目前iOS系统中尚无API检测点在曲线上的问题，能够正确地捕捉用户的绘制行为。

Description

基于iOS的曲线绘制方法

技术领域

本发明涉及绘图技术领域，特别涉及一种基于iOS的曲线绘制方法。

背景技术

在目前的iOS系统中，通常使用系统提供的Quartz2D绘图框架的相关API进行曲线绘制，但由于整体的绘制发生在CPU上而非GPU，会触发离屏渲染，导致CPU资源消耗过高，从而引发性能问题，在绘制曲线的过程中容易出现绘制缓慢卡顿等现象，体验非常不好；同时在绘制曲线的系统中，除了绘制逻辑，通常还包含拖拽和修改已有曲线的逻辑，当前的Quartz2D框架中，并没有提供检测点在绘制的曲线上的相关API，导致无法正确捕捉用户的绘制行为，当用户将手落在屏幕上时，无法判断用户此次的行为是绘制曲线还是拖拽已有的曲线，目前大部分绘制系统中采用了一定的妥协方案，通过iOS提供的点是否在绘制的曲线内的API，来代替判断点是否在曲线上，但是弊端也很明显，首先绘制的曲线不一定都是闭合曲线，所以没有曲线内部这个概念，此时该API是无法正确判断的，另外即使是闭合曲线，在曲线内部和曲线上也是两个完全不通的概念，往往无法满足用户真是的绘制需求，绘制曲线的体验非常不佳。

发明内容

本发明提出一种基于iOS的曲线绘制系统，解决现有技术中在iOS系统下绘制曲线时无法有效地判断点在曲线上的问题。

本发明的一种基于iOS的曲线绘制方法，包括步骤：

S1：获取手指落在屏幕上触点的触点坐标；

S2：判断屏幕上是否有已经绘制的曲线，若有，则执行步骤S3，否则，执行步骤S11；

S3：读取待遍历曲线集合中下一条曲线在绘制时保存的参考坐标；

S4：针对当前遍历的曲线，依次取出相邻两个点的参考坐标，并组成线段；

S5：判断触点在所述线段中的垂直投影点是否在所述线段上，若是，则执行步骤S6，否则，执行步骤S7；

S6：判断触点坐标与所述线段的距离是否小于预设的第一阈值，若小于，则终止遍历操作，执行步骤S10；否则，执行步骤S8；

S7：判断触点坐标到两个参考坐标的最短距离是否小于所述第一阈值，若小于，则终止遍历操作，执行步骤S10；否则，执行步骤S8；

S8：判断当前曲线上点的遍历是否完成，若是，则执行步骤S9，否则，执行步骤S4；

S9：判断屏幕上所有曲线的参考坐标的遍历是否完成，若是，则执行S11，否则，执行步骤S3；

S10：取消曲线的绘制指令，同时发送移动曲线的指令，让当前遍历的曲线按照手指移动；

S11：在屏幕上绘制曲线，在所述曲线上均匀选取预定数量的点，并保存其坐标为所述参考坐标。

其中，步骤S2中，若屏幕上有已绘制曲线时，还包括：针对每条曲线，计算出触点坐标到曲线上各参考坐标的距离，并取距离的最小值，最小值小于预设的第二阈值时，将该曲线加入到所述待遍历曲线集合中，所述第二阈值大于第一阈值。

其中，所述第一阈值为3～5mm。

其中，所述步骤S11中在屏幕上绘制曲线的步骤包括：创建CAShapeLayer实例，将绘制的曲线实例赋值给所述CAShapeLayer实例的Path属性，以渲染并显示曲线。

其中，所述预定数量的点为100～120个。

本发明的基于iOS的曲线绘制方法中，对于任何复杂曲线，在获取手指落在屏幕上触点后，只需要取出曲线上一系列的参考点，将曲线转化成由若干直线线段组成的线段集合，然后判断触点到该线段的距离或到线段两端点距离的最小值是否小于第一阈值，即可得判断出该触点是否在该曲线上，解决了目前iOS系统中尚无API检测点在曲线上的问题，能够正确地捕捉用户的绘制行为。

附图说明

为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1为本发明的一种基于iOS的曲线绘制方法流程图。

具体实施方式

下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有作出创造性劳动的前提下所获得的所有其他实施例，都属于本发明保护的范围。

本实施例的基于iOS的曲线绘制方法如图1所示，包括：

步骤S1，获取手指落在屏幕上触点的触点坐标，触摸屏的屏下电路会自动检测触点，以得到触点坐标。

步骤S2，判断屏幕上是否有已经绘制的曲线，若有，则执行步骤S3，否则，执行步骤S11。

步骤S3，读取待遍历曲线集合中下一条曲线在绘制时保存的参考坐标。若是第一次遍历，则遍历第一条曲线，遍历曲线的顺序可以是按曲线绘制的时间先后顺序，也可以是随机，待遍历曲线集合可以是屏幕上已绘制的所有曲线形成的集合。

步骤S4，针对当前遍历的曲线，依次取出相邻两个点的参考坐标，并组成线段。

步骤S5，判断触点在所述线段中的垂直投影点是否在所述线段上，若是，则执行步骤S6，否则，执行步骤S7。

步骤S6，判断触点坐标与所述线段的距离是否小于预设的第一阈值，若小于，则可认为该触点落在曲线上，表明此时该触点的意图为移动曲线而不是绘制曲线，终止遍历操作，执行步骤S10；否则，执行步骤S8。

步骤S7，判断触点坐标到两个参考坐标的最短距离是否小于所述第一阈值，若小于，则可认为该触点落在曲线上，表明此时该触点的意图为移动曲线而不是绘制曲线，终止遍历操作，执行步骤S10；否则，执行步骤S8。由于此时触点相对于线段的垂直投影点在线段的延长线上，不应以S6的判断为标准，最短距离应该是触点分别到组成线段的两个端点坐标的距离中较短的一个。

其中，该第一阈值表示当一坐标点与一条线段的距离小于等于该值的时候，即可判定为该点在这条线段上，本实施例中，不能严格点设置第一阈值为0，因为该坐标点是用户手指触摸屏幕产生，并不是手动输入，所以很难完全落在线段上，而且从实际的用户体验来看，只要用户人眼觉得手指和线段接近就可以认为点在线段上，所以此第一阈值可根据实际情况设置，数值越大，触点在线段上的条件越宽松，实际操作中，将第一阈值控制在3～5mm是一个比较合适的值。

步骤S8，判断当前曲线上点的遍历是否完成，若是，则执行步骤S9，否则，执行步骤S4。

步骤S9，判断屏幕上所有曲线的参考坐标的遍历是否完成，若是，则执行S11，否则，执行步骤S3。

步骤S10，取消曲线的绘制指令，同时发送移动曲线的指令，让当前遍历的曲线按照手指移动。

步骤S11，在屏幕上绘制曲线，在所述曲线上均匀(几乎等距离选取)选取预定数量的点，并保存其坐标为所述参考坐标。其中，绘制曲线有两种方式：

第一，直接通过连接手指在屏幕上移动的点绘制曲线；

第二，通过指定的曲线公式绘制曲线。

若采取第一种方式，在连接点绘制曲线的过程中，同时利用一个数组将所有的点坐标作为参考坐标保存；若采取第二种方式，在通过公式绘制曲线后，在整个曲线范围中，可利用公式计算一定数量的曲线上的点的坐标作为参考坐标，同时也利用一个数组进行保存。

本实施例的基于iOS的曲线绘制方法中，对于任何复杂曲线，在获取手指落在屏幕上触点后，只需要取出曲线上一系列的参考点，将曲线转化成由若干直线线段组成的线段集合，然后判断触点到该线段的距离或到线段两端点距离的最小值是否小于第一阈值，即可得判断出该触点是否在该曲线上，解决了目前iOS系统中尚无API检测点在曲线上的问题，能够正确地捕捉用户的绘制行为。

在绘制曲线时，触点可能和已绘制的所有或某些曲线都距离较远，明显不是移动曲线的操作，因此，步骤S2中，若屏幕上有已绘制曲线时，还包括：针对每条曲线，计算出触点坐标到曲线上各参考坐标的距离，并取距离的最小值，最小值小于预设的第二阈值时，将该曲线加入到所述待遍历曲线集合中，第二阈值大于第一阈值，该操作可以直接排除与触点较远的曲线，精简待遍历曲线集合中曲线的数量，减少后续遍历操作和判断的次数，提升效率。

本实施例中，步骤S11中在屏幕上绘制曲线的步骤包括：创建CAShapeLayer实例，将绘制的曲线实例赋值给所述CAShapeLayer实例的Path属性，以渲染并显示曲线。使用CAShapeLayer渲染绘制曲线，不存在传统通过Quartz2D框架绘制曲线产生的离屏渲染而导致的性能问题，因为CAShapeLayer属于iOS的CoreAnimation框架，该框架下所有的渲染都发生在GPU中而非CPU中，避免了离屏渲染问题，并且iOS还对该框架提供了硬件加速，使得其绘制性能更加优秀。

本实施例中，曲线绘制时取的点的数量根据实际情况而定，点越多后期的点在直线上的计算就更为精确，但是也会增加计算时间对性能造成负担，本实施例中，为兼顾精确性和性能负担，预定数量的点为100～120个。

以上所述仅为本发明的较佳实施例，并不用以限制本发明，凡在本发明的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。

Claims (5)

1.一种基于iOS的曲线绘制方法，其特征在于，包括步骤：

S1：获取手指落在屏幕上触点的触点坐标；

S2：判断屏幕上是否有已经绘制的曲线，若有，则执行步骤S3，否则，执行步骤S11；

S3：读取待遍历曲线集合中下一条曲线在绘制时保存的参考坐标；

S4：针对当前遍历的曲线，依次取出相邻两个点的参考坐标，并组成线段；

S5：判断触点在所述线段中的垂直投影点是否在所述线段上，若是，则执行步骤S6，否则，执行步骤S7；

S6：判断触点坐标与所述线段的距离是否小于预设的第一阈值，若小于，则终止遍历操作，执行步骤S10；否则，执行步骤S8；

S7：判断触点坐标到两个参考坐标的最短距离是否小于所述第一阈值，若小于，则终止遍历操作，执行步骤S10；否则，执行步骤S8；

S8：判断当前曲线上点的遍历是否完成，若是，则执行步骤S9，否则，执行步骤S4；

S9：判断屏幕上所有曲线的参考坐标的遍历是否完成，若是，则执行S11，否则，执行步骤S3；

S10：取消曲线的绘制指令，同时发送移动曲线的指令，让当前遍历的曲线按照手指移动；

S11：在屏幕上绘制曲线，在所述曲线上均匀选取预定数量的点，并保存其坐标为所述参考坐标。

2.如权利要求1所述的基于iOS的曲线绘制方法，其特征在于，步骤S2中，若屏幕上有已绘制曲线时，还包括：针对每条曲线，计算出触点坐标到曲线上各参考坐标的距离，并取距离的最小值，最小值小于预设的第二阈值时，将该曲线加入到所述待遍历曲线集合中，所述第二阈值大于第一阈值。

3.如权利要求1所述的基于iOS的曲线绘制方法，其特征在于，所述第一阈值为3～5mm。

4.如权利要求1所述的基于iOS的曲线绘制方法，其特征在于，所述步骤S11中在屏幕上绘制曲线的步骤包括：创建CAShapeLayer实例，将绘制的曲线实例赋值给所述CAShapeLayer实例的Path属性，以渲染并显示曲线。

5.如权利要求1～4中任一项所述的基于iOS的曲线绘制方法，其特征在于，所述预定数量的点为100～120个。

Images