给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一起使用:先使用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);
m.applyToElement( domElement );
请参阅文档以获取完整概述和用法。
原文