Question

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

我使用此代码在纯Javascript中的实体上绘制图像：

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获得的唯一转换是平移和旋转，我可以通过调用Box2d主体上的GetPosition()和GetAngle()来获得，然后使用{应用于KineticJS图像{1}}和setX(), setY()。所以我真的不需要这里的矩阵形式的转换。仍然，好奇。

Answer 1

Kinetic.Transform类可用于计算给定变换矩阵的旋转，缩放和偏移。将m的{{1}}属性设置为变换矩阵，然后使用变换对象计算旋转，缩放和平移。然后可以将轮换，缩放和翻译应用于任何Kinetic.Transform

翻译由矩阵中的最后两项直接给出。

如果您从其他地方获得转化，则可以将其应用于Kinetic.Node，如下所示：

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];

翻译是最简单的。它由最后两个元素给出： X方向4，Y方向5。还有一种获取它的方法。

var translation = tf.getTranslation();

您可以从转换矩阵中获取比例：

Kinetic.Transform

不要忘记图像可以在X轴或Y轴上翻转，或两者都翻转。计算要考虑的因素：

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]);

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

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

现在最后一个，轮换。您可以使用if(m[0] < 0){ scaleX = -scaleX; scaleY = -scaleY; }或Math.asin来获取该值，但必须考虑旋转角度的象限。这是解决它的一种方法：

Math.acos

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

在KineticJS中使用变换矩阵

1 个答案: