如何在阿帕奇皇家中使用图形 svg 元素?

Question

Flex的粉丝，我只是发现了apache Royale。我知道猎鹰，我以为是死亡，但是没有，在看到宝石之旅之后，我非常想使用它。感谢所有贡献者。 我玩了一点示例，但我不知道如何添加 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)

有人可以给我一个示例 绘制矩形 ou 带有边框和背景颜色的圆？使用的皇家版本是 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