JavaScript 关于用贝赛尔曲线在页面画两个点之间弧线连线

fengzhilian818 · 2014年04月21日 · 最后由 Kabie 回复于 2014年04月22日 · 5227 次阅读

最近在用 JS 在页面用地图图片做背景图片,在地图上用两点表示两个的坐标位置。点击一个坐标点用贝塞尔曲线动态表示连接两个点。再次点击该点弧线动态收缩。 目前我用贝塞尔公式: x=(1-t)² × x0 +2t(1-t) × x1+t² × x2; y=(1-t)² × y0+2t(1-t) × y1+t² × y2;(t=0→1) 画线效果是曲线不够圆滑,弧线收放速度不够均匀,不知道哪位高人有更好的方式动态画弧线?类似地球定位功能的网站如:icaper.net。iPad 版的地球在一个 APP 里面,APP 地址:http://t.cn/8FFxXfK

为啥要自己套公式……SVG 或者 canvas 都有现成实现吧。。。

楼主是做多个点连接的连续平滑曲线么?如果是这个需求的话可以用 quadraticCurve 试试,效果比较理想

#1 楼 @Kabie 用 canvas 做过,貌似不能实现匀速连接两个点,实现动态效果。SVG 目前只能实现两个点直线匀速连接,弧线没能实现。。。

#2 楼 @dy1901 对的,quadraticCurve 貌似不能实现,匀速动态连接两个点啊

http://www.jasondavies.com/animated-bezier/

SVG 的这有个例子……用的 d3……

需要 登录 后方可回复, 如果你还没有账号请 注册新账号