用FLASH AS實現滑鼠畫圓的效果

在FLASH或PHOTOSHOP中能夠很輕鬆的畫出一個圓或者橢圓，怎樣做一個作品，讓使用者可以直接在裡面拖動滑鼠畫出一個圓或者橢圓來呢？下面是BreakDS用AS實現這個效果的講解－－

預覽：

一、基本定義：雖然說不說大家都清楚，但是我還是想講一下，以免一些人忘得差不多了～～

圓：平面上到定點距離等於定長的點的軌跡。
橢圓：平面上到兩定點距離和等於定長（定長大於兩定點間距離）的點的軌跡。

二、問題描述：畫圓和橢圓，使用AS。

三、問題分析：

1.圓
呵呵，大多數人看到後肯定想：哼～這不簡單，不就是描點法嘛？知道方程就行了～嗯，使用方程進行描點，固然是不錯的方法，當初我也是這麼做的。但是——（First Declare:如果你是用curveTo的，另當別論）
我們可以改進那種畫圓的方法：
首先，為了更好地寫出簡潔的代碼，我們不應採用普通方程，而應採用參數方程：

x = r×cos(a) y = r×sin(a) 其中a為參數。

然後，很重要的一點，關於時間複雜度，這點不得不考慮：如果a這個參數我們進行描點的時候選用增量為0.01則要進行2PI/0.01次描點，相當大。如果每次都這樣，顯然不是很好（或許有些人能夠接受，但是我往往習慣於無法容忍這樣的時間複雜度）。於是我們可以想：圓與圓之間有什麼不同？對了，半徑，圓心位置而已。那麼，就好辦了。我們可以先用描點畫一個圓存在一個mc裡（當然也可以直接用滑鼠畫個mc），然後到時候覆制並調整就OKay了。這是一個重要的思想。

2.橢圓：
圓的標準方程為x^2+y^2 = r^2，而橢圓是x^2/a^2+y^2/b^2=1。而對於圓上的一點（用參數方程表示）：

（r×cos(a),r×sin(a)） 其中a為參數。

我們如果將x方向按係數kx壓縮（或擴大），將y方向按係數ky壓縮（或擴大），則為（kx×r×cos(a),ky×r×sin(a)）。這樣這個點必在x^2/(kx×r)^2+y^2/(ky×r)^2 = 1上，則這樣的點的軌跡是一個橢圓！！！
這證明了壓縮圓所得的圖形是橢圓！！
如此，我們可以用設定複製出的圓mc的_xscale和_yscale來使它變成需要的橢圓！How nice！～
如此畫圓和橢圓就快多了

四、代碼解析

function circleforbase() {//用來畫基礎圓的mc，以後的所有圓或者橢圓都由這個圓複製得來    _root.createEmptyMovieClip("circle", 0);//建立一個空的mc    circle.lineStyle(1, 0x000000, 100);//設定線的屬性    var th = 0;//這個是使用圓的參數方程畫圓的那個參數～每次以step累加    var step = 0.01;//參數的步長，即每隔0.01弧度描一個點    with (circle) {        moveTo(100, 0);//移到將要畫的圓最右邊的那個點        do {            th += step;//參數值增加            lineTo(Math.cos(th)*100, Math.sin(th)*100);//按參數方程描點        } while (th<=Math.PI*2);//當參數等於2PI時停止，剛好一個圓周        _visible = 0;//將這個畫好的圓設定為“隱形”    }}circleforbase();//畫一個基礎圓mc，注意這個基礎圓的mc名字叫circlen = 0;//表示圓的個數f = 0;//表示滑鼠的狀態，1表示處於按下狀態，0相反stx = 0;sty = 0;enx = 0;eny = 0;//橢圓將被包涵在一個矩形內，以上的四個變數表示矩形的對角線上的兩個頂點，這樣可以確定這個矩形
function drawoval(sx,sy,ex,ey,n){//畫 圓/橢圓 的方法，實際上前面四個參數確定了一個矩形，但要注意只是邏輯上的矩形，//我們並不把它畫出來，只是在它的範圍內畫那個橢圓，下面的注釋會闡述這個矩形是什麼樣子的    _root.circle.duplicateMovieClip("cir"+n,n);//複製出一個標準圓（半徑為100的那個基礎mc）    with(_root["cir"+n]){        _xscale = Math.abs(ex-sx)/2;//設定橢圓的平行於x軸的半軸長        _yscale = Math.abs(ey-sy)/2;//設定橢圓的平行於y軸的半軸長        _x = 0.5*(sx+ex);//它的中心的x座標為矩形對角線中點的x座標        _y = 0.5*(sy+ey);//它的中心的y座標為矩形對角線中點的y座標    }}_root.onMouseDown = function(){    f = 1;    stx = _root._xmouse;    sty = _root._ymouse;    n++;//每當滑鼠按下，f值賦為1，矩形的一個頂點即為滑鼠按下時的座標，準備畫第n個橢圓。}_root.onMouseUp = function(){    f=0;//滑鼠鬆開，f賦為0，這樣當滑鼠移動時不會繼續畫橢圓}_root.onMouseMove = function(){    if (f){//當滑鼠移動時，如果滑鼠按下執行代碼（即重繪第n個橢圓）        enx = _root._xmouse;        eny = _root._ymouse;//確定外切這個橢圓的矩形（邊平行於座標軸的矩形）        drawoval(stx,sty,enx,eny,n);//在參數確定的那個矩形內重繪第n個橢圓    }}

源碼下載