极简主义 前端 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)