在画布上旋转移动对象

问题描述 投票:0回答:3

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

    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位置简单地处理移动代码。有没有更简单的方法来实现这一目标?

javascript html5 canvas
3个回答
1
投票

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

您可以尝试的是查看像Kinetic JS这样的框架,它为画布创建了一种SVG API。

This site有很多关于如何使用它的信息,包括rotation,转换,转换,以及使用它时可能需要的其他任何东西。

这应该很适合您的需求。


我想我也应该提供一个低级别,无框架的选项。基本上,使用原始的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);

See my attempt

正如你所看到的,它有点不稳定,但它确实基本上解决了问题;它将方块向下移动并旋转。它还会在实际画布下方绘制旋转结果,以便您可以看到引擎盖下发生了什么,但由于“中心”位于正方形的左上方而不是中间,因此正方形会被切掉。

最后,它实际上取决于你想要怎么做。


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并跟踪要翻译的步骤,并根据一个新的不关心前一个状态的步骤来计算旋转将以弧度为单位。确保你在正方形的中心旋转。


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(); 
© www.soinside.com 2019 - 2024. All rights reserved.