在dart中创建路径:svg

Question

我刚开始使用Dart,我一直试图移植一些与svg一起使用的javascript代码,创建一个包含一些段的路径,但我很难理解它的API是如何工作的.

以下代码将无法运行,但它可能说明了我想要做的事情:

Element i = query("#divsvg");
svg.SvgSvgElement s = new svg.SvgSvgElement();
i.append(s);

svg.PathElement p = new svg.PathElement();
p.pathSegList.add(
      p.createSvgPathSegArcAbs(200, 200, 50, 50, 180, false, false)
   );

s.children.add(p);

但是,据我从文档中了解:

• createSvgPathSegArcAbs创建一个非父级路径段
• pathSegList是final,因此在构造之后无法添加它
• PathElement构造函数似乎不接受任何参数

我是否遗漏了有关Dart如何工作的内容,或svg库文档中的内容？我花了几个小时看文档,谷歌搜索,看看测试,但我没有发现任何似乎涵盖这一点(测试似乎使用HTML代码而不是API创建东西).

任何指向我正确方向的东西都将非常感激!

更新

我花了更多的时间来查看函数,而pathSegList的'finality'不应该阻止它被改变(它不是const),只是被替换了.

但是,如果您尝试调用它们,则会使用异常显式实现"add"等各种函数,而本机实现一些函数(如append).

根据调试器:

p.pathSegList.append(
    p.createSvgPathSegArcAbs(200, 200, 50, 50, 180, false, false)
);

将附加一个路径段,但这不会出现在'innerHTML'属性中,也不会出现在最终页面HTML中......

我开始认为svg支持根本就不是"完成"了,并且我很想尝试移植到画布和/或WebGL.

Answer 1

我能够创建一个路径元素并使用PathSegList的appendItem方法向其添加路径段：

var div = query('#container');
var svgElement = new svg.SvgSvgElement();
div.append(svgElement);
path = new svg.PathElement();
svgElement.append(path);

segList = path.pathSegList;

segList.appendItem(path.createSvgPathSegMovetoAbs(50, 50));
segList.appendItem(path.createSvgPathSegArcAbs(200, 200, 50, 50, 180, false, false));
segList.appendItem(path.createSvgPathSegClosePath());