React.js & Node.js open source developer
📦 NPM
Javascript isomorphic 2D affine transformations written in ES6 syntax. Manipulate transformation matrices with this totally tested library!
Home Page: https://www.npmjs.com/package/transformation-matrix
License: MIT License
declare module 'transformation-matrix/fromDefinition' and declare module 'transformation-matrix/fromTransformAttribute' are missing.
import
{ Point, Matrix } from 'transformation-matrix'`
and
export function fromDefinition(...definitionOrArrayOfDefinition: Matrix[]): Matix[];
Matix should be Matrix
The return type of fromTransformAttribute()
is incorrectly specified as Matrix[]
when it should be MatrixDescriptor[]
. This causes errors when using the function in TypeScript.
Lines that need changing include:
does exist:
node_modules/transformation-matrix/build-commonjs/fromTriangles.js
require('transformation-matrix/build-commonjs/fromTriangles').fromTriangles
does not exist:
require('transformation-matrix').fromTriangles
Hey;
This lib is nice;
Is there any way to get original coordinator?The follow is demo code:
const coordinate = { x: 1, y: 1 };
const compensationAngle = 90;
const compensationOffset = { x: 1, y: 1 };
const matrixParams = [];
matrixParams.push(translate(compensationOffset.x, compensationOffset.y));
matrixParams.push(rotateDEG(compensationAngle));
let matrix = compose(...matrixParams);
matrix = smoothMatrix(matrix)
const { x, y } = applyToPoint(matrix, coordinate);
console.log(x, y);
the final result is: (0, 2).
And then I want to get the original coordinator coordinate = { x: 1, y: 1 } by result & matrix
This could be a strange question, but it is indeed a problem encountered in the development. Thx
Chrome sometimes return transform matrix in an exponential notation, e.g. -6.6763e-06 in this case.
Is this not supported?
Can we parse matrices with normal regular expressions? Now using PEG, the performance is relatively poor
I tried to import this function. Does not exist.
Have checked sources after. Have not found.
Compose function does not exist in library.
Even search on the whole project have gave just result in REAME.md file.
So this took me couple hours to debug. When parsing transform attribute and using toSVG
on it, it's not uncommon to get values in exponent notation. Upon parsing these values again, exponent part is ignored and we get a very different matrix.
You should either update the parser or if that's not viable, you could check for exponent and apply some rounding.
I don't think dropping decimals that far down would affect results in any way.
Installing the transformation-matrix library in an Angular 4 project, the rotate method seems to be missing the extra parameters, cx & cy
The method is defined as..
rotate(angle, [cx], [cy]) ⇒ Object
Calculate a rotation matrix
and the transformation-matrix.d.ts file contains...
declare module 'transformation-matrix/rotate' {
I would be grateful if you could help me understand the maths with regards to applying a scale and keeping the element centred.
I want to apply a scale and also keep the element centred, if I only apply a scale at elements a
and d
of the affine matrix then I get this effect.
What I want is this effect with the element remaining centred.
I've been looking at the code in react-svg-pan and I don't quite understand how they achieve this.
The first thing they do is call this function:
export const getSVGPoint = (value: Matrix, viewerX: number, viewerY: number) => {
const matrix = fromObject(value);
const inverseMatrix = inverse(matrix);
return applyToPoint(inverseMatrix, { x: viewerX, y: viewerY });
};
// const svgPoint = getSVGPoint(matrix, width / 2, height / 2);
Why is the inverse of the matrix found? How does this help find the elements point from the midpoint of the element?
The code then uses the x
and y
coordinates of the point to create a new matrix from this code:
const matrix = transform(
fromObject(current),
translate(SVGPointX, SVGPointY),
scale(scaleFactor, scaleFactor),
translate(-SVGPointX, -SVGPointY)
);
The only bit above I understand is the scale part. I don't understand what the fromObject
and the 2 translate
calls do.
I would be grateful for an explanation.
There is a 100x200 rectangle in a 1000 x 1000 canvas. What are the points after a 40 degree rotation?
try
const matrix = compose(
fromString('matrix(1,0,0,1,0,0)'),
translate(base.cc.x, base.cc.y),
rotateDEG(el.base.rotate),
scale(0, 0),
translate(-base.cc.x, -base.cc.y),
);
Originally posted by lsps9150414 May 23, 2022
I'm working on gesture handling where users can scale, drag, and rotate a shape with 2 fingers.
The gesture system can let me know (a) where the initial touchpoints are and (b) where the current touchpoints are.
I need to apply a transform style to the shape being manipulated to reflect the manipulation.
Is it possible for this lib to output the translate, scale, and rotate parameters (i.e. the decomposed transform matrix) by giving it 2 sets of points, the init touch points { (x1, y1), (x2, y2) }
and the final touch points { (x1', y1'), (x2', y2') }
?
I would be nice if one could do:
const matrixDescription = fromTransformAttribute(
'rotateX(45deg) rotateY(0deg) rotateZ(45deg)'
);
or is this already possible in another way?
We are having issues with Webpack packaging a library that depends on transformation-matrix
(swimlane/ngx-graph#67).
Webpack seems to ignore the Matrix
type as it is not exported in https://github.com/chrvadala/transformation-matrix/blob/master/transformation-matrix.d.ts whereas it is used by functions that are themselves exported. We end up with type definitions that reference Matrix
without it being declared anywhere.
Can you export that type as well as Point
? (I am not using Point
but I guess it has the same problem)
Thanks for the library, by the way!
Hey!
This is probably not library-related issue, but I supposed there was a way to handle it in the library.
Check out the output of the following code.
It is expected that it would be { x: 0, y: 10 }.
const {rotate, applyToPoint} = require('transformation-matrix')
const matrix = rotate(Math.PI/2);
const result = applyToPoint(matrix, {x: 10, y: 0});
// { x: 6.123233995736766e-16, y: 10 }
Is there a hint allowing getting correct 90 degrees rotation value for coordinates having 0 value?
Thank you!
Hi,
I have just upgraded to the latest version and the type definition for Point
has changed to a union which is not helpful.
type Point = { x: number; y: number } | [number, number];
For every union that is created, I have to use type narrowing to determine what it is if the inference cannot work it out.
It was perfect before:
type Point = { x: number; y: number }
I would have a new type for the tuple.
Would you be open to a PR that reverted this?
What do you think about supporting shorthand notations like scale(.5)
in addition to scale(.5, .5)
? Would you mind a PR or would you like to keep this lib unrelated to web stuff?
fromString('matrix(0.707 0.409 -0.707 0.409 0 0)') not support 'matrix(0.707 0.409 -0.707 0.409 0 0)' is not a matrix
Error: Cannot find package '.../node_modules/transformation-matrix/package.json' imported from '...'
The package.json "main" points to a missing build folder.
Love the library btw <3
The implementations of transform()
and compose
currently accept either multiple Matrix
parameters or a single Matrix[]
parameter. Unfortunately, the current type definitions do not cover the case of a single Matrix[]
parameter. This requires TypeScript code to be written as transform(...fromDefinition(arrayOfDefinitions))
when in fact, the ...
should be uneccessary.
I propose adding the following overloads without ...
:
export function transform(matrices: Matrix[]): Matrix;
export function compose(matrices: Matrix[]): Matrix;
These would appear adjacent to the following lines:
And the documentation can be improved by changing the parameter description as follows:
* @param matrices {...Matrix | Matrix[]} Matrices listed as separate parameters or in an array
transformation-matrix/src/transform.js
Line 39 in 06321d4
example: translate(349.196px, 200px) rotate(0deg)
I will provide a PR for this function soon if you don't mind. @chrvadala maybe you can add me as a collaborator so I can create one :)
When I'am trying to use fromString
method with negative element in any position I am getting an error Error: 'matrix(0,1,0,1,0,-1)' is not a matrix
.
You may see an example here
The current type definitions specify that applyToPoint()
requires a Point
and applyToPoints()
requires a Point[]
. This is more restrictive than the actual implementations, which also allow [number, number]
and [number, number][]
, respectively.
One way to fix this is to include a union of types in the function signatures, similar to what was done for fromTriangles()
here:
Perhaps a better way would be to change the definition of Point
to include object and array forms, if the intention is to support both forms everywhere. I'm suggesting something like this:
type Point = { x: number; y: number } | [number, number];
The change would go here:
If this change is made, the function signature for fromTriangles()
can be simplified.
I'm a little rusty on matrix math but I think this is the right library. I'm trying to do coordinate conversions from one system to another. This is for a project where I'm drawing on Canvas and using some json Objects for points.
For Canvas; the origin is at the top left.
For the json Objects data; the origin is at the bottom left.
I was thinking I needed to simply flip the Y axis to convert from the json Objects to draw it on Canvas. However, I get the following error:
import { translate, applyToPoint, flipY } from 'transformation-matrix';
^^^^^
SyntaxError: Named export 'flipY' not found. The requested module 'transformation-matrix' is a CommonJS module, which may not support all module.exports as named exports.
My need is as follows:
let jsonPointOrigin = {x: 0, y: 0};
let canvasPointBottomLeft = applyToPoint(matrix, jsonPointOrigin);
let jsonPointMax = {x: 407, y: 407};
let canvasPointTopRight = applyToPoint(matrix, jsonPointMax );
Output:
{x: 0, y: 407}
{x: 407, y: 0}
Hi! Thanks for the lib! I have one question that is not clear from the docs: what is the difference between compose and transform?
TypeScript
does not like this:
export function fromDefinition(...definitionOrArrayOfDefinition: MatrixDescriptor | MatrixDescriptor[]): Matrix[];
It borks with
TS2370: A rest parameter must be of an array type
Perhaps use method overloading?
export function fromDefinition(definition: MatrixDescriptor): Matrix[];
export function fromDefinition(...arrayOfDefinition: MatrixDescriptor[]): Matrix[];
or just remove the ...
rest parameter syntax?
I had to roll back to 2.0.4
in order for this pkg to compile in my build pipe line.
I’m very glad to use this amazing package for my project.
though, im having some trouble applying this package for my specific use - getting the rotation angle from the affine matrix array data.
Is there any existing function for extracting the rotation angle from givven affine transform matrix?
I'm unable to import the flipX & flipY methods in my typescript project.
Would be great to have them available :)
Request support for matrix3d.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.