如何修改我的code行通过贝塞尔控制点？我的、塞尔、code
大家好 -
我使用的定位点和控制点，以创建一个使用curveTo的形状。这是所有工作正常，但我想不出如何让我的线路要经过控制点（蓝点）时，该行不直的中心。
下面是我的code绘制形状：
//清除旧线，绘制新/开始填
VAR G：图形=图形;
g.clear（）;
g.lineStyle（2,0，1）;
g.beginFill（0x0099FF，0.1）;
//移动到起始锚点
变种运行startx：数= anchorPoints [0] .X;
VAR startY：数= anchorPoints [0] .Y;
g.moveTo（STARTX，startY）;
//连接点
VAR numAnchors：数= anchorPoints.length;
对于（VAR我：数= 1; I＆LT; numAnchors;我++）{
//曲线通过控制下一个锚点
g.curveTo（控制点[I] .X，控制点[I] .Y，anchorPoints [I] .X，anchorPoints [I] .Y）;
}
//关闭循环
g.curveTo（控制点[0] .X，控制点[0] .Y，STARTX，startY）;
和形状我画，以供参考：
我
如何修改我的code，使得线路通过蓝色控制点直接去？
在此先感谢！
B
解决方案实例项目来源$ C $ C
如果你不感兴趣，这是怎么推导，直接跳到答案部分。
背景信息
贝塞尔曲线很有趣，有趣的工作。 此动画显示您的二次曲线被两个定位点（P0口和P2）随着时间的推移之间绘制相对于所述控制点（P1）
您需要做什么，而不是绘制的控制点（P1），是画点的曲线在t = 0.5的：
幸运的是，这是很容易做到的维基百科页面给出的公式：http://en.wikipedia.org/wiki/Bezier_Curve#Quadratic_B.C3.A9zier_curves
下面公式中的ActionScript：
公共职能calculatePoint（P0：点，P1：点，P2：点，T：号码）：点
{
VAR号码：点=新的点（calculateTerm（p0.x，p1.x，p2.x，T），calculateTerm（p0.y，p1.y，p2.y，T））;
返回磷;
}
公共职能calculateTerm（P0：编号，P1：号码，P2：号，电话：号码）：号码
{
VAR negT：数= 1 - 吨;
VAR A0：数= Math.pow（negT，2）* P0;
VAR A1：数= 2 * negT * T * P1;
VAR A2：数= Math.pow（T，2）* P2;
VAR POS：数= A0 + A1 + A2;
返回POS机;
}
因此，如果您将三点： VAR T0：积分= calculatePoint（P0，P1，P2，0.5）; 你会得到的曲线上的点要绘制你的控制点。
答案
现在我们可以写一个函数，假定第二种参数曲线上的一个点，并确定所述坐标的控制点的
公共职能derivePoint（P0：点，B1：点，P2：点，参数t：Number = 0.5）：点
{
VAR号码：点=新的点（deriveTerm（p0.x，b1.x，p2.x，T），deriveTerm（p0.y，b1.y，p2.y，T））;
返回磷;
}
公共职能deriveTerm（P0：编号，胜：编号，P2：号，电话：号码）：号码
{
VAR negT：数= 1 - 吨;
VAR A0：数= Math.pow（negT，2）* P0;
VAR A1：数= 2 * negT * T;
VAR A2：数= Math.pow（T，2）* P2;
VAR P1：数=（BT - A0 - A2）/ A1;
返回P1;
}
在这个我已经更新了你的code段为（希望）通过你的控制点绘制曲线
//清除旧线，绘制新/开始填
VAR G：图形=图形;
g.clear（）;
g.lineStyle（2,0，1）;
g.beginFill（0x0099FF，0.1）;
//移动到起始锚点
变种运行startx：数= anchorPoints [0] .X;
VAR startY：数= anchorPoints [0] .Y;
g.moveTo（STARTX，startY）;
//连接点
VAR P0：点=新的点（STARTX，startY）;
VAR P2：点;
VAR numAnchors：数= anchorPoints.length;
对于（VAR我：数= 1; I＆LT; numAnchors;我++）{
P2 =新的点（anchorPoints [I] .X，anchorPoints [I] .Y）;
//曲线通过控制下一个锚点
VAR B1：点=新的点（控制点[I] .X，控制点[I] .Y）;
VAR P1：点= derivePoint（P0，B1，P2）;
g.curveTo（p1.x，p1.y，p2.x，p2.y）;
P0 = P2;
}
//关闭循环
g.curveTo（控制点[0] .X，控制点[0] .Y，STARTX，startY）;
实例项目来源$ C $ C
HI all -
I am using anchor points and control points to create a shape using curveTo. It's all working fine, but I cannot figure out how to get my lines to go through the center of the control points (blue dots) when the line is not straight.
Here is my code for drawing the shape:
// clear old line and draw new / begin fill
var g:Graphics = graphics;
g.clear();
g.lineStyle(2, 0, 1);
g.beginFill(0x0099FF,.1);
//move to starting anchor point
var startX:Number = anchorPoints[0].x;
var startY:Number = anchorPoints[0].y;
g.moveTo(startX, startY);
// Connect the dots
var numAnchors:Number = anchorPoints.length;
for (var i:Number=1; i<numAnchors; i++) {
// curve to next anchor through control
g.curveTo(controlPoints[i].x,controlPoints[i].y, anchorPoints[i].x, anchorPoints[i].y);
}
// Close the loop
g.curveTo(controlPoints[0].x,controlPoints[0].y,startX,startY);
And the shape I'm drawing for reference:
How can I modify my code so that the lines go directly through the blue control points?
Thanks in advance!
b
解决方案Example project Source code
If you're not interested in how this is derived, skip down to the answer section.
Background Information
Bezier curves are interesting and fun to work with. This animation shows how your Quadratic curve is being drawn between the two anchor points (P0 and P2) over time with respect to the control point (P1).
What you need to do, instead of drawing the control point (P1), is draw the point on the curve at t=0.5:
Luckily this is easy to do with the equation given on the Wikipedia page: http://en.wikipedia.org/wiki/Bezier_Curve#Quadratic_B.C3.A9zier_curves
Here is the formula in Actionscript:
public function calculatePoint(p0:Point, p1:Point, p2:Point, t:Number):Point
{
var p:Point = new Point(calculateTerm(p0.x, p1.x, p2.x, t), calculateTerm(p0.y, p1.y, p2.y, t));
return p;
}
public function calculateTerm(p0:Number, p1:Number, p2:Number, t:Number):Number
{
var negT:Number = 1 - t;
var a0:Number = Math.pow(negT, 2) * p0;
var a1:Number = 2 * negT * t * p1;
var a2:Number = Math.pow(t, 2) * p2;
var pos:Number = a0 + a1 + a2;
return pos;
}
So if you plug the three points: var t0:Point = calculatePoint(p0, p1, p2, 0.5); you'll get the point on the curve where you want to draw your "control point".
Answer
Now we can write a function that assumes the second parameter is a point on the curve and determine the co-ordinates of the control point:
public function derivePoint(p0:Point, b1:Point, p2:Point, t:Number = 0.5):Point
{
var p:Point = new Point(deriveTerm(p0.x, b1.x, p2.x, t), deriveTerm(p0.y, b1.y, p2.y, t));
return p;
}
public function deriveTerm(p0:Number, bt:Number, p2:Number, t:Number):Number
{
var negT:Number = 1 - t;
var a0:Number = Math.pow(negT, 2) * p0;
var a1:Number = 2 * negT * t;
var a2:Number = Math.pow(t, 2) * p2;
var p1:Number = (bt - a0 - a2) / a1;
return p1;
}
From this I've updated your code snippet to (hopefully) draw the curve through your "control points":
// clear old line and draw new / begin fill
var g:Graphics = graphics;
g.clear();
g.lineStyle(2, 0, 1);
g.beginFill(0x0099FF,.1);
//move to starting anchor point
var startX:Number = anchorPoints[0].x;
var startY:Number = anchorPoints[0].y;
g.moveTo(startX, startY);
// Connect the dots
var p0:Point = new Point(startX, startY);
var p2:Point;
var numAnchors:Number = anchorPoints.length;
for (var i:Number=1; i<numAnchors; i++) {
p2 = new Point(anchorPoints[i].x, anchorPoints[i].y);
// curve to next anchor through control
var b1:Point = new Point(controlPoints[i].x,controlPoints[i].y);
var p1:Point = derivePoint(p0, b1, p2);
g.curveTo(p1.x, p1.y, p2.x, p2.y);
p0 = p2;
}
// Close the loop
g.curveTo(controlPoints[0].x,controlPoints[0].y,startX,startY);
Example project Source code
