3

我正在尝试复制此图像，因为您可以看到 HTML 有 2 个点和一条连接它们的线。我在 Photoshop 中这样做是为了展示我想要实现的目标。到目前为止，大多数 CANVAS 还没有帮助我做到这一点。因为我必须确定精确的曲率和高度，并且这种关系可以根据另一个表之间的表行关系的位置而变小或变大。

在此处输入图像描述

4

2 回答 2

0

我会尝试 Raphael.JS http://raphaeljs.com/ http://raphaeljs.com/curver.html

您可以使用 jQuery 的偏移量http://api.jquery.com/offset/获取 DOM 元素的 x/y 坐标

于 2013-03-05T17:09:05.267 回答
0

您可能想要使用 quadraticCurveTo 函数。 https://developer.mozilla.org/en-US/docs/HTML/Canvas/Tutorial/Drawing_shapes#Bezier_and_quadratic_curves

如果您已经拥有两点中的 x,y，则您的状态良好。

您的控制点将是曲线的峰值。

xc = control x

xy = control y

y1 = point 1 y

y2 = point 2 y

保持xc静态并计算yc = (y2 - y1) / 2

于 2013-03-05T17:14:01.063 回答