2011-02-24 58 views
1

假設您有一個具有填充和筆畫的通用Graphics對象。是否有一種簡單的方法來對該對象進行切片,例如垂直切片,然後獲取代表它的一個子集的Graphics對象?關於flex中的圖形有點奇怪的問題

換句話說,下面的功能片會是什麼樣子?

var gOriginal:Graphics; 
var gNew:Graphics; 
gNew = slice(gOriginal, "vertical", "0.5); 

這樣,如果gOriginal是一個橢圓,我現在得到一半的橢圓?

謝謝

˚F

+0

謝謝大家的回答。我會盡快嘗試並投票。 – 2011-02-25 21:46:19

回答

3

我標註到丹尼爾的概念基本上(除了我有些根深蒂固,原因不明,爲degrafa不屑),你應該能夠做到這一點:

<?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" 
       creationComplete="application1_creationCompleteHandler(event)"> 
    <s:layout> 
     <s:VerticalLayout/> 
    </s:layout> 
    <fx:Script> 
     <![CDATA[ 
      import mx.core.UIComponent; 
      import mx.events.FlexEvent; 

      import spark.components.Group; 

      public var someGraphics:UIComponent; 
      [Bindable] 
      public var bd:BitmapData; 
      [Bindable] 
      public var finalBD:BitmapData; 
      override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void 
      { 
       super.updateDisplayList(unscaledWidth,unscaledHeight); 
       if(someGraphics) 
       { 
        someGraphics.graphics.beginFill(0xFF0000); 
        someGraphics.graphics.drawEllipse(0,0,100,20); 
        someGraphics.graphics.endFill(); 

        bd.draw(someGraphics); 
        finalBD.copyPixels(bd,new Rectangle(0,0,bd.width*.5,bd.height),new Point()); 
       } 
      } 

      protected function application1_creationCompleteHandler(event:FlexEvent):void 
      { 
       someGraphics = new UIComponent(); 
       bd = new BitmapData(100,100); 
       finalBD = new BitmapData(100,100); 
       invalidateDisplayList(); 
      } 

     ]]> 
    </fx:Script> 
    <fx:Declarations> 
     <!-- Place non-visual elements (e.g., services, value objects) here --> 
    </fx:Declarations> 
    <s:BitmapImage source="{bd}" width="100" height="100"/> 
    <s:BitmapImage source="{finalBD}" width="100" height="100"/> 
</s:Application> 

這顯然不能從一個漂亮的解決方案但只是將圖形轉換爲具有圖形屬性的某個對象,然後使用BitmapData繪製方法將像素轉換爲位圖數據,然後將這些像素的一部分複製到另一個BitmapData中進行顯示,這可能是更多的內存,但處理器更少比傑里米強。另外我使用的是UIComponent,對draw方法的要求是類實現了IBitmapDrawable,所以無論是最輕量級的實現可能是你想要使用的,UIComponent是一個猜測。

+0

太棒了。可能不漂亮,但這正是我所期待的。你是超級巨星! – 2011-03-01 05:08:02

1

你可以畫()成一個位圖對象,然後選擇一個矩形,包括可能有同樣的效果,但這樣做的沒有簡單的方法。

你也可以看看degrafa但可能變得太複雜

+0

謝謝丹尼爾 - 看起來像你種下了偉大的種子... – 2011-03-01 05:09:45

1

沒有內置的方法去除Graphics對象的部分。關於「切片」,您很可能需要獨特地處理每種形狀(矩形,橢圓,多邊形)。例如,要切分elipse,類似於從餅圖中取出一個切片,您需要使用一個小的三角形來繪製這些形狀以創建一個楔形。

下面是用於繪製楔基本功能:

protected function drawWedge():void 
{ 
    var g:Graphics = shape.graphics;  
    g.clear(); 
    g.lineStyle(1, 0xFFFFFF); 
    g.beginFill(0xCCCCCC); 

    var radiusX:Number = 100; 
    var radiusY:Number = 100; 
    var angle:Number = 0; 
    var xpos:Number = 0; 
    var ypos:Number = 0; 
    var segments:Number = 25; 
    var degrees:Number = 45; 
    var inc:Number = degrees/(segments); 

     for(var i:int = 0; i <= segments; i++) 
     { 
      xpos = Math.cos(Math.PI * angle/180) * radiusX; 
      ypos = Math.sin(Math.PI * angle/180) * radiusY; 

      g.lineTo(xpos, ypos); 

      angle += inc; 
     } 

     g.endFill(); 
} 

調整angleXangleY當它們被初始化將開始在沿圓周不同的點繪製楔瓦爾。如果您將degrees更改爲360,您將看到一個完整的圓圈,在180度處將會看到一個半圓。更改radiusXradiusY以創建一個橢圓。另外,segments控制圖形的分辨率。撞上它,你會得到一個更平滑的曲線。

希望這會有所幫助。

+0

傑里米,謝謝你的建議。這實際上是我所做的,但我認爲解決方案shaunhusain描述完美的技巧。 – 2011-03-01 05:09:01