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

Question

假设您有一个带有填充和描边的通用 Graphics 对象。有没有一种简单的方法可以对该对象进行切片，例如垂直切片，并获得一个表示其子集的 Graphics 对象？

换句话说，下面的函数切片会是什么样子？

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

所以如果 gOriginal 是一个椭圆，我现在得到半个椭圆？

谢谢

f

Answer 1

我基本上是在标记丹尼尔的概念（除了我对 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对于显示，这可能比 Jeremy 的内存更多，但处理器密集度更低。另外我正在使用 UIComponent 对 draw 方法的要求是该类实现 IBitmapDrawable 所以无论是最轻量级的实现可能是您想要使用的，UIComponent 是一个猜测。

Answer 2

你可以将它draw()到一个位图对象中并选择一个矩形来包含它可能有相同的效果，但是没有简单的方法来做到这一点。

您也可以查看degrafa，但这可能会变得过于复杂

Answer 3

没有用于删除Graphics 对象部分的内置方法。关于“切片”，您很可能需要唯一地处理每种类型的形状（矩形、椭圆、多边形）。例如，要对椭圆进行切片，类似于从饼图中取出切片，您需要使用小三角来绘制形状以创建楔形。

这是绘制楔形的基本函数：

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();
}

在初始化时调整 angleX 和 angleY 变量将开始在圆周上的不同点绘制楔形。如果您将degrees 更改为 360，您将看到一个完整的圆，而在 180 您将看到一个半圆。更改 radiusX 和 radiusY 以创建一个椭圆形。此外，segments 控制绘图的分辨率。把它往上推，你会得到更平滑的曲线。

希望这会有所帮助。