|
使用 curveTo 繪制曲線
下一個(gè)繪圖函數(shù)，curveTo(x1, y1, x2, y2)，起點(diǎn)和 lineTo 一樣，同樣是以上一次畫線的終點(diǎn)做為本次畫線的起點(diǎn)，也可以使用 moveTo 命令指定畫筆的起點(diǎn)，如果是第一次畫線默認(rèn)的起點(diǎn)為0,0。
可以看到， curveTo 函數(shù)中包括兩個(gè)點(diǎn)。第一個(gè)是控制點(diǎn)影響曲線的形狀，另一個(gè)是曲線的終點(diǎn)。這里使用的是名為二次方貝塞爾曲線的標(biāo)準(zhǔn)公式，該公式可以計(jì)算出兩點(diǎn)間的曲線，這條曲線向著控制點(diǎn)彎曲。請(qǐng)注意，這條曲線不會(huì)與控制點(diǎn)接觸，很像是曲線被它吸引過(guò)去的。
下面來(lái)看動(dòng)作腳本，文檔類 DrawingCurves.as：
package {
import flash.display.Sprite;
import flash.events.MouseEvent;
public class DrawingCurves extends Sprite {
private var x0:Number = 100;
private var y0:Number = 200;
private var x1:Number;
private var y1:Number;
private var x2:Number = 300;
private var y2:Number = 200;
public function DrawingCurves() {
init();
}
private function init():void {
stage.addEventListener(MouseEvent.MOUSE_MOVE, onMouseMove);
}
private function onMouseMove(event:MouseEvent):void {
x1 = mouseX;
y1 = mouseY;
graphics.clear();
graphics.lineStyle(1);
graphics.moveTo(x0, y0);
graphics.curveTo(x1, y1, x2, y2);
}
}
}
測(cè)試這個(gè)文件，把鼠標(biāo)來(lái)回移動(dòng)。這里使用了兩個(gè)給定的點(diǎn)作為起點(diǎn)和終點(diǎn)，使用鼠標(biāo)位置作為控制點(diǎn)。請(qǐng)注意，曲線不會(huì)真正到達(dá)控制點(diǎn)位置，而只到達(dá)與控制點(diǎn)一半的位置。
過(guò)控制點(diǎn)的曲線
現(xiàn)在，如果想讓曲線真正地穿過(guò)控制點(diǎn)，那么這就是我們工具箱中的另一個(gè)工具。使用下面這個(gè)公式計(jì)算出控制點(diǎn)的實(shí)際位置，這樣就可以讓曲線穿過(guò)指定的點(diǎn)了。同樣，以 x0,y0 為起點(diǎn)，以 x2,y2 為終點(diǎn)，x1,y1為控制點(diǎn)，把將要穿過(guò)的點(diǎn)叫 xt,yt (目標(biāo)點(diǎn))。換言之，如果讓曲線穿過(guò) xt,yt點(diǎn)，那么 x1,y1 又需要如何使用呢？公式如下：
x1 = xt * 2 – (x0 + x2) / 2;
y1 = yt * 2 – (y0 + y2) / 2;
只需要把目標(biāo)點(diǎn)乘以2，然后減去起點(diǎn)與終點(diǎn)的平均值。大家可以畫張圖來(lái)究竟一下它的原理，要么就直接學(xué)會(huì)使用它。
把公式放在代碼中，鼠標(biāo)坐標(biāo)用使用 xt,yt，我們只需要改變前一個(gè)文檔類中的兩行，將下面兩行：
x1 = mouseX;
y1 = mouseY;
替換為
x1 = mouseX * 2 - (x0 + x2) / 2;
y1 = mouseY * 2 - (y0 + y2) / 2;
或者直接看 CurveThroughPoint.as，現(xiàn)成的文件。
出處：藍(lán)色理想
責(zé)任編輯：bluehearts
上一頁(yè) 渲染技術(shù) [4] 下一頁(yè) 渲染技術(shù) [6]
◎進(jìn)入論壇RIA設(shè)計(jì)與應(yīng)用版塊參加討論
|
第 1 頁(yè) 
第 5 頁(yè) 渲染技術(shù) [5]
