Question

我正在使用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>

提前感谢您的帮助！

Answer 1

我没有完美的解决方案。但是数学解决方案可以提供类似的体验。当绘制具有x1 y1点和x2 y2点的线时，我们可以在同一行中的这些点之间找到另外两个点。这样，该线分为三个部分。我们可以为每个部分应用交替的颜色。

使用两个点（y-y1）/（y2-y1）=（x-x1）/（x2-x1）得到线方程。 http://en.wikipedia.org/wiki/Linear_equation

使用结果方程并将值替换为它，我们可以找到上面提到的两点。

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

Answer 2

这是你的解决方案：

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

Answer 3

公共类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);
        }


    }

}

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

3 个答案: