Как использовать преобразование svg.js с параметром матрицы в машинописи? - PullRequest
Новая
       9

Как использовать преобразование svg.js с параметром матрицы в машинописи?

0 голосов
/ 25 ноября 2018

Когда я использую svg.js lib с javascript, я могу преобразовать данный элемент через SVG.Matrix, например, так: 

import * as SVG from 'svg.js';

let draw = SVG('drawing').size(200, 200);
let rect = draw.rect(100, 100).attr({ fill: '#f06' });
rect.translate(100,100);
let matrix = new SVG.Matrix(rect);
let rect2 = draw.rect(100, 100).attr({ fill: '#f60' });
rect2.transform(matrix);

В примере 2-й прямоугольник преобразуется как первый прямоугольник через SVG.Matrix: 

<svg id="SvgjsSvg1001" width="200" height="200" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs"><defs id="SvgjsDefs1002"></defs><rect id="SvgjsRect1008" width="100" height="100" fill="#ff0066" transform="matrix(1,0,0,1,100,100)"></rect><rect id="SvgjsRect1009" width="100" height="100" fill="#ff6600" transform="matrix(1,0,0,1,100,100)"></rect></svg>

Однако тот же код в утверждениях машинописи: 

[ts]
Argument of type 'Matrix' is not assignable to parameter of type 'Transform'.
  Types of property 'skewX' are incompatible.
    Type '(x: number, cx?: number, cy?: number) => Matrix' is not assignable to type 'number'.

Как преобразовать элемент через SVG.Matrix в машинописи?Почему svgjs.Element.transform ведет себя иначе, когда используется с TS?

1 Ответ

0 голосов
/ 25 ноября 2018

svg.js.d.ts говорит, что Element.transform имеет эту подпись : 

interface Element {
    transform(t: Transform, relative?: boolean): Element;
    transform(): Transform;
    ...
}

Итак, это должно работать: 

const transform = rect.transform();
let rect2 = draw.rect(100, 100).attr({ fill: '#f60' });
rect2.transform(transform);

По сути, оба Transform и Matrix объекты имеют свойства / b / c / d / e / f, поэтому в Javascript один может использоваться вместо другого, но в Typescript они не имеют прототипного отношения, и компилятор жалуется.

На самом деле это ошибка в наборе текста.Глядя на исходный код, преобразование осуществляется путем вызова new Matrix(t), поэтому подпись .transform() должна выглядеть следующим образом: 

transform(t: MatrixAlias, relative?: boolean): Element;
...