关于flex中的图形有点奇怪的问题

时间:2011-02-24 19:09:18

标签: flex actionscript-3 graphics flex3 flex4

假设你有一个带有填充和笔划的通用Graphics对象。是否有一种简单的方法来切割该对象,例如垂直切割,并获得表示其子集的Graphics对象?

换句话说,下面的功能片看起来像什么?

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

所以如果gOriginal是椭圆形,我现在得到半个椭圆?

谢谢

˚F

3 个答案:

答案 0 :(得分: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都是猜测。

答案 1 :(得分:1)

你可以将它绘制成一个位图对象并选择一个可以具有相同效果的矩形,但是没有简单的方法可以做到这一点。

您也可以查看degrafa,但这可能会变得太复杂

答案 2 :(得分:1)

没有用于删除Graphics对象部分的内置方法。对于“切片”它,您很可能需要唯一地处理每种类型的形状(rect,ellipse,poly)。例如,为了切割椭圆,类似于从饼图中取出切片,您需要使用一个小的三角形绘制形状以创建一个楔形。

这是绘制楔形的基本功能:

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控制绘图的分辨率。把它搞砸,你会得到一条更平滑的曲线。

希望这有帮助。