Блог

Я пытаюсь создать флэш-приложение, которое позволит пользователю рисовать стрелки на экране / холсте с помощью мыши. Таким образом, если они нажмут и удержат левую кнопку мыши в координатах 23,12 и отпустят левую кнопку в 84,45, между 2 точками будет нарисована линия со стрелкой во второй координате.

Мне также нужно, чтобы каждую отдельную стрелку можно было выбирать, чтобы их можно было перемещать или удалять (я знаю, как это сделать!).

Если бы кто-нибудь мог мне помочь и указать правильное направление (например, пример или учебное пособие), я был бы очень признателен!

Поскольку это ваш первый вопрос:

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

    }
}
 

Вы говорите, что знаете, как их перемещать, поэтому я оставляю это на ваше усмотрение.