我有一个用 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 图像。所以我在这里并不需要矩阵形式的转换。不过,很好奇。setX(), setY()
setRotation()