Question

我目前在画布上绘制了一些图像（障碍物）但我在绘制之前执行了context.rotate（）和context.translate（）（在点转换后的0,0点）。

我需要在这些障碍物后绘制的图像之间产生碰撞（图像坐标是用户控制的，例如车辆）。

在我实施旋转和平移之前，我会在适当的时间根据车辆的中点和障碍物执行碰撞。但是我不知道如何才能获得障碍物的实际“未翻译”和“未旋转”的坐标点。

注意：对于每个障碍物，我都知道我旋转和翻译的变量，问题是我执行旋转并相互翻译多次，如下所示：

// set origin to center
context.translate(canvasX, canvasY);

context.rotate(i/30);
context.translate(20,10);

if(toggle < 20) {
    size++;
    if(size > 10) {
      size = 10;
    }
    drawImageRot(image_red, 0, 0, ((image_red.height / img_max) * size), ((image_red.width / img_max) * size), 30);
    //circle('red', size);
}
// rotate + move along x
context.rotate(y / 40);
context.translate(40, 0);

if(toggle > 100 && toggle < 120) {
    size++;
    if(size > 10) {
      size = 10;
    }
    drawImageRot(image_red, 0, 0, ((image_red.height / img_max) * size), ((image_red.width / img_max) * size), 30);
    //circle('red', size);
}
context.rotate(z / 20);
context.translate(5, 5);

if(toggle > 200 && toggle < 220) {
    size++;
    if(size > 10) {
      size = 10;
    }
    drawImageRot(image_red, 0, 0, ((image_red.height / img_max) * size), ((image_red.width / img_max) * size), 30);
}

所以通过第三张图片 - 我会做4种不同的翻译和3种不同的旋转。

如何获得“障碍”的坐标点？或者无论如何我可以很容易地检查这两个图像是否重叠而不需要坐标点？

编辑：

我决定拆分我的“碰撞”检测，以便在我执行drawImageRot（）之后检查：

// set origin to center
context.translate(canvasX, canvasY);

context.rotate(i/30);
context.translate(20,10);

if(toggle < 20) {
    size++;
    if(size > 10) {
      size = 10;
    }
    drawImageRot(image_red, 0, 0, ((image_red.height / img_max) * size), ((image_red.width / img_max) * size), 30);
    // HERE I NEED TO SET my currentX and currentY points! But how?
    currentX = 0;
    currentY = 0;

    if((Math.abs(currentX - playerX) <= 20 && Math.abs(currentY - playerY) <= 20)) {
      drawCollision(currentX, currentY, size);
      isCollision = true;
    }
}

Answer 1

看起来我可能找到了答案，@ simonsarris创建了一个transform.js类来帮助翻译/旋转＆＃39; x，y＆＃39;分：

https://github.com/simonsarris/Canvas-tutorials/blob/master/transform.js

以示例： http://jsfiddle.net/b2fEX/

// LIBRARY from:
// https://github.com/simonsarris/Canvas-tutorials/blob/master/transform.js
// code below

function Transform() {
  this.reset();
}

Transform.prototype.reset = function() {
  this.m = [1,0,0,1,0,0];
};

Transform.prototype.multiply = function(matrix) {
  var m11 = this.m[0] * matrix.m[0] + this.m[2] * matrix.m[1];
  var m12 = this.m[1] * matrix.m[0] + this.m[3] * matrix.m[1];

  var m21 = this.m[0] * matrix.m[2] + this.m[2] * matrix.m[3];
  var m22 = this.m[1] * matrix.m[2] + this.m[3] * matrix.m[3];

  var dx = this.m[0] * matrix.m[4] + this.m[2] * matrix.m[5] + this.m[4];
  var dy = this.m[1] * matrix.m[4] + this.m[3] * matrix.m[5] + this.m[5];

  this.m[0] = m11;
  this.m[1] = m12;
  this.m[2] = m21;
  this.m[3] = m22;
  this.m[4] = dx;
  this.m[5] = dy;
};

Transform.prototype.invert = function() {
  var d = 1 / (this.m[0] * this.m[3] - this.m[1] * this.m[2]);
  var m0 = this.m[3] * d;
  var m1 = -this.m[1] * d;
  var m2 = -this.m[2] * d;
  var m3 = this.m[0] * d;
  var m4 = d * (this.m[2] * this.m[5] - this.m[3] * this.m[4]);
  var m5 = d * (this.m[1] * this.m[4] - this.m[0] * this.m[5]);
  this.m[0] = m0;
  this.m[1] = m1;
  this.m[2] = m2;
  this.m[3] = m3;
  this.m[4] = m4;
  this.m[5] = m5;
};

Transform.prototype.rotate = function(rad) {
  var c = Math.cos(rad);
  var s = Math.sin(rad);
  var m11 = this.m[0] * c + this.m[2] * s;
  var m12 = this.m[1] * c + this.m[3] * s;
  var m21 = this.m[0] * -s + this.m[2] * c;
  var m22 = this.m[1] * -s + this.m[3] * c;
  this.m[0] = m11;
  this.m[1] = m12;
  this.m[2] = m21;
  this.m[3] = m22;
};

Transform.prototype.translate = function(x, y) {
  this.m[4] += this.m[0] * x + this.m[2] * y;
  this.m[5] += this.m[1] * x + this.m[3] * y;
};

Transform.prototype.scale = function(sx, sy) {
  this.m[0] *= sx;
  this.m[1] *= sx;
  this.m[2] *= sy;
  this.m[3] *= sy;
};

Transform.prototype.transformPoint = function(px, py) {
  var x = px;
  var y = py;
  px = x * this.m[0] + y * this.m[2] + this.m[4];
  py = x * this.m[1] + y * this.m[3] + this.m[5];
  return [px, py];
};


// CODE:
var can = document.getElementById('canvas1');
var ctx = can.getContext('2d');

ctx.fillRect(50,50,50,50);

var t = new Transform();
ctx.translate(50,0)
ctx.rotate(1);
t.translate(50,0);
t.rotate(1);

ctx.fillRect(50,50,50,50);
var pt = t.transformPoint(50,50);
alert('top left of translated rectangle is: ' + pt);

轮换和翻译后获得协调的图像点？

编辑：

1 个答案: