Question

给出一系列JSON坐标，通常采用以下格式：

{from: {x:0, y:0}, to: {x:0, y:10}, ...}

我想绘制一系列直线虚线路径，这些路径与简单的固定半径圆角相连。我一直在寻找斜率截距形式来计算直线上的点，但我对于计算（贝塞尔？）曲线上的点的方法感到有些困惑。

e.g。我想在p1和p2以及p3和p4之间绘制曲线。尽管可怜的模型可能意味着我很高兴角落是一个固定的半径，例如10px的

Path

我想抽象出绘图逻辑，因此我正在寻找一种通用的方法来返回一个JavaScript点数组，然后我可以通过多种方式进行渲染（因此我避免使用SVG，Canvas等提供的任何内置函数））。

Answer 1

你想要的是一个三次贝塞尔曲线。

查看此页面上的第一个小程序。如果A是p1，D是p2，方向CD是线1的角度，你可以看到它如何为你提供所需的属性 - 它从角度1开始，以角度2结束，并且与要点。

所以，要得到你的分数C和D，一种方法是采用线段1，复制它，从p1开始放置它 - 并说出新线的结束位置是B，与线类似段2和p2用于D.（并且你可以做一些事情，比如有一个因子可以乘以复制的线段的距离，使曲线或多或少地伸出......等等）

然后做数学运算：）

一旦得到了曲线的等式，用一个所需精度的delta t（例如每0.1 t，每0.01 ......）逐步通过它，并将曲线上的每对点作为一条线吐出段。