纯Javascript实现平滑曲线生成

PureJavascript实现平滑曲线生成简介平滑曲线生成是一项非常实用的技术。很多时候，我们需要画一些折线，然后让电脑把它们平滑的连接起来，或者生成一些光滑的曲面。先来看看最终效果（红色是我们输入的直线，蓝色是拟合曲线）。开头和结尾可以特殊处理，使图形更好看）。实现思路是利用贝塞尔曲线进行拟合。贝塞尔曲线简介贝塞尔曲线（英文：Béziercurve）是计算机图形学中非常重要的参数化曲线。二次贝塞尔曲线二次贝塞尔曲线的路径由给定点P0、P1、P2的函数B(t)追踪：三次贝塞尔曲线对于三次曲线，可以用线性贝塞尔曲线描述的中间点由Q0、Q1、Q2、二次曲线描述的点R0、R1：贝塞尔曲线计算函数根据上式，我们可以得到计算函数。二阶/****?@param{number}p0?@param{number}p1?@param{number}p2?@param{number}t?@return{*}?@memberofPath*/bezier2P(p0:数字,p1:数字,p2:数字,t:数字){constP0=p0*Math.pow(1-t,2);constP1=p1*2*t*(1-t);constP2=p2*t*t;返回P0+P1+P2;}/**???@param{Point}p0?@param{Point}p1?@param{Point}p2?@param{number}num?@param{number}tick?@return{*}{Point}?@memberofPath*/getBezierNowPoint2P(p0:Point,p1:Point,p2:Point,num:number,tick:number,):Point{return{x:this.bezier2P(p0.x,p1.x,p2.x,num*tick),y:this.bezier2P(p0.y,p1.y,p2.y,num*tick),};}/**?生成二次方贝塞尔曲线顶部数据??@param{Point}p0?@param{Point}p1?@param{Point}p2?@param{number}[num=100]?@param{number}[tick=1]?@return{*}?@memberofPath*/create2PBezier(p0:Point,p1:Point,p2:Point,num:number=100,tick:number=1,){constt=tick/(num-1);constpoints=[];for(leti=0;i1){delta=vector2dMinus(p1,vector2dPlus(pt,vector2dMinus(p2,pt).scale(1/v)),);}else{delta=vector2dMinus(vector2dPlus(pt,vector2dMinus(p1,pt).scale(v)),p2,);}delta=delta。比例（比率）；constcontrol1:Point={x:vector2dPlus(pt,delta).x,y:vector2dPlus(pt,delta).y,};constcontrol2:Point={x:vector2dMinus(pt,delta).x,y:vector2dMinus(pt,delta).y,};return{control1,control2};}/**?平滑曲线生成??@param{Point[]}points?@param{number}ratio?@return{*}?@memberofPath*/createSmoothLine(points:Point[],ratio:number=0.3){constlen=points.length;letresultPoints=[];constcontrolPoints=[];if(len<3)return;for(leti=0;i{letapp=document.getElementById('app');letindex=0;letmove=()=>{if(index