1

我最近开始使用 Dart (www.dartlang.org) 进行编程。现在我尝试显示一个 SVG 路径并缩放路径以适合 20px * 20px 的 div；

我确实有一条路径，并且我确实创建了一个转换矩阵，但是如何将矩阵应用于路径？

到目前为止我的代码：

    // create an svg element
    SvgSvgElement svg = new SvgSvgElement();
    // create a path
    PathElement path = new PathElement();
    // draw something
    path.setAttribute('d', myPath);
    // add the path to the svg
    svg.append(path);
    // add the svg to a table cell allready in the DOM
    myDiv.append(svg);

    // start scaling
    // get bounding box
    Rect bb = path.getBBox();
    num xx = bb.width ==0 ? 1 : 20/bb.width;
    num yy = bb.height==0 ? 1 : 20/bb.height;
    num mm = min(xx, yy);

    // create svg transformation matrix to scale the image
    // |  x-prev  |   |a c e||  x-new  |   | ax-new + cy-new + e |
    // |  y-prev  | = |b d f||  y-new  | = | bx-new + dy-new + f |
    // |  z-prev  |   |0 0 1||    1    |   |         1           |
    Matrix matrix = svg.createSvgMatrix();
    matrix.a = mm; // xx
    matrix.b = 0;
    matrix.c = 0;
    matrix.d = mm; // yy
    matrix.e = -(bb.x * mm); // dx
    matrix.f = -(bb.y * mm); // dy

    // do something here to apply the transformation....

- 编辑 -

在阅读了 Carlo 的回复后，我现在已经阅读了 MDN 的部分内容。SVG 规范比我预期的要复杂得多。不过我又进了一步。

我现在尝试将转换矩阵应用于 svg，如下所示：

    var a = svg.createSvgTransformFromMatrix(matrix);
    print('a: ' + a.toString());

但这并不像我期望的那样应用转换。

print 语句打印 a: instance of 'Transform' ，所以我怀疑我仍然必须以某种方式应用此转换？

--结束编辑--

现在我迷路了。

我将如何应用转换？我找不到任何示例，并且 Dart API 参考没有给我足够的细节来弄清楚。

亲切的问候，亨德里克·扬

4

1 回答 1

1

即使是不同的语言，这些类也实现了规范定义的接口（如果仔细观察，您会发现许多 Dart 文档页面的第一段取自 MDN）。因此，要应用矩阵，您必须创建一个SVGTransform表示该转换的实例。要获取它，请查看transform属性：它是一个动画值，因此您需要获取它baseVal，它是一个转换列表（当前为空）。现在在这个对象上，您必须调用该createSvgTransformFromMatrix方法并将返回的对象附加到转换列表中。

在代码中应该是这样的：

TransformList pathTransformList = path.transform.baseVal;
pathTransformList.appendItem(pathTransformList.createSvgTransformFromMatrix(matrix));

由于 Dart 的实现TransformList也是 a List，我认为你也可以使用它的add方法。也来看看initialize。

于 2013-12-28T18:07:48.777 回答