kineticjs - 在 KineticJS 中使用变换矩阵

Question

我有一个用 Box2Dweb 模拟的 body 和一个附着在 body 上的图像。我想采用 body 变换矩阵并将变换应用于图像(用变换绘制图像)，使其在屏幕上的位置和方向(相对)与 body 的位置和方向相匹配。我在 KineticJS 中找不到用于转换矩阵的函数。移动和旋转有单独的功能，还有Kinetic.Transform里面有一些“矩阵”的类，但我不知道如何处理它。还有一个_setTransform函数某处，但同样，不知道如何使用它(下划线是否表明我不能直接调用它或什么？)。

我使用此代码在纯 Javascript 中在 body 上绘制图像:

function drawImageOverBody(context, body, image, scale)
{
    context.save();
    var pos = body.GetPosition();
    var center = [scale*pos.x, scale*pos.y];
    var R = body.GetTransform().R;
    context.translate(center[0], center[1]);
    context.transform(R.col1.x, R.col1.y, R.col2.x, R.col2.y, 0, 0);
    context.translate(-center[0], -center[1]);
    context.drawImage(image, center[0] - image.width/2.0, center[1] - image.height/2.0);
    context.restore();
}

我如何用 KineticJS 做同样的事情？

编辑:显然，我可以从 Box2d 获得的唯一转换是平移和旋转，我可以通过调用 GetPosition() 获得。和 GetAngle()在 Box2d 主体上，然后使用 setX(), setY() 应用于 KineticJS 图像和 setRotation() .所以我在这里真的不需要矩阵形式的转换。还是好奇。

Answer 1

Kinetic.Transform类可用于计算给定变换矩阵的旋转、缩放和偏移。设置 m Kinetic.Transform 的属性到变换矩阵，然后使用变换对象计算旋转、缩放和平移。然后可以将旋转、缩放和平移应用于任何 Kinetic.Node
平移由矩阵中的最后两项直接给出。

如果您从其他地方获得转换，则可以将其应用于 Kinetic.Transform像这样:

var tf = new Kinetic.Transform();tf.m = [Math.sqrt(2), Math.sqrt(2), -3/2*Math.sqrt(2), 3/2*Math.sqrt(2), 4, 5];

Translation is the easiest. it is given by the last two elements:4 in X direction, 5 in Y direction. There is also a method to get it.

var translation = tf.getTranslation();

You can get the scale from the transformation matrix:

var m = tf.getMatrix(); // or tf.m
var scaleX = Math.sqrt(m[0]*m[0] + m[1]*m[1]);
var scaleY = Math.sqrt(m[2]*m[2] + m[3]*m[3]);

不要忘记图像可以在 X 轴或 Y 轴或两者上翻转。计算行列式以将其考虑在内:

if(m[0]*m[3] - m[1]*m[2] < 0){
    scaleY = -scaleY;
}

调整刻度的符号以更轻松地获得旋转:

if(m[0] < 0){
    scaleX = -scaleX;
    scaleY = -scaleY;
}

现在是最后一个，轮换。你可以通过使用 Math.asin 来获得它或 Math.acos ，但必须考虑旋转角的象限。这是解决它的一种方法:

var angle = Math.acos(m[3] / scaleY);
if(m[2]/scaleY > 0){
    angle = -angle;
}

请注意，应用不同转换的顺序很重要。如果您使用上述方法，首先应用平移，然后旋转，然后缩放。