当前页面: 开发资料首页 → JSP 专题 → 如何计算SVG图形中bezier曲线的范围

如何计算SVG图形中bezier曲线的范围

摘要: 如何计算SVG图形中bezier曲线的范围

我用Java和JavaScript写了一个基于SVG的在线画图程序，目前已经实现了一般几何图形的绘制、插入图片、函数画图和简单的动画及滤镜。

问题是：对贝塞尔曲线，如何计算其范围（左上角的坐标和贝塞尔曲线的宽和高）。

目前我是采用的方法是：取两个端点外加控制点（共三个点）的（x,y)坐标，然后取(x,y)中的最小值作为左上角坐标，取最大值与最小值之差为贝塞尔曲线的宽和高，可这样计算出来不准确。有没有哪位高人有准确的计算方法。

程序演示地址：http://210.39.15.106/webdraw/webbrush.jsp

---

对不起，演示地址是:http://210.39.15.106/phys/webdraw/webbrush.jsp

---

http://www.bokequn.cn/boke_artical.aspx

---

难道除了三楼的广告之外，就没有人知道吗？总不能让我把分给一个广告贴吧。
实在没人回答，顶者有分。

---

顶！
贝赛尔都忘得差不多了，早不做图形了。

---

顶.同楼上,你可以先把贝赛尔曲线给讲下,大家再给你想办法

---

贝塞耳曲线的说明见：
http://bbs.blueidea.com/viewthread.php?tid=2326356&page=

我的比这要简单，先只考虑一段二次贝塞尔曲线。

---

看了一小段,看起来感觉吃力了!

---

搞定！自己在网上找到了一段非常简捷的计算贝塞尔曲线的函数:
//====================================//
// 13thParallel.org Beziér Curve Code //
// by Dan Pupius (www.pupius.net) //
//====================================//

coord = function (x,y) {
if(!x) var x=0;
if(!y) var y=0;
return {x: x, y: y};
}

function B1(t) { return t*t*t }
function B2(t) { return 3*t*t*(1-t) }
function B3(t) { return 3*t*(1-t)*(1-t) }
function B4(t) { return (1-t)*(1-t)*(1-t) }

function getBezier(percent,C1,C2,C3,C4) {
var pos = new coord();
pos.x = C1.x*B1(percent) + C2.x*B2(percent) + C3.x*B3(percent) + C4.x*B4(percent);
pos.y = C1.y*B1(percent) + C2.y*B2(percent) + C3.y*B3(percent) + C4.y*B4(percent);
return pos;
}

---