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

Question

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

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

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

那么如果 gOriginal 是一个椭圆我现在得到半个椭圆？

谢谢

你

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，绘制方法的要求是该类实现 IBitmapDrawable，因此无论最轻的实现是什么，都可能是您想要使用的，UIComponent 是一个猜测。

Answer 2

您可以将其绘制（）到位图对象中并选择要包含的矩形，这可以具有相同的效果，但没有简单的方法可以做到这一点。

您还可以查看 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 变量将开始在圆周上的不同点绘制楔形。如果将度更改为 360，您将看到一个完整的圆，如果更改为 180，您将看到半圆。更改 radiusX 和 radiusY 以创建椭圆形。此外，segments 控制绘图的分辨率。提高它，你会得到更平滑的曲线。

希望这有帮助。