Как выбрать, перетащить, изменить размер динамической строки на холсте с помощью flex

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; они просто отображаются графическим объектом.

Что вы может do использовать [spark.primitives][1] элементы для рисования. Например, реализация линии может выглядеть это (Group важно, потому что вы не можете добавлять компоненты искры рисования для обычных тх контейнеров как 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 
}