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

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

javascript html canvas

Javascript 如何使用这个名为bezierjs的库？,javascript,html,canvas,bezier,Javascript,Html,Canvas,Bezier,我有一个画布画有曲线，我想知道它的大小，就像这个库的一个例子例如：如何将您的示例与画布绘图结合起来这是我的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

我有一个画布画有曲线，我想知道它的大小，就像这个库的一个例子

例如：

如何将您的示例与画布绘图结合起来

这是我的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>


var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
c_尺寸=650；
ctx.canvas.width=c_尺寸；
ctx.canvas.height=c_尺寸；
ctx.beginPath（）；
ctx.strokeStyle='蓝色'；
ctx.moveTo（535105）；
ctx.方形曲线图（585,44620115）；
ctx.方形曲线图（628155643155）；
ctx.方形曲线图（628195643360）；
ctx.lineTo（550368）；
ctx.lineTo（538302）；
ctx.lineTo（552285）；
ctx.方形曲线图（528195535105）；
ctx.stroke（）；
不支持画布

我很确定我已经给了你API。与任何浏览器库一样，将其包含在页面上（这不需要明确的说明），然后按照指示调用该库：创建一个实例，然后调用联机文档中描述的api函数

还要注意的是，在HTML5中，除非不是JavaScript，否则不指示脚本类型。因此：

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

请注意，Bezier.js本身不是一个图形库，而是一个用于处理Bezier曲线的数学库。画布内置了二次和三次曲线绘制（SVG路径指令集也是如此）。Bezierjs是一个支持库，用于“获取曲线信息”，如弧长、曲线上点的LUT、交点计算等。

添加了bezier标记。。让我们看看是否有pomax出现。：-]我在您的代码中没有看到任何试图使用Bezier.js获取曲线信息的内容。现在您只使用canvas，这很好，canvas+SVG实际上附带了大量的绘图和测量操作。但这也使得这成为一个关于“你甚至需要Bezier.js吗？你想做什么？”的问题，两年后，我在试图理解代码时遇到了完全相同的问题。我真的很感激为图书馆付出的努力，不能抱怨。但是伙计，很难理解代码。我试图阅读index.html示例代码，但脚本type=“text/beziercode”的块代码很难理解。不知道应该如何触发draw函数。示例代码没有清楚地显示在普通浏览器环境中应该如何使用该库。您的意思是？大多数抽象都存在，因为您不需要关心它们做什么，只需要关心如何使用每个API部分的API函数。也就是说，关于bezierjs本身的问题和评论肯定应该发布在网站上，而不是这里。

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;