<a href="http://webabcd.blog.51cto.com/1787395/342175" target="_blank">[索引頁]</a>
<a href="http://down.51cto.com/data/100162" target="_blank">[源碼下載下傳]</a>
積少成多Flash(6) - ActionScript 3.0 繪圖之圖形和轉換
介紹
示範使用 Flash ActionScript 3.0 畫一些基本的圖形，以及對繪制的圖形或其他可視對象做一些基本的轉換
畫圖 - 通過 Shape 對象的 graphics 屬性來執行矢量繪圖指令
1、使用 lineStyle() 定義畫圖的線條樣式
2、moveTo() - 設定目前繪畫點；lineTo() - 以目前繪畫點為起點，用目前定義的線條樣式，畫一條直線到目标點；curveTo() - 指定二次貝塞爾曲線的控制點和終點，進而完成曲線的繪制；drawRect() - 繪制矩形；drawCircle() - 繪制圓形；drawEllipse() - 繪制橢圓；
3、beginFill() 和 endFill() 用于填充他們之間所繪制的圖形。如果是漸變填充則對應的方法是 beginGradientFill 和 endFill()
轉換 - 通過設定對象的 transform.matrix 屬性，對其做相應的轉換
Matrix.rotate() - 旋轉的角度
Matrix.translate() - 平移的距離
Matrix.scale() - 縮放的比例
Matrix.b - 将矩陣垂直傾斜
Matrix.c - 将矩陣水準傾斜
1、畫圖
在 UI 上放置 8 個 Button
名稱分别為：btnLine, btnCurve, btnRectangle, btnCircle, btnEllipse, btnLiner, btnRadial, btnClea
分别用于示範：畫直線，畫曲線，畫矩形，畫圓形，畫橢圓，線性漸變填充，放射性漸變填充，清除圖形
Main.as
package
{
import flash.display.MovieClip;
import fl.events.ComponentEvent;
import fl.events.SliderEvent;
import flash.display.Shape;
import flash.geom.Matrix;
import flash.display.GradientType;
import flash.display.SpreadMethod;
public class Main extends MovieClip
{
var originalMatrix:Matrix;
public function Main():void
{
btnLine.addEventListener(ComponentEvent.BUTTON_DOWN, drawLine);
btnCurve.addEventListener(ComponentEvent.BUTTON_DOWN, drawCurve);
btnRectangle.addEventListener(ComponentEvent.BUTTON_DOWN, drawRectangle);
btnCircle.addEventListener(ComponentEvent.BUTTON_DOWN, drawCircle);
btnEllipse.addEventListener(ComponentEvent.BUTTON_DOWN, drawEllipse);
btnLiner.addEventListener(ComponentEvent.BUTTON_DOWN, drawLinerGradient);
btnRadial.addEventListener(ComponentEvent.BUTTON_DOWN, drawRadialGradient);
btnClear.addEventListener(ComponentEvent.BUTTON_DOWN, clearGraphics);
}
// 畫直線
function drawLine(e:ComponentEvent):void
// lineStyle() - 定義畫圖的線條樣式
// 第一個參數：線條粗細，整數（0 - 255）
// 第二個參數：線條的顔色值（16進制）
// 第三個參數：不透明度（0 - 1）
canvas.graphics.lineStyle(12, 0x000000);
// moveTo() - 設定目前繪畫點。在本例中就是直線的起點
canvas.graphics.moveTo(0, 0);
// lineTo() - 以目前繪畫點為起點，用目前定義的線條樣式，畫一條直線到目标點
canvas.graphics.lineTo(100, 100);
// 畫曲線（二次貝塞爾曲線）
function drawCurve(e:ComponentEvent):void
canvas.graphics.lineStyle(1, 0x000000);
canvas.graphics.moveTo(100, 0);
// curveTo() - 指定二次貝塞爾曲線的控制點和終點，進而完成曲線的繪制
// 前兩個參數為控制點，後兩個參數為終點，目前繪畫點為起點
canvas.graphics.curveTo(100, 100, 200, 200);
// 畫矩形
function drawRectangle(e:ComponentEvent):void
canvas.graphics.lineStyle(5, 0xFF0000);
// drawRect() - 繪制矩形
// 第一個參數：矩形左上角的 x 坐标
// 第二個參數：矩形左上角的 y 坐标
// 第三個參數：矩形的寬
// 第四個參數：矩形的高
canvas.graphics.drawRect(200, 0, 100, 50);
// 畫圓
function drawCircle(e:ComponentEvent):void
// beginFill() - 單色填充這之後所繪制的圖形，直到調用endFill()為止
// 兩個參數分别為填充的顔色值和不透明度
canvas.graphics.beginFill(0xFF0000, 0.5);
// drawCircle() - 繪制圓形
// 三個參數分别為圓心的 x 坐标，圓心的 y 坐标，圓形的半徑
canvas.graphics.drawCircle(300, 0, 30);
// endFill() - 呈現 beginFill() 與 endFill() 之間所繪制的圖形的填充效果
canvas.graphics.endFill();
}
// 畫橢圓
function drawEllipse(e:ComponentEvent):void
canvas.graphics.beginFill(0xFF0000);
// drawEllipse() - 繪制橢圓
// 前兩個參數：橢圓左側頂點的 x 坐标和 y 坐标
// 後兩個參數：橢圓的寬和高
canvas.graphics.drawEllipse(0, 200, 100, 50);
// 線性漸變填充
function drawLinerGradient(e:ComponentEvent):void
// 聲明一個仿射矩陣 Matrix
var gradientBoxMatrix:Matrix = new Matrix();
// createGradientBox() - Matrix 的一個專門為漸變填充提供的方法
// 三個參數分别為漸變框的寬，漸變框的高，漸變框的旋轉弧度
gradientBoxMatrix.createGradientBox(50, 20, 0);
// beginGradientFill() - 做漸變填充
// 第一個參數：漸變模式。GradientType.LINEAR為線性漸變；GradientType.RADIAL為放射性漸變
// 第二個參數：漸變色的顔色值數組
// 第三個參數：漸變色的不透明度數組
// 第四個參數：漸變色的分布比例數組（0 - 255）。0為漸變框的最左側，255為漸變框的最右側
// 第五個參數：用 Matrix.createGradientBox() 生成的漸變框
// 第六個參數：伸展方式
// SpreadMethod.PAD - 用線性漸變線末端的顔色值填充剩餘空間
// SpreadMethod.REFLECT - 相鄰填充區域，以 相反方向 重複漸變，直至填充滿整個剩餘空間
// SpreadMethod.REPEAT - 相鄰填充區域，以 相同方向 重複漸變，直至填充滿整個剩餘空間
canvas.graphics.beginGradientFill(GradientType.LINEAR, [0xFF0000, 0x0000FF], [1, 1], [0, 255], gradientBoxMatrix, SpreadMethod.REPEAT);
canvas.graphics.drawRect(100, 200, 100, 20);
// 放射性漸變填充
function drawRadialGradient(e:ComponentEvent):void
{
// GradientType.RADIAL - 放射性漸變
canvas.graphics.beginGradientFill(GradientType.RADIAL, [0xFF0000, 0x0000FF], [1, 1], [0, 255], gradientBoxMatrix, SpreadMethod.REFLECT);
canvas.graphics.drawCircle(200, 200, 30);
// 清除圖形
function clearGraphics(e:ComponentEvent):void
{
// clear() - 清除 Graphics 上的圖形，并重置線條樣式和填充等設定
canvas.graphics.clear();
}
}
2、轉換
在 UI 上放置 3 個 Silder
分别名為：sliderScaleX, sliderScaleY, sliderRotate
分别用于示範 X 軸方向上的縮放，Y 軸方向上的縮放，旋轉
再放置 2 個 Button
分别名為：btnMatrix, btnClearMatrix
分别用于示範仿射矩陣在圖形轉換上的應用，還原為對象的初始仿射矩陣轉換
sliderScaleX.addEventListener(SliderEvent.THUMB_DRAG, scaleXHandler);
sliderScaleY.addEventListener(SliderEvent.THUMB_DRAG, scaleYHandler);
sliderRotate.addEventListener(SliderEvent.THUMB_DRAG, rotateHandler);
btnMatrix.addEventListener(ComponentEvent.BUTTON_DOWN, matrixHandler);
btnClearMatrix.addEventListener(ComponentEvent.BUTTON_DOWN, clearMatrixHandler);
// 儲存 canvas 的初始仿射矩陣轉換
originalMatrix = canvas.transform.matrix;
// 在 x 軸方向上做縮放
function scaleXHandler(e:SliderEvent):void
// scaleX - x軸方向上的縮放比例
canvas.scaleX = e.value;
// 在 y 軸方向上做縮放
function scaleYHandler(e:SliderEvent):void
// scaleY - y軸方向上的縮放比例
canvas.scaleY = e.value;
// 旋轉
function rotateHandler(e:SliderEvent):void
// rotation - 旋轉的度數
canvas.rotation = e.value;
// 仿射矩陣在圖形轉換上的應用
function matrixHandler(e:ComponentEvent):void
var matrix:Matrix = new Matrix();
// rotate() - 旋轉的角度
matrix.rotate(10);
// translate() - 平移的距離
matrix.translate(200, 200);
// scale() - 縮放的比例
matrix.scale(1.2, 1.2);
var skewMatrix:Matrix = new Matrix();
// 調整 b 屬性将矩陣垂直傾斜
// 調整 c 屬性将矩陣水準傾斜
skewMatrix.b = Math.tan(0.78);
// concat() - 組合兩個仿射矩陣
matrix.concat(skewMatrix);
// 在對象上應用仿射矩陣轉換
canvas.transform.matrix = matrix;
// 還原為初始的仿射矩陣轉換
function clearMatrixHandler(e:ComponentEvent):void
// 設定 canvas 的仿射矩陣轉換為初始的仿射矩陣
canvas.transform.matrix = originalMatrix;
OK
本文轉自webabcd 51CTO部落格，原文連結：http://blog.51cto.com/webabcd/342194，如需轉載請自行聯系原作者
![2021-08-08 mysql索引[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)