1

目前我遇到了一个问题,我相信其他人已经面临并且可能在我之前解决了。可悲的是,我不知道如何称呼这个问题或使用哪些关键字来搜索它。到目前为止,我的研究还没有成功。

如果您能指出正确的方向或帮助我找到一个比我目前认为过于复杂的解决方案更简单的解决方案,我将不胜感激。

语言:Javascript 对象:SVG 对象

任务:

给定的是一个坐标数组,它象征着数据点和宽度。我的目标是在所有点具有给定宽度的点之间生成线。此外,我必须能够将中间的线分割到相邻点之间。对于小于 3 或 4 个像素的宽度,我可以通过简单地使用折线轻松实现这一点。但是如果宽度变大,折线会产生越来越大的误差。

示例 01 - 小蓝点代表原始坐标

错误在于 svg 折线在坐标上延伸以生成角的尖端。通过这个,信息的精确表示变得错误。我的目标是重新计算坐标,以便拐角的这个扩展尖端恰好位于给定坐标上(1 个像素容差)。

如果这样更简单,也可以用多边形或通过多种形式构造它来替换线。

最后的结果应该看起来有点像这幅绘画技巧的杰作,但它被填充了,而不仅仅是一个轮廓。现在到规范:

  • 起点和终点位于线的中间(点 1 和 5)
  • 小于 90 度的角度(点 2 和 3)表示尖端或所得尖端(内角)
  • 大于 90 度的点(点 4)应位于角度的平分线上

目前我的解决方案是基于几何,从我知道的值中获取角度,然后计算新点,但是它已经非常复杂和复杂,我只是担心它需要很长时间才能让它像我需要它。

我认为像 photoshop 或其他矢量工具这样的程序能够做与我的情况类似的事情,但由于我不知道这个问题/algorihtm 是如何被调用的,所以我还没有找到很多有用的信息。

非常感谢各位!

4

1 回答 1

0

查看有关快速计算线段之间交叉点的算法的答案。

否则,我会寻找像RaphaëlSVG.JS这样的矢量库,看看它们是否有你可以使用的东西。

最后的想法:通过您给出的示例,我怀疑您会发现路径元素是最简单的解决方案。另外,您担心幼稚计算的速度,但我认为除非您处理成千上万的点,否则您尝试一下会感到惊讶。

于 2013-06-28T14:54:31.113 回答