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>