Actionscript 3 - 导入SVG文件

Question

Actionscript 3 - 导入SVG文件

7

有人知道有哪些库或工具可以实现将SVG文件动态导入ActionScript吗？我需要将SVG文件导入Flash并将其转换为MovieClip或更好地是一个平面3D对象。最终目标是在增强现实中实现矢量文件。

- teynon

1

这是一个纯AS3项目还是Flex项目？如果是后者，我知道你可以很简单地使用图像控件来加载SVG内容，就像这里解释的那样：http://raghuonflex.wordpress.com/2009/06/10/loading-svg-content-in-flex-apps/ 你还可以在几乎每个对象上获得三个2.5D旋转属性，就像这里所述：http://www.flepstudio.org/forum/flash-cs4-tutorials/3550-rotationx-rotationy.html - shaunhusain

@shaunhusain 目前这是一个ActionScript 3项目，但如果需要的话，我可以使用Flex。不过我对Flex并不是很了解。(同时我目前无法承担另一个IDE的费用。我有Adobe Flash CS6，所以如果能够使用它，我可以查看一些关于Flex的教程。) - teynon

我认为，在创建新项目时，你应该有选择将其设为Flex项目的选项，它会为你包含SWC文件。在Flex中，我对SVG的使用效果不太一致，似乎FXG更好，因为它直接转换为Flash中的“原始”绘图方法。我似乎找不到CS6，但这里有5.5支持的格式列表：http://helpx.adobe.com/flash/kb/supported-file-formats-flash-professional.html - shaunhusain

2个回答

-4

你好，

非常简单：

在Illustrator中打开“name.svg”文件。
将其另存为“name.ai”。
将其导入到Flash舞台中，就这样。

- ناصر عبده عبده محمد

1

这是“在飞行中”。换句话说，通过代码 - 而不是使用编辑器。 - teynon

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- SKuijers · Accepted Answer

这里可以下载一个很好的库：http://code.google.com/p/as3svgrendererlib/，它易于实现且可靠。请注意，有两种实现代码的方法。我更喜欢以下方法，因为它可以给您更多的控制权：

     private function loadSVG(url:String):void {
        ProcessExecutor.instance.initialize(stage);
        ProcessExecutor.instance.percentFrameProcessingTime = 0.9;

        loader = new URLLoader();
        loader.dataFormat = URLLoaderDataFormat.TEXT;
        loader.addEventListener(Event.COMPLETE, svgLoaded, false, 0, true);

        try {
            loader.load(new URLRequest(url));
        } catch (error:Error) {
            trace(error);
        }
    }   
    private function svgLoaded(e:Event):void {
        var svgString:String = loader.data as String;
        var svgDocument:SVGDocument = new SVGDocument();
        svgDocument.parse(svgString);

        this.addChild(svgDocument);
    }

另一种方法更短，当您只需要加载一个小的SVG或仅有几个时，可能是可行的方法。

public function loadSVG(url:String) {
        ProcessExecutor.instance.initialize(stage);
        ProcessExecutor.instance.percentFrameProcessingTime = 0.9;

        var svgDocument:SVGDocument = new SVGDocument();
        svgDocument.load(url);
        addChild(svgDocument);
    }

两个重要的提示： 1. 我似乎无法捕获SVG的宽度或高度，而且在加载SVG后，父级Sprite的宽度和高度为0。我通过在将SVG加载到AS3之前使所有SVG具有相同的大小来解决这个问题。之后，我使用ScaleX和scaleY来调整加载的SVG的大小。 2. 在使用此代码之前必须存在舞台。添加以下代码将确保您不会遇到问题：yourDisplayClass.addEventListener(Event.ADDED_TO_STAGE, loadYourSVGs);

现在，如何将其转换为平面3D对象取决于您的3D库。我已经使用Away3D工作过，其中您可以在Sprite3D上使用bitmapmaterial。 Sprite3D类将是要使用的对象。希望您的3D库支持使用MovieClips，以便您可以将它们添加到您的3D对象中。否则，您将不得不像我在以下示例中所做的那样从电影剪辑中提取bitmapMaterial：

public function movieClipToBitmapMaterial(mc:MovieClip):BitmapMaterial {
        var bmData:BitmapData = new BitmapData(mc.width, mc.height, true, 0xFFFFFF);
        bmData.draw(displayObject);
        return new BitmapMaterial(bmData);
    }

在上述函数中，您输入的将是您加载SVG的MovieClip。

我不确定这一点，但我认为使用此函数将失去随意缩放而不失质量的能力。

希望我的回答有所帮助！祝你好运。

附注：不要忘记将链接中的SWC添加到您的项目中，并查看提供的示例。还请注意shaunhusain在您原始问题上的出色评论。您可能不必使用3D库。