transformation-matrix

适用于JavaScript的2D仿射矩阵电动工具

给2D仿射变换矩阵用户的重要消息: 这是2D仿射变换矩阵的最后一次更新。我对正在使用它的人表示歉意,但由于个人原因,我不能再花费(浪费)时间开发它(或任何其他“开源”)。

部分原因是因为我不能假装没有发生[文化]战争,不仅仅是为了我们的思想。我再也无法通过使用他们的服务和产品来支持那些拥抱并携手努力试图建立所谓的“一个世界政府”(他们的话;或者“玫瑰色包装中的共产主义地狱v5.0”)的公司和组织和乌托邦式的“幸福”。(我的话)通过“政治正确性”对每个人实施政策和议程,分而治之,审查制度,贴标签,骚扰,欺骗,保密,说谎,欺骗,虐待甚至暴力-通过诸如主流媒体,社交技术平台,“教育”或其他。
因此,尽管在这种情况下很小,但它也抗议这一长期持续的议程及其“有用的白痴”(此处用作历史表达),特别是在这种情况下,是针对硅谷技术公司等。我鼓励任何拥有两个以上大脑细胞的人花点时间思考一下,检查历史,研究,教育自己,关闭马戏团的声音并开始做自己的思考。

尽管这些团体喜欢假装自己的事业很受欢迎;事实并非如此-他们是少数,拥有大量的号角,金钱和被误导的追随者。如果您知道发生了什么,我鼓励您也说出来或采取某种形式的[非暴力]行动(尽管我们仍然可以…)。

二维仿射变换矩阵
JavaScript的仿射转换矩阵(3x3)类,可以执行各种转换,例如旋转,缩放,平移,倾斜,剪切,加,减,乘,除,逆,分解,动画,与SVG / DOM矩阵相互转换,从三角形等创建矩阵(包括完整的HTML文档)。

它主要用于需要跟踪或创建转换,并希望永久/手动将其应用于自己的点和多边形,或者需要跨浏览器兼容性的情况。
矩阵可以选择同步画布2D上下文或DOM元素,以使画布上的转换与像素完美匹配,从而实现Matrix对象的局部转换。
对于支持DOMMatrix和/或SVGMatrix的浏览器,可以将其用作补充框架,以增加灵活性,例如直接处理转换点,执行加法转换,插值动画等。

首先针对大多数客户端,但也可以直接在node.js环境中使用。

没有依赖关系。

现在还包括仅包含基本要素的“轻量”版本。

安装
下载zip并将其解压缩到文件夹。

git 通过 HTTPS:

$ git clone https://gitlab.com/epistemex/transformation-matrix-js.git

git通过SSH:

$ git clone [email protected]:epistemex/transformation-matrix-js.git

使用NPM

$ npm install transformation-matrix-js

用法

浏览器

只需包含脚本并创建一个新实例即可:

var matrix = new Matrix([context] [,domElement]);

您可以提供一个可选的canvas 2D上下文和/或DOM元素作为参数,这些参数将与应用于矩阵对象的转换同步。

Node

与Node一起使用:先使用npm安装软件包(请参见上文),然后再安装

var Matrix = require("transformation-matrix-js").Matrix;
var m = new Matrix();

快速概述

建设者
var m = new Matrix( [context] [,element] );

可以选择同步canvas 2D上下文和/或DOM元素。

静态方法(构造函数的替代方法):
Matrix.from( a, b, c, d, e, f );        // create a matrix from various sources
Matrix.from( DOMMatrix | SVGMatrix | CSSMatrix);
Matrix.fromTriangles( t1, t2 );           // returns matrix needed to produce t2 from t1
Matrix.fromSVGTransformList( tList );    // create new matrix from a SVG transform list
方法:
applyToArray(points)
applyToContext(context)
applyToElement(element [, use3D])    // auto-detects browser prefix if any
applyToObject(obj)
applyToPoint(x, y)
applyToTypedArray(points [, use64])
clone(noContext)
concat(cm)
decompose([useLU])                   // breaks down the transform into individual components
determinant()
divide(m)
divideScalar(d)
flipX()
flipY()
interpolate(m2, t [, context [, dom]])
interpolateAnim(m2, t [, context [, dom]]) // decomposed interpolation (prevents flipping)
inverse([cloneContext][, cloneElement])    // get inverse matrix
isEqual(m)
isIdentity()
isInvertible()
isValid()
multiply(m)
reflectVector(x, y)
reset()
rotate(angle)
rotateDeg(angle)
rotateFromVector(x, y)
scale(sx, sy)
scaleFromVector(x, y)               // uniform scale based on input vector (hypotenuse)
scaleU(f)                            // uniform scale
scaleX(sx)
scaleY(sy)
setTransform(a, b, c, d, e, f)
shear(sx, sy)
shearX(sx)
shearY(sy)
skew(ax, ay)
skewDeg(ax, ay)
skewX(ax)
skewY(ay)
toArray()
toCSS()
toCSS3D()
toCSV()
toJSON()
toString()
toDOMMatrix()                       // creates a DOMMatrix from current transforms
toSVGMatrix()                        // creates a SVGMatrix from current transforms
toTypedArray([use64])
transform(a2, b2, c2, d2, e2, f2)
translate(tx, ty)
translateX(tx)
translateY(ty)
特性:
a                                    // scale x
b                                    // shear y
c                                    // shear x
d                                    // scale y
e                                    // translate x
f                                    // translate y

例子

适用于一点:
tPoint = m.applyToPoint( x, y );
应用于具有点对象或点对值的数组:
tPoints = m.applyToArray( [{x: x1, y: y1}, {x: x2, y: y2}, ...] );
tPoints = m.applyToArray( [x1, y1, x2, y2, ...] );
tPoints = m.applyToTypedArray(...);
或应用于画布上下文(在构造函数中可选地引用除外):
m.applyToContext( myContext );
获取逆变换矩阵(您需要应用该矩阵才能从矩阵包含的内容返回到恒等矩阵):
invMatrix = m.inverse();

要么

var invMatrix;

if (m.isInvertible()) {             // check if we can inverse
    invMatrix = m.inverse();
}
您可以在当前矩阵和新矩阵之间进行插值。该函数返回一个新矩阵:
im = m.interpolate( m2, t );           // t = [0.0, 1.0]
im = m.interpolateAnim( m2, t );

前者进行天真插值,可以很好地处理平移和缩放。当涉及旋转以避免利用分解的“翻转”时,后者更合适。

检查是否应用了任何转换:
state = m.isIdentity();                // true if identity
检查两个矩阵是否相同:
state = m.isEqual( matrix2 );          // true if equal
将矩阵重置为一个单位矩阵:
m.reset();
方法是可链接的:
// rotate, then translate
m.rotateDeg(45).translate(100, 200);
要同步DOM元素,可以在构造函数中指定DOM元素,也可以手动同步(自动检测浏览器前缀):
m.applyToElement( domElement );

请参阅文档以获取完整概述和用法。
原文

贡献者
肯·尼尔森(创建人)(https://gitlab.com/epistemex)
莱昂·索罗金(Leon Sorokin)(https://github.com/leeoniya)
亨利·鲁斯(Henry Ruhs)(https://github.com/redaxmedia)
Matthieu Dumas(https://github.com/solendil)
Viktor Hesselbom(https://github.com/hesselbom)
拉里·戈登(Larry Gordon)(https://github.com/psyrendust)

你可能感兴趣的:(transformation-matrix)