将线转换为“矩形蛇”。帆布。JavaScript

Question

可能有人知道用于画布绘制的良好JavaScript库或框架。

我有以下问题：

1）徒手画一些线（如Paint/Photoshop铅笔）

2）需要将线转换为“矩形蛇”（使用固定宽度的矩形构建线）

看截图

对于这个问题，使用什么样的库会更好？可能某种库已经具有此功能？

我的意思是需要以下功能：

• 线近似

• 样条分离

• 将线转换为多边形/形状/对象

如果有人能帮助我，那就太好了。谢谢！

Answer 1

正如您在问题中所说，您的点可以变成由一组三次贝塞尔曲线组成的样条线。提示：您可以在计算剩余（较少）点的样条之前简化点集。

以下是如何沿着三次贝塞尔曲线计算一组矩形多边形。

旁注：多边形必须是矩形的，因为不可能沿着弯曲路径创建一组边连接的矩形。

1. 计算沿曲线的一组点。
2. 使用 #1 中的点计算每个点的切线角度。
3. 使用点和角度，计算从每个点向两个方向向外延伸的垂直线。
4. 使用垂直线的端点构建一组多边形。每个新的多边形都是根据先前和当前的垂直端点构建的。

下面是带注释的代码和演示：

// canvas related variables
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");

// variables defining a cubic bezier curve
var PI=Math.PI;
var PI2=PI*2;
var s={x:20,y:30};
var c1={x:300,y:40};
var c2={x:40,y:150};
var e={x:370,y:170};

// an array of points plotted along the bezier curve
var points=[];
// an array of polygons along the bezier curve
var polys=[];

// plot some points & tangent angles along the curve
for(var t=0;t<=100;t+=4){

  var T=t/100;

  // plot a point on the curve
  var pos=getCubicBezierXYatT(s,c1,c2,e,T);

  // calculate the tangent angle of the curve at that point
  var tx = bezierTangent(s.x,c1.x,c2.x,e.x,T);
  var ty = bezierTangent(s.y,c1.y,c2.y,e.y,T);
  var a = Math.atan2(ty, tx)-PI/2;

  // save the x/y position of the point and the tangent angle
  points.push({
    x:pos.x,
    y:pos.y,
    angle:a
  });         
}

// create polygons that extend on either side of the 
//     original points set
for(var i=1;i<points.length;i++){
  var p0=points[i-1];
  var p1=points[i];
  polys.push({
    x0:p0.x+20*Math.cos(p0.angle),
    y0:p0.y+20*Math.sin(p0.angle),
    x1:p1.x+20*Math.cos(p1.angle),
    y1:p1.y+20*Math.sin(p1.angle),
    x2:p1.x+20*Math.cos(p1.angle-PI),
    y2:p1.y+20*Math.sin(p1.angle-PI),                
    x3:p0.x+20*Math.cos(p0.angle-PI),
    y3:p0.y+20*Math.sin(p0.angle-PI),
  });
}

// draw the polygons
for(var i=0;i<polys.length;i++){
  var r=polys[i];
  ctx.beginPath();
  ctx.moveTo(r.x0,r.y0);
  ctx.lineTo(r.x1,r.y1);
  ctx.lineTo(r.x2,r.y2);
  ctx.lineTo(r.x3,r.y3);
  ctx.closePath();
  ctx.fillStyle=randomColor();
  ctx.fill();
  ctx.stroke();
}

// draw the bezier curve points
ctx.beginPath();
ctx.moveTo(points[0].x,points[0].y);
for(var i=0;i<points.length;i++){
  ctx.lineTo(points[i].x,points[i].y);
}
ctx.lineWidth=3;
ctx.strokeStyle='red';
ctx.stroke();

function randomColor(){ 
  return('#'+Math.floor(Math.random()*16777215).toString(16));
}


//////////////////////////////////////////
// helper functions
//////////////////////////////////////////

// calculate one XY point along Cubic Bezier at interval T
// (where T==0.00 at the start of the curve and T==1.00 at the end)
function getCubicBezierXYatT(startPt,controlPt1,controlPt2,endPt,T){
  var x=CubicN(T,startPt.x,controlPt1.x,controlPt2.x,endPt.x);
  var y=CubicN(T,startPt.y,controlPt1.y,controlPt2.y,endPt.y);
  return({x:x,y:y});
}

// cubic helper formula at T distance
function CubicN(T, a,b,c,d) {
  var t2 = T * T;
  var t3 = t2 * T;
  return a + (-a * 3 + T * (3 * a - a * T)) * T
  + (3 * b + T * (-6 * b + b * 3 * T)) * T
  + (c * 3 - c * 3 * T) * t2
  + d * t3;
}

// calculate the tangent angle at interval T on the curve
function bezierTangent(a, b, c, d, t) {
  return (3 * t * t * (-a + 3 * b - 3 * c + d) + 6 * t * (a - 2 * b + c) + 3 * (-a + b));
};

body{ background-color:white; padding:10px; }
#canvas{border:1px solid red; margin:0 auto; }

<h4>"Rectangular-ish" polygons along the red cubic bezier curve.</h4>
<canvas id="canvas" width=400 height=300></canvas>

均匀宽度的多边形：

同样，因为它们是矩形多边形，所以您将无法获得精确均匀的宽度。要获得半均匀宽度：

• 计算曲线上的许多点（可能超过 1000 个）。
• 使用距离公式将 1000 多个点集减少为沿曲线距离均匀的点集：var distance=Math.sqrt( (pt1.x-pt0.x)*(pt1.x-pt0.x) + (pt1.y-pt0.y)*(pt1.y-pt0.y) )