如何在打字稿中使用 svg.js 的矩阵参数转换?
How to use svg.js's transform with matrix parameter in typescript?
当我将 svg.js 库与 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);
在示例中,第二个矩形通过 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.dev/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 一起使用时表现不同?
svg.js.d.ts
告诉 Element.transform
有这个 signature:
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
对象都具有 a/b/c/d/e/f 属性,因此在 Javascript 中可以使用一个来代替另一个,但在 Typescript 中,它们没有原型关系,编译器会抱怨。
实际上是打字错误。查看源码,转换是由calling new Matrix(t)
实现的,所以对.transform()
的签名应该是:
transform(t: MatrixAlias, relative?: boolean): Element;
当我将 svg.js 库与 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);
在示例中,第二个矩形通过 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.dev/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 一起使用时表现不同?
svg.js.d.ts
告诉 Element.transform
有这个 signature:
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
对象都具有 a/b/c/d/e/f 属性,因此在 Javascript 中可以使用一个来代替另一个,但在 Typescript 中,它们没有原型关系,编译器会抱怨。
实际上是打字错误。查看源码,转换是由calling new Matrix(t)
实现的,所以对.transform()
的签名应该是:
transform(t: MatrixAlias, relative?: boolean): Element;