如何在 apache Royale 中使用图形 svg 元素？

Question

Flex 的粉丝，我刚刚发现了 apache Royale。我知道 FalconJS，我认为它是死亡，但不，在看到 Tour of Jewel 之后，我非常兴奋地使用它。感谢所有贡献者。 我玩了一些例子，但我不知道如何添加 svg 图形。 我在<j:view>

中尝试过这样的事情

<svg:Rect height="50" width="50" fill="#ff0000"/>

但出现错误：

Uncaught TypeError: cls is not a constructor
    at Function.org.apache.royale.utils.MXMLDataInterpreter.generateMXMLObject (MXMLDataInterpreter.js:58)

有人可以给我一个用边框和背景颜色绘制矩形或圆形的例子吗？使用的 Royale 版本是 0.9.4

这里是完整的代码：

<j:Application 
    xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:j="library://ns.apache.org/royale/jewel"
               xmlns:js="library://ns.apache.org/royale/basic" 
               xmlns:local="*" xmlns:layouts="spark.layouts.*" xmlns:svg="library://ns.apache.org/royale/svg"
               >

    <j:initialView>
        <j:View>
                <svg:Rect height="50" width="50" fill="0xff0000"/>
        </j:View>
    </j:initialView>
</j:Application>

最好的问候

Answer 1

您也可以在不使用绑定的情况下指定填充（我可能应该先回答）：

<js:Application 
    xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:js="library://ns.apache.org/royale/basic" 
    xmlns:svg="library://ns.apache.org/royale/svg">
    <js:valuesImpl>
        <js:SimpleCSSValuesImpl />
    </js:valuesImpl>
    <js:initialView>
        <js:View width="100" height="100">
            <svg:Rect height="50" width="50">
                <svg:fill>
                    <js:SolidColor color="0xff0000"/>
                </svg:fill>
            </svg:Rect>
        </js:View>
    </js:initialView>
</js:Application>

对于圆（测试工作）：

<js:View width="100" height="100" >
        <svg:Ellipse height="10" width="10" x="50" y="50">
            <svg:stroke>
                <js:SolidColorStroke color="0xff0000" weight="1"/>
            </svg:stroke>
        </svg:Ellipse>
</js:View>

但是使用 circle 不起作用（不确定是否是错误）：

<js:View width="100" height="100" >
        <svg:Circle height="10" width="10" x="50" y="50">
            <svg:stroke>
                <js:SolidColorStroke color="0xff0000" weight="1"/>
            </svg:stroke>
        </svg:Circle>
</js:View>

Answer 2

是的。您应该能够在 MXML 中使用它。命名空间应该是 library://ns.apache.org/royale/svg （就像你一样）。问题是您使用的是 int 值进行填充，而不是 IFill 引用。像这样的东西应该可以工作，但在 GraphicShape 实现中似乎有一个错误。

    <js:Application 
    xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:js="library://ns.apache.org/royale/basic" 
               xmlns:svg="library://ns.apache.org/royale/svg"
               >
    <fx:Script>
        <![CDATA[
            import org.apache.royale.graphics.SolidColor;
            import org.apache.royale.graphics.IFill;

        [Bindable]public var fill:IFill = new SolidColor(0xff0000);
    ]]>
</fx:Script>
    <js:valuesImpl>
        <js:SimpleCSSValuesImpl />
    </js:valuesImpl>
    <js:beads>
        <js:ApplicationDataBinding />
    </js:beads>
    <js:initialView>
        <js:View width="100" height="100">
                <svg:Rect height="50" width="50" fill="{fill}"/>
        </js:View>
    </js:initialView>
</js:Application>

请添加一个 Github 问题，我们将尝试修复 SVG 实现。 https://github.com/apache/royale-asjs/issues

我刚刚修复了这个问题，上面的代码现在应该可以在下一个版本的 Royale 中使用。 https://github.com/apache/royale-asjs/issues/480