Question

I am using Flex 4 and AS3 and I am trying to make it so that the user can draw a freehand line with the cursor – I have this part done.

However, I also need the line to be a dashed line instead of one solid line like it is now. below is my code I am using. I have found some examples on how to do this, but they are all for straight lines, not for a freehand line.

Can anyone help me accomplish this?

Class File (DrawingArea):

package
{
import flash.display.BitmapData;
import flash.events.Event;
import flash.events.MouseEvent;
import flash.net.FileReference;
import flash.utils.ByteArray;

import mx.core.UIComponent;
import mx.events.FlexEvent;
import mx.graphics.codec.PNGEncoder;

public class DrawingArea extends UIComponent
{
    private var isDrawing:Boolean = false;
    private var x1:int;
    private var y1:int;
    private var x2:int;
    private var y2:int;

    public var drawColor:uint = 0x0000FF;

    public function DrawingArea()
    {
        super();

        addEventListener(FlexEvent.CREATION_COMPLETE, function(event:FlexEvent):void {
            graphics.clear();

            graphics.beginFill(0xffffff, 0.00001);
            graphics.drawRect(0, 0, width, height);
            graphics.endFill();
        });

        addEventListener( MouseEvent.MOUSE_DOWN, mouseDown );
        addEventListener( MouseEvent.MOUSE_MOVE, mouseMove );
        addEventListener( MouseEvent.MOUSE_UP, mouseUp);

        function mouseDown(event:MouseEvent):void {
            x1 = mouseX;
            y1 = mouseY;
            isDrawing = true;
        }
        function mouseMove(event:MouseEvent):void {
            if (!event.buttonDown)
            {
                isDrawing = false;
            }

            x2 = mouseX;
            y2 = mouseY;
            if (isDrawing)
            {
                graphics.lineStyle(1, drawColor);
                graphics.moveTo(x1, y1);
                graphics.lineTo(x2, y2);
                x1 = x2;
                y1 = y2;
            }
        }
        function mouseUp(event:MouseEvent):void {
            isDrawing = false;
        }
    }
}
}

Application MXML code:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
                         xmlns:s="library://ns.adobe.com/flex/spark" 
                         xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
<fx:Declarations>
    <!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>

<DrawingArea id="drawingArea" xmlns="*" width="100%" height="100%"/>

</s:Application>

Thanks for your help in advance!

Answer 1

public class DrawingArea extends UIComponent
{
private var isDrawing:Boolean = false;

public var drawColor:uint = 0x0000FF;

private var start:Point = new Point;
private var end:Point = new Point;

public function DrawingArea()
{
    super();
 }
    addEventListener(FlexEvent.CREATION_COMPLETE, function(event:FlexEvent):void {
        graphics.clear();


    });

    addEventListener( MouseEvent.MOUSE_DOWN, mouseDown );
    addEventListener( MouseEvent.MOUSE_MOVE, mouseMove );
    addEventListener( MouseEvent.MOUSE_UP, mouseUp);

    function mouseDown(event:MouseEvent):void {

            start = new Point(this.mouseX, this.mouseY);


    }
    function mouseMove(event:MouseEvent):void {
        grahics.clear();
        end =  new Point(this.mouseX-5, this.mouseY-5);
        graphics.lineStyle(2,0x000000,2);
        drawDashedLine(graphics,start,end,true);

    }
    function mouseUp(event:MouseEvent):void {

    }



  function drawDashedLine(g:Graphics, start:Point, end:Point, 
                dashed:Boolean = false, dashLength:Number = 6):void {
        g.moveTo(start.x, start.y);
        if (dashed) {

            var total:Number = Point.distance(start, end);

            if (total <= dashLength) {

                g.lineTo(end.x, end.y);
            } else {

                var step:Number = dashLength / total;
                var dashOn:Boolean = false;
                var p:Point;
                for (var t:Number = step; t <= 1; t += step) {
                    p = getLinearValue(t, start, end);
                    dashOn = !dashOn;
                    if (dashOn) {
                        g.lineTo(p.x, p.y);
                    } else {
                        g.moveTo(p.x, p.y);
                    }
                }

                dashOn = !dashOn;
                if (dashOn && !end.equals(p)) {
                    g.lineTo(end.x, end.y);
                }
            }
        } else {

            g.lineTo(end.x, end.y);
        }


    }

}