如何使用这个名为 bezierjs 的库？

Question

我有一个 canvas 有曲线的绘图，我想知道它的大小，就像这个库的示例之一一样。

示例：Size of a curve

如何将您的示例与我的 canvas 绘图相结合？

这是我的 javascript 代码：

<script type="text/javascript">
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");

c_size = 650;

ctx.canvas.width  = c_size;
ctx.canvas.height = c_size;

ctx.beginPath();
ctx.strokeStyle = 'blue';
ctx.moveTo(535,105);
ctx.quadraticCurveTo(585,44,620,115);
ctx.quadraticCurveTo(628,155,643,155);
ctx.quadraticCurveTo(628,195,643,360);
ctx.lineTo(550,368);
ctx.lineTo(538,302);
ctx.lineTo(552,285);
ctx.quadraticCurveTo(528,195,535,105);
ctx.stroke();
</script>
<canvas id='canvas' width='650' height='650' style="border: 1px solid #000">
Canvas not supported
</canvas>

Answer 1

我非常确定我给你 API the actual page for this library。像任何浏览器库一样，将它包含在您的页面上（这不需要明确的说明），然后按照指示调用该库：创建一个实例，然后调用在线文档中描述的 api 函数。

另请注意，在 HTML5 中，您无需指明脚本类型，除非它不是 JavaScript。所以：

<!doctype html>
<html>
  ...
  <script src="bezier.js"></script>
  ...
  <canvas id="mycanvas"></canvas>
  ...
  <script src="yourscript.js">?</script>
  ...
</html>

然后在你自己的文件中：

const cvs = document.getElementById("mycanvas");
const size = 650;
cvs.width  = size;
cvs.height = size;
let ctx = cvs.getContext("2d");

// now do things. Like this:
const curve = new Bezier(/* some coordinates here */);
const p = curve.points,
      p1 = p[0],
      p2 = p[1],
      p3 = p[2],
      p4 = p[3];

// draw the curve
ctx.beginPath();
ctx.moveTo(p1.x,p1.y);
ctx.curveTo(p2.x,p2.y, p3.x,p3.y, p4.x,p4.y);
ctx.stroke();

// what do we know about the curve?
let len = curve.length();
let bbox = JSON.stringify(curve.bbox());
let msg = `The curve has length ${len} and bounds ${bbox}`;
document.getElementById('infopanel').textContent = msg;

请注意 Bezier.js 而不是 本身是一个绘图库，它是一个用于处理贝塞尔曲线的数学库。 Canvas 内置了二次和三次曲线图（SVG 路径指令集也是如此）。 Bezierjs 是 "getting information about your curves" 的支持库，例如弧长、曲线上点的 LUT、交点计算等

如何使用这个名为 bezierjs 的库？

How to use this library called bezierjs?

html

javascript

bezier

canvas