Dart создать и преобразовать путь SVG

Question

Я недавно начал программировать в Dart (www.dartlang.org). Теперь я пытаюсь отобразить путь SVG и масштабировать путь, чтобы поместиться в деление 20px * 20px;

У меня есть путь, и я создал матрицу преобразования, но как применить матрицу к пути?

Мой код до сих пор:

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

--РЕДАКТИРОВАТЬ--

Теперь я прочитал части MDN после прочтения ответа Карло. Спецификации SVG намного сложнее, чем я ожидал. Я получил еще один шаг вперед, хотя.

Теперь я пытаюсь применить матрицу преобразования к svg следующим образом:

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

но это не относится к преобразованию, как я ожидал.

Оператор print печатает : экземпляр "Преобразования", так что я подозреваю, что мне все равно нужно как-то применить это преобразование?

--END EDIT--

И теперь я потерян.

Как бы я применил преобразование? Я не смог найти никаких примеров, и ссылка на Dart API не дает мне достаточно деталей, чтобы понять это.

С уважением, Хендрик Ян

Answer 1

Даже если это другой язык, классы реализуют интерфейсы, определенные в спецификации (если вы внимательно посмотрите, вы увидите, что первый абзац многих страниц документации по Dart взят из MDN). Итак, чтобы применить матрицу, вы должны создать SVGTransform экземпляр, представляющий это преобразование. Чтобы получить это, посмотрите на transform свойство: это анимированное значение, поэтому вам нужно получить его baseValкоторый представляет собой список преобразований (в настоящее время пустой). Теперь на этом объекте вы должны вызвать createSvgTransformFromMatrix метод и добавить объект, возвращенный в список преобразования.

В коде должно быть что-то вроде этого:

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

С Дарт реализации TransformList также List Я думаю, вы могли бы также использовать его add метод. Посмотри на initialize тоже.