如何在 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

是的。您应该能够在 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

Answer 2

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

<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>

但是用圆圈不行（不知道是不是bug）:

<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>

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

How to use graphic svg elements with apache royale?

graphics

svg

apache-royale