Question

这不仅仅是寻找代码，而是一个逻辑问题，尽管可能需要它。

所以我要创建一个绘图应用程序，首先要做的是使用lineTo方法绘制一条线 - 这一切都很好。但是我知道这不是我想要的，它确实画得很好等等但是我想要一个不会画出一条线的工具＆＃34;。我想要一个工具，当您放开点击时不会放下线，但是当您点击时它会向下放置。

现在我并不知道如何创造这个;谁能解释一个人会如何编码这样的东西？这有点像lineTo的替代品 - 抱歉，如果这听起来很混乱，很难说出来。

Answer 1

以下是两个例子：

Pen Drawing (SWF Example)

这会将线条绘制为曲线以匹配输入设备，并在绘制线条时保持线条：

代码：

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)

虽然针对箭头进行了调整，但线条的概念是相同的。当输入设备关闭时，线路/箭头会暂停，但在输入设备启动之前不会保留。一旦绘制，该线仍然存在。

代码：

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();
        }

    }
}

AS3 lineTo方法的替代方案

1 个答案: