0

我正在尝试根据它的旋转属性绘制一个对象，但是当对象移动时它似乎会感到困惑。

    ctx.save();
    ctx.translate(this.width * 0.5, this.height*0.5);
    ctx.rotate(DegToRad(45));
    ctx.translate(-this.width*0.5,-this.height*0.5);
    ctx.drawImage(this.img, this.spriteOffset, 0, this.width, this.height, this.x, this.y,this.width,this.height);
    ctx.restore();

图像被旋转 45 度绘制，但它现在向左下方向移动，此时对象应该只向下移动。通过增加 this.y 位置可以简单地处理移动代码。有没有更简单的方法来实现这一点？

4

3 回答 3

1

这是因为整个画布正在旋转。

您可以尝试研究像Kinetic JS这样的框架，它为画布创建了一种 SVG API。

该站点还包含大量有关如何使用它的信息，包括旋转、过渡、转换以及您在使用它时可能需要的几乎所有其他信息。

这应该非常适合您的需求。

我认为我也应该提供一个低级的、无框架的选项。基本上，使用原始 javascript 和 HTML 来实现这一点。

现在，正如我理解你的问题一样，你正试图让一个物体（假设一个黑色方块）向下移动并让它旋转。我能想到的在画布中旋转它而不进入路径地狱的唯一方法是旋转整个渲染上下文。但是您也可以将图像导入画布，例如透明的黑色菱形（即旋转的同一个正方形）。因此，您将使用单独的画布来渲染正方形旋转的每一步。

基本上是这样的：

var canvas2 = document.createElement('canvas'), ctx2 = canvas2.getContext('2d');
//do something with the second canvas
//let's assume the second canvas is the same size as the square
ctx.drawImage(canvas2, squareX, squareY);

看看我的尝试

正如您所看到的，它有点不稳定，但它确实确实完成了问题所要求的工作；它向下移动正方形，然后旋转它。它还在实际画布下方绘制了旋转的结果，因此您可以看到引擎盖下发生了什么，但是由于“中心”位于正方形的左上角而不是中间，正方形被切掉了。

最后，这真的取决于你想怎么做。

于 2013-03-08T02:34:22.643 回答
1

我正在使用 API，发现跟踪对象应该在哪里更容易。这是一个正方形在屏幕上沿对角线移动并旋转的示例。

<canvas id="canvas" style="width: 100%; height: 100%;">
</canvas>

<script>
  var DELAY = 15; // ms
  var RECT_WIDTH = 100; // px
  var RECT_HEIGHT = 100; // px

  var canvas = document.getElementById('canvas');

  // set intrinsic dimensions
  canvas.width = 1000;
  canvas.height = 1000;
  var ctx = canvas.getContext('2d')
  ctx.fillStyle = 'teal';

  var step = 0
  var vx = 2
  var animate = setInterval(function () {
    ctx.resetTransform()
    ctx.clearRect(0, 0, 1000, 1000);
    ctx.translate(vx * step, vx * step);

    // rotation in place, translate to center of square and back
    ctx.translate(RECT_WIDTH / 2, RECT_HEIGHT / 2);
    ctx.rotate((Math.PI / 180) * step);
    ctx.translate(-(RECT_WIDTH / 2), -(RECT_HEIGHT / 2));

    // Draw the rectangle
    ctx.fillRect(0, 0, RECT_WIDTH, RECT_HEIGHT);
    step = step + 1
  }, DELAY)

  setTimeout(function () {
    clearInterval(animate);
  }, 5000);
</script>

在这里，我使用vx并跟踪平移的步骤，并根据新的不关心先前状态的步骤计算旋转的弧度。确保你旋转过你所在的正方形的中心。

于 2018-09-06T19:01:30.507 回答
0

在应用旋转之前，使用 ctx.translate 设置对象的位置。这应该可以解决问题。

ctx.save();
ctx.translate(this.x, this.y);

ctx.translate(this.width * 0.5, this.height*0.5);
ctx.rotate(DegToRad(45));
ctx.translate(-this.width*0.5,-this.height*0.5);

ctx.drawImage(this.img, this.spriteOffset, 0, this.width, this.height, 0, 0,this.width,this.height);
ctx.restore();
于 2013-03-08T05:29:56.867 回答