网站建设经费预算,门户网站开发费怎做账,自助建站优化排名,高端品牌服装有哪些在两条折线间完成平滑的过渡是 用画布做UI 或者做类似地图编辑器一类的工作的 很常见的任务。 怎么样化方为圆是决定工作效率的很重要的因素。#xff08;当需要编辑的曲线多起来#xff0c; 复杂起来的时候#xff0c;这会是件相当繁重的工作#xff09; 最容易想到的莫非… 在两条折线间完成平滑的过渡是 用画布做UI 或者做类似地图编辑器一类的工作的 很常见的任务。 怎么样化方为圆是决定工作效率的很重要的因素。当需要编辑的曲线多起来 复杂起来的时候这会是件相当繁重的工作 最容易想到的莫非是 贝塞尔曲线而且时下几乎所有主流的数学算法库或者画布api 都已经很好的支持了贝塞尔曲线的绘制。 并能提供很便利的接口通常只需知道 开始位置 结束位置 以及贝塞尔控制点 就可生成一条贝塞尔曲线。 例如 context.bezierCurveTo(controlX1, controlY1, controlX2, controlY2, endX, endY); 贝塞尔曲线的定义是由当前的上下文来看两个控制点和结束点。曲线的第一部分是切向的假想线是由上下文点和第一个控制点定义。第二部分的曲线相切的假想线是第二个控制点和结束点定义。 但是贝塞尔曲线仍旧属于“高输入”api 尤其是贝塞尔控制点的定义其实并不是一个简单就能得到的东西。而且在实际应用中通常的需求多为 已知折线然后把折线转化为曲线的情况。 一般来说折线我们是最好获得的得到转折点连接起来就可以了。但是当折线多起来的时候会发现按照贝塞尔曲线绘制的思路来绘制平滑的曲线会是一件相当困难的事光是控制点的确定就是一个大工程。 为了更好的直接的把折线转化为平滑的曲线。我们还是得回到曲线绘制的根源--- 折线模拟 这就是今天想记录的Chaikin Curve 插值曲线。 原理我们称一条折线的起始和结束的点 为断点 中间的转折点都叫折点。于是 在每个非端点的折点附近取连接这个折点的两条线段各自的1/3位置处新建一个点。并将这两个新建的点连接。如此重复下去直到模拟出想要的平滑度。根据想要的不同的曲线弧度也可将1/3 替换成 1/4 或1/2 ... 这种方法如此简单已知一条折线根据需要定义迭代次数即可得到一条曲线模拟。 同时用这种方式创建的折线还有一个优势就是很方便的能得到曲线的长度因为是折线模拟的所以折线长度之和即为曲线的长度。 也不用担心这种类似二分的迭代方式计算量会有多大。我自己的测试在800*800的区域通过插值来模拟曲线基本也就迭代4次就已经足够平滑了。 曲线模拟的过程大致如下的动画 以上都为随机6个点迭代模拟4次的过程。 主函数即为下面的 subDivide var Point2 La.geometry.Point2, // Point Class Vector2 La.geometry.Vector2, // Vector Class self this;this.subDivide function (handles, subdivs) {if (handles.length) {do {var numHandles handles.length;// 第一个点 handles.push(new Point2(handles[0].x, handles[0].y));for (var i 0; i numHandles - 1; i) {// 每次拿出两个点 var p0 handles[i];var p1 handles[i 1];// 根据两个原始点创建两个新点做插值 var Q new Point2(0.75 * p0.x 0.25 * p1.x, 0.75 * p0.y 0.25 * p1.y);var R new Point2(0.25 * p0.x 0.75 * p1.x, 0.25 * p0.y 0.75 * p1.y); handles.push(Q); handles.push(R); }// 最后一个店 handles.push(new Point2(handles[numHandles - 1].x, handles[numHandles - 1].y));// 更新数组 for (var i 0; i numHandles; i) handles.shift();//handles.shift(numHandles); } while (--subdivs 0); } }; 转载于:https://www.cnblogs.com/hongru/archive/2011/10/27/2226946.html
