极简曲线编辑

极简主义 前端 Minimalist Curve editor

基于canvas功能

• 任意位置插入节点
• 拖动节点
• 节点卡位
• 曲线控制

节点的存储格式

var pts = [];
{x:100,y:100},…,{x:300,y:300}

插值采用如下方法

		// 中值函数 
		function mid(p1,p2){
			return{
				x:(p1.x+p2.x)/2,
				y:(p1.y+p2.y)/2
			}
		}
		// 曲线中值插值函数 
		function interp(i){
			var N = pts.length - 1;
			var p1 = i>0 ?pts[i-1]:pts[0];
			var p2 = pts[i];
			var p3 = i<N ?pts[i+1]:pts[N];
			var ip1 = mid(p1,p2);
			var ip3 = mid(p2,p3);
			return [ip1,p2,ip3]
		}

绘图函数功能实现

// 绘图部分
		ctx.beginPath();
		var N = pts.length - 1
		ctx.moveTo(pts[0].x,pts[0].y);
		for (var i=1; i <= N; i++) {
			// ctx.lineTo(pts[i].x,pts[i].y);
			var ip = interp(i);
			ctx.bezierCurveTo(ip[0].x,ip[0].y,ip[1].x,ip[1].y,ip[2].x,ip[2].y);
		}
		ctx.stroke();

在mouse move中的卡位实现

			mouse = windowToCanvas(mx, my);
			var clap_min = sel_id>0?pts[sel_id-1].x:0
			// console.log('max',sel_id,pts.length)
			var clap_max = sel_id<=pts.length-1?pts[sel_id+1].x:canvas.width

			mouse.x = Math.min(mouse.x,clap_max)
			mouse.x = Math.max(mouse.x,clap_min)