Question

您好我的目标是让用户创建自己的名片。通过我的初步搜索，我做了一些基本的动作，如画线，圆和矩形。现在我的问题是如何选择绘制线来调整大小并移动

以下是代码

<fx:Script>
    <![CDATA[
        import mx.controls.Alert;
        import mx.core.UIComponent;
        import mx.events.FlexEvent;
        import mx.managers.DragManager;
        import mx.core.DragSource;
        import mx.events.DragEvent;
        import flash.events.MouseEvent; 

        public var component:UIComponent;
        public var start:Point = new Point();
        public var isDragged:Boolean = true;
        private var annotationType:String = "rectangle";

        protected function init(event:FlexEvent):void
        {
            drawCanvas.addEventListener(MouseEvent.MOUSE_DOWN, setStartPoint);
            drawCanvas.addEventListener(MouseEvent.MOUSE_MOVE, completeShape);
            drawCanvas.addEventListener(MouseEvent.MOUSE_UP, endDraw);
        }

        public function setStartPoint(event:MouseEvent):void{
            event.stopImmediatePropagation();
            component = new UIComponent()
            start = new Point(event.currentTarget.mouseX, event.currentTarget.mouseY )
            isDragged = true
        }

        public function endDraw(event:MouseEvent):void{
            component.enabled = false
            event.stopImmediatePropagation()
            isDragged = false
            component = null
        }

        public function completeShape(event:MouseEvent):void{
            event.stopImmediatePropagation();
            if(isDragged){
                component.graphics.clear()
                component.graphics.lineStyle(4,0Xffffff,.9);
                switch(annotationType){
                    case 'circle':
                        var x0Dist:int = event.localX - start.x;
                        var y0Dist:int = event.localY-start.y;
                        var x1Dist:int = start.x-event.localX;
                        var y1Dist:int=start.y-event.localY;
                        var radiusX:int=Math.sqrt((x0Dist*x0Dist)+(y0Dist*y0Dist));
                        var radiusY:int =Math.sqrt((x1Dist*x1Dist)+(y1Dist*y1Dist));
                        component.graphics.drawCircle(start.x,start.y,Math.max(radiusX,radiusY));
                        break;
                    case 'line':
                        component.graphics.moveTo(event.localX, event.localY);
                        component.graphics.lineTo(event.localX, event.localY);
                        component.graphics.lineTo(start.x,start.y);
                        break;
                    case 'rectangle':
                        var width:int = event.localX - start.x;
                        var height:int = event.localY-start.y;
                        component.graphics.drawRect(start.x,start.y,width,height);
                    break;
                }
                drawCanvas.addElement(component);
                component.graphics.endFill();
            }
        }
        protected function circleBtn_clickHandler(event:MouseEvent):void
        {
            annotationType = "circle";
        }

        protected function lineBtn_clickHandler(event:MouseEvent):void
        {
            annotationType = "line";               
        }

        protected function rectangleBtn_clickHandler(event:MouseEvent):void
        {
            annotationType = "rectangle";
        }

    ]]>
</fx:Script>

提前帮助我，谢谢

Answer 1

您无法重新选择通过graphics.draw功能制作的图纸;它们只是渲染到图形对象。

可以做的是使用[spark.primitives][1]元素进行绘制。例如，行实现可能如下所示（Group很重要，因为您无法将火花绘图组件添加到普通的mx容器，如UIComponent）：

import spark.primitives.Line;
import spark.components.Group;

...

public var component:Group;

....

case 'line':
    var line:Line = new Line();
    line.xFrom = start.x;
    line.yFrom = start.y;
    line.xTo = event.localX;
    line.yTo = event.localY;
    var stroke:Stroke = new SolidColorStroke();
    stroke.color = 0x000000;
    stroke.weight = 1;
    line.stroke = stroke;
    component.addElement(line);

    line.addEventListener(MouseEvent.CLICK, onSelectLine);
    break;

...

private function onSelectLine(e:MouseEvent):void {
    var line:Line = Line(e.currentTarget);
    //desired functionality once you have the line selected
}

如何使用flex在画布上选择，拖动，调整动态线的大小

1 个答案: