使用光标绘制手绘线条时，如何使其成为虚线？

Question

我正在使用Flex 4和AS3，我试图让用户可以用光标绘制一个手绘线 - 我已经完成了这部分。

但是，我也需要该行是一条虚线，而不是像现在这样一条实线。下面是我使用的代码。我已经找到了一些关于如何做到这一点的例子，但是它们都是直线，而不是徒手画线。

任何人都可以帮我完成这件事吗？

类文件（绘图区）：

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> 

感谢您的帮助提前！

Answer 1

公共类绘图区扩展UIComponent的 { 私人VAR isDrawing：布尔=假;

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


    } 

}

Answer 2

我对此没有完美的解决方案。但是数学解决方案可以提供类似的体验。当用x1 y1点和x2 y2点绘制一条线时，我们可以在同一条线上的这些点之间找到两个点。这种方式线路被分成三部分。我们可以对每个部分应用交替的颜色。用（y - y1）/（y2 - y1）=（x - x1）/（x2 - x1）得到具有两点的直线方程。 http://en.wikipedia.org/wiki/Linear_equation

使用结果等式并将值代入它，我们可以找到上面提到的两点。

希望这会有所帮助。谢谢。

Answer 3

这里是您的解决方案：

http://blog.alegitimatebusiness.com/2007/11/07/as2-as3-draw-a-dotted-rounded-corner-box/