AS3 lineTo method alternative - actionscript-3

Question

This is more of a logical question than just looking for code, although it might be needed.
So i'm creating a drawing application and the first thing to do is use the lineTo method to draw a line -- that's all fine. But I learned this is not what I want, it does draw fine etc. but I want a tool that wouldn't "draw a line". I want a tool that doesn't lay the line down as you let go of click, but it lays down right when you click.
Now I don't really have a clue how to create this; can someone explain how one would code such a thing? This would sort of be an alternative to lineTo -- sorry if this sounds confusing, it's hard to word.

Answer 1

Here are two examples:
Drawing application that draws like a pen
Drawing application that draws lines / arrows
Pen Drawing (SWF Example)
This draws lines as curve to match the input device, persisting the line as it's drawn:
Code:
package
{
import flash.display.Graphics;
import flash.display.Sprite;
import flash.display.StageAlign;
import flash.display.StageScaleMode;
import flash.events.MouseEvent;
import flash.geom.Point;
[SWF(percentWidth = 100, percentHeight = 100, backgroundColor = 0xefefef, frameRate = 30)]
public class DrawingExample extends Sprite
{
//------------------------------
// model
//------------------------------
protected var lastPoint:Point;
//------------------------------
// lifecycle
//------------------------------
public function DrawingExample()
{
super();
stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT;
beginDrawing();
}
protected function beginDrawing():void
{
stage.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
}
protected function mouseDownHandler(event:MouseEvent):void
{
stage.removeEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
// mark mouse down location
lastPoint = new Point(mouseX, mouseY);
// listen for movement or up/out
stage.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler);
stage.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
stage.addEventListener(MouseEvent.MOUSE_OUT, mouseUpHandler);
}
protected function mouseMoveHandler(event:MouseEvent):void
{
var g:Graphics = graphics;
g.lineStyle(1, 0x0000ff);
// draw line segment
g.moveTo(lastPoint.x, lastPoint.y);
g.lineTo(mouseX, mouseY);
// mark end of line segment
lastPoint = new Point(mouseX, mouseY);
}
protected function mouseUpHandler(event:MouseEvent):void
{
stage.removeEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler);
stage.removeEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
stage.removeEventListener(MouseEvent.MOUSE_OUT, mouseUpHandler);
beginDrawing();
}
}
}
Line Drawing (SWF Example)
Although tuned for arrow heads, the concept is the same for lines. When the input device is down, a line / arrow is staged but not persisted until the input device is up. Once drawn, the line persists.
Code:
package
{
import flash.display.CapsStyle;
import flash.display.Graphics;
import flash.display.JointStyle;
import flash.display.LineScaleMode;
import flash.display.Sprite;
import flash.display.StageAlign;
import flash.display.StageScaleMode;
import flash.events.Event;
import flash.events.MouseEvent;
import flash.geom.Point;
[SWF(percentWidth = 100, percentHeight = 100, backgroundColor = 0xefefef, frameRate = 30)]
public class Arrows extends Sprite
{
public var arrows:Vector.<Sprite> = new Vector.<Sprite>();
public var canvas:Sprite;
public var lineColor:uint = Math.random() * 0xffffff;
public var lineWeight:Number = 5;
private var startPoint:Point;
public function Arrows()
{
super();
addEventListener(Event.ADDED_TO_STAGE, addedToStageHandler);
}
protected function addedToStageHandler(event:Event):void
{
stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT;
addCanvas();
}
protected function addCanvas():void
{
canvas = new Sprite();
addChild(canvas);
lineColor = Math.random() * 0xffffff;
// give alpha for interaction
var g:Graphics = canvas.graphics;
g.beginFill(0x0, 0.0);
g.drawRect(0, 0, stage.stageWidth, stage.stageHeight);
g.endFill();
// listen for mouse down
canvas.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
}
protected function mouseDownHandler(event:MouseEvent):void
{
canvas.removeEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
// mark start point
startPoint = new Point(event.localX, event.localY);
// start rendering
canvas.addEventListener(Event.ENTER_FRAME, enterFrameHandler);
// listen for mouse up / out to end arrow
canvas.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
canvas.addEventListener(MouseEvent.MOUSE_OUT, mouseUpHandler);
}
protected function enterFrameHandler(event:Event):void
{
var angle:Number = polarAngle(new Point(mouseX, mouseY), new Point(startPoint.x, startPoint.y));
// draw line
var g:Graphics = canvas.graphics;
g.clear();
// give alpha for interaction
g.beginFill(0x0, 0.0);
g.drawRect(0, 0, stage.stageWidth, stage.stageHeight);
g.endFill();
g.lineStyle(lineWeight, lineColor, 1, true, LineScaleMode.NORMAL, CapsStyle.SQUARE, JointStyle.MITER);
g.moveTo(startPoint.x, startPoint.y);
g.lineTo(mouseX, mouseY);
// draw arrow head
g.moveTo(mouseX - (20 * Math.cos((angle - 45) * Math.PI / 180)),
mouseY - (20 * Math.sin((angle - 45) * Math.PI / 180)));
g.lineTo(mouseX + (5 * Math.cos((angle) * Math.PI / 180)),
mouseY + (5 * Math.sin((angle) * Math.PI / 180)));
g.lineTo(mouseX - (20 * Math.cos((angle + 45) * Math.PI / 180)),
mouseY - (20 * Math.sin((angle + 45) * Math.PI / 180)));
}
protected function polarAngle(point:Point, center:Point=null):Number
{
if (!center)
center = new Point(0, 0);
return Math.atan2(point.y - center.y, point.x - center.x) * 180 / Math.PI;
}
protected function mouseUpHandler(event:MouseEvent):void
{
canvas.removeEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
canvas.removeEventListener(MouseEvent.MOUSE_OUT, mouseUpHandler);
// stop rendering
canvas.removeEventListener(Event.ENTER_FRAME, enterFrameHandler);
// push canvas to arrows collection
arrows.push(canvas);
// add a fresh canvas
addCanvas();
}
}
}