Question

我最近开始在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：'变换'的实例 ，所以我怀疑我还是要以某种方式应用这种转变？

- 结束编辑 -

现在我迷路了。

我将如何应用转型？我找不到任何示例，Dart API参考文献没有给我足够的细节来解决它。

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

Answer 1

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

在代码中应该是这样的：

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

由于TransformList的Dart实施也是List，我认为您也可以使用其add方法。也请看initialize。

Dart创建并转换SVG路径

1 个答案: