Dart创建和转换SVG路径 [英] Dart create and transform an SVG path

问题描述

我最近在Dart开始编程（www.dartlang.org）。
现在我尝试显示一个SVG路径并缩放路径以适应20px * 20px的div;

I recently started programming in Dart (www.dartlang.org). Now I try to display an SVG path and scale the path to fit in a div of 20px * 20px;

我有一个路径，创建一个转换矩阵，但是如何将矩阵应用到路径？

I do have a path, and I did create a transformation matrix, but how does one apply the matrix to the path?

我的代码到目前为止：

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

- EDIT -

我已阅读Carlo的回复，现在已阅读部分MDN。 SVG规格比我预想的要复杂得多。

I've now read parts of the MDN after reading Carlo's reply. The SVG specs are much more complicated than I was anticipating. I got one step further though.

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

I now try to apply the transformation matrix to the svg like so:

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

但这不会像我预期的那样应用转换。

but this does not apply the transformation as I would expect.

打印语句打印
a：Transform实例
，因此我怀疑我仍然必须应用此转换

The print statement prints a: instance of 'Transform' , so I suspect I still have to apply this transformation somehow?

如何应用转换？
我找不到任何示例，Dart API参考没有给我足够的细节来计算。

How would I apply the transformation? I could not find any examples and the Dart API reference does not give me enough details to figure it out.

亲爱的，
Hendrik Jan

Kind regards, Hendrik Jan

推荐答案

即使这是一种不同的语言，类也实现了规范（如果仔细观察，可以看到许多Dart文档页面的第一段来自MDN）。因此，要应用矩阵，您必须创建一个 SVGTransform 表示该转换的实例。要获得它，请查看 转换 属性：这是一个动画值，因此您需要获取其 baseVal ，这是一个转换列表（当前为空）。现在，在此对象上，您必须调用 createSvgTransformFromMatrix

Even if it's a different language, the classes implement the interfaces defined by the specification (if you watch closely you can see that the first paragraph of many Dart documentation pages is taken from MDN). So, to apply the matrix you have to create a SVGTransform instance representing that transformation. To get it, look at the transform property: it's an animated value, so you'll need to get its baseVal which is a list of transformations (currently empty). Now on this object you have to call the createSvgTransformFromMatrix method and append the object returned to the transformation list.

在代码中应该是这样：

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

因为Dart实现 TransformList 列表，我想您也可以使用 add 方法。请查看 initialize 。

Since Dart implementation of TransformList is also a List, I think you could also use its add method. Give a look at initialize too.

这篇关于Dart创建和转换SVG路径的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！