flex如何在图像上绘制

Question

我想实现一些简单的（我想！）但不是。我想借鉴一个形象。我已经创建一个新的组件DrawingImg，延伸S：图片

public class DrawingImg extends Image 

{ 
    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 = 0x000000; 

    public function DrawingImg() 
    { 
     super(); 

     addEventListener(FlexEvent.CREATION_COMPLETE, function(event:FlexEvent):void { 
      erase(); 
     }); 

     addEventListener(MouseEvent.MOUSE_DOWN, function(event:MouseEvent):void { 
      x1 = mouseX; 
      y1 = mouseY; 
      isDrawing = true; 
     }); 

     addEventListener(MouseEvent.MOUSE_MOVE, function(event:MouseEvent):void { 
      if (!event.buttonDown){ 
       isDrawing = false; 
      } 
      x2 = mouseX; 
      y2 = mouseY; 
      if (isDrawing){ 
       graphics.lineStyle(2, drawColor); 
       graphics.moveTo(x1, y1); 
       graphics.lineTo(x2, y2); 
       x1 = x2; 
       y1 = y2; 
      } 
     }); 

     addEventListener(MouseEvent.MOUSE_UP, function(event:MouseEvent):void { 
      isDrawing = false; 
     }); 
    } 

    public function erase():void { 
     graphics.beginFill(0xffffff, 0.00001); 
     graphics.drawRect(0, 0, width, height); 
     graphics.endFill(); 
    } 
} 
} 

这里是我的观点：

<s:View xmlns:fx="http://ns.adobe.com/mxml/2009" 
xmlns:s="library://ns.adobe.com/flex/spark" title="GiftCertificateView" 
actionBarVisible="false" xmlns:local="*"> 
<local:DrawingImg source="/assets/dessin.png" width="100%" height="100%"/> 
</s:View> 

这是“近”的工作，当我的鼠标是出图像的，我可以画出我的线，但是当我结束这个图像时，什么都没有出现？ 有没有人有想法？

Answer 1

问题是，您无法在图形API上绘制Spark Image。我最近没有看过源代码，所以我不能确切地告诉你为什么。

一个快速的解决办法是让你的DrawingImg类扩展的UIComponent代替Image：

public class DrawingImage extends UIComponent 

现在在你查看图像的上面一层绘图组件：

<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"xmlns:s="library://ns.adobe.com/flex/spark" title="GiftCertificateView" actionBarVisible="false" xmlns:local="*"> 
    <s:Image source="@Embed('Grand Prismatic Spring.jpg')" width="100%" height="100%" /> 
    <local:DrawingImg width="100%" height="100%"/> 
</s:View>