При рисовании линии курсора от руки, как сделать ее пунктирной линией? - PullRequest
Новая
       0

При рисовании линии курсора от руки, как сделать ее пунктирной линией?

0 голосов
/ 24 ноября 2011

Я использую Flex 4 и AS3, и я пытаюсь сделать так, чтобы пользователь мог нарисовать линию курсора от руки - я сделал эту часть.

Однако мне также нужна линия длябыть пунктирной линией, а не одной сплошной линией, как сейчас.ниже мой код, который я использую.Я нашел несколько примеров того, как это сделать, но все они для прямых линий, а не для линий от руки.

Может кто-нибудь помочь мне в этом?

Файл класса (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;
        }
    }
}
}

MXML-код приложения: 

<?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>

Заранее спасибо за помощь!

Ответы [ 3 ]

0 голосов
/ 24 ноября 2011
0 голосов
/ 24 ноября 2011

открытый класс DrawingArea расширяет 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);
        }


    }

}

0 голосов
/ 24 ноября 2011

У меня нет идеального решения для этого.Но математическое решение может дать аналогичный опыт.рисуя линию с точкой x1 y1 и точкой x2 y2, мы можем найти еще две точки между этими точками на одной линии.Таким образом, линия делится на три секции.мы можем применять чередующиеся цвета к каждому разделу.

Чтобы прийти к линейному уравнению с двумя точками, используйте (y - y1) / (y2 - y1) = (x - x1) / (x2 - x1).http://en.wikipedia.org/wiki/Linear_equation

Используя результирующее уравнение и подставляя в него значения, мы можем найти две точки, как я упоминал выше.

Надеюсь, это поможет.Спасибо.

...