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）。 / p>

任何指向正确方向的东西都会非常感激！

更新

我花了更多时间查看函数，而pathSegList的'finality'不应该阻止它被改变（它不是const），只是被替换了。

但是，如果你尝试调用它们，那么像“add”这样的各种函数会显式地用异常来实现，而一些函数（比如append）是本机实现的。

根据调试器：

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

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

我开始认为svg支持根本就不是“已完成”，并且有点想要移植到画布和/或WebGL。

Answer 1

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

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());

在dart中创建路径：svg

1 个答案: