首頁 › 部落格 › Jack Li 的部落格

Flash绘图API Flash Drawing API Illustrated

一, 08/11/2008 - 17:16 — Jack Li

Drawing with flex is easy. The class below demonstrates drawing lines, rectangles, gradient fillings, etc.

package
{
    import flash.display.GradientType;
    import flash.geom.Matrix;
    import mx.containers.Canvas;

    public class DrawingCanvas extends Canvas
    {
        public function DrawingCanvas()
        {
            super();
        }
        override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
            // draw canvas border.
            graphics.lineStyle(1, 0xcccccc, 1, true);
            graphics.drawRect(0, 0, unscaledWidth, unscaledHeight);

            // draw a line
            graphics.lineStyle(1, 0xff0000, 0.75);
            graphics.moveTo(20, 20);
            graphics.lineTo(50, 50);

            // draw rectangle with round corners.
            graphics.drawRoundRect(10, 10, 300, 200, 30, 30);
            graphics.drawRoundRectComplex(30, 30, 300, 200, 5, 5, 0, 0);

            // fill circle.
            graphics.lineStyle(1, 0x0000ff, 0.5); // set border
            graphics.beginFill(0x999999, 0.5); // set fill
            graphics.drawCircle(100, 100, 30);
            graphics.endFill();

            // fill gradient horizontally
            var matrix:Matrix = new Matrix();
            matrix.createGradientBox(400, 100);
            graphics.lineStyle(1, 0xffffff, 0); // set border
            graphics.beginGradientFill(GradientType.LINEAR, [0xff0000, 0x00ff00, 0x0000ff], [1, 1, 1], [0, 60, 120], matrix);
            graphics.drawRoundRectComplex(10, 240, 400, 100, 5, 5, 0, 0);
            graphics.endFill();

            // fill gradient vertically
            matrix = new Matrix();
            matrix.createGradientBox(400, 100, Math.PI * 0.5, 10, 360);
            matrix.translate(0, 0);
            graphics.beginGradientFill(GradientType.LINEAR, [0xff0000, 0x00ff00, 0x0000ff], [1, 1, 1], [0, 60, 120], matrix);
            graphics.drawRoundRectComplex(10, 360, 400, 100, 5, 5, 0, 0);
            graphics.endFill();
        }
    }
}

 

Output:

 

flashdraw