如何在鼠标移动事件后围绕其中心旋转 Canvas 对象?

How to rotate a Canvas object around its center following mouse move event?(如何在鼠标移动事件后围绕其中心旋转 Canvas 对象?)

问题描述

您好，当我移动鼠标时，我想围绕它的中心旋转这个形状，但目前它正在围绕 (0, 0) 旋转.如何更改我的代码?

Hi I want to rotate this shape around its center when I move my mouse, but currently it's rotating around (0, 0). How to change my code?

源代码(另见jsfiddle):

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

class Circle {
    constructor(options) {
    this.cx = options.x;
    this.cy = options.y;
    this.radius = options.radius;
    this.color = options.color;
    this.angle = 0;
    this.toAngle = this.angle;

    this.binding();
  }

  binding() {
    const self = this;
    window.addEventListener('mousemove', (e) => {
        self.update(e.clientX, e.clientY);
    });
  }

  update(nx, ny) {
    this.toAngle = Math.atan2(ny - this.cy, nx - this.cx);
  }

  render() {
    ctx.clearRect(0,0,canvas.width,canvas.height);

    ctx.save();

    ctx.beginPath();

    ctx.lineWidth = 1;

    if (this.toAngle !== this.angle) {
      ctx.rotate(this.toAngle - this.angle);
    }

    ctx.strokeStyle = this.color;
    ctx.arc(this.cx, this.cy, this.radius, 0, Math.PI * 2);

    ctx.stroke();
    ctx.closePath();

    ctx.beginPath();

    ctx.fillStyle = 'black';
    ctx.fillRect(this.cx - this.radius / 4, this.cy - this.radius / 4, 20, 20);

    ctx.closePath();
    ctx.restore();
  }
}

var rotatingCircle = new Circle({
  x: 150,
  y: 100,
  radius: 40,
  color: 'black'
});

function animate() {
    rotatingCircle.render();
    requestAnimationFrame(animate);
}

animate();

推荐答案

你需要:

• 首先平移到旋转点(枢轴)
• 然后旋转
• 然后:
  • A:在 (0,0) 处绘制，使用 (-width/2, -height/2) 作为相对坐标(用于居中绘图)
  • B:向后平移并使用对象的绝对位置并减去相对坐标进行居中绘图

  修改后的代码:

  ctx.beginPath();
  ctx.lineWidth = 1;
  
  ctx.translate(this.cx, this.cy);               // translate to pivot
  
  if (this.toAngle !== this.angle) {
    ctx.rotate(this.toAngle - this.angle);
  }
  
  ctx.strokeStyle = this.color;
  ctx.arc(0, 0, this.radius, 0, Math.PI * 2);    // render at pivot
  
  ctx.closePath();                               // must come before stroke() btw.
  ctx.stroke();
  
  ctx.beginPath();
  ctx.fillStyle = 'black';
  ctx.fillRect(-this.radius / 4, -this.radius / 4, 20, 20);  // render at pivot
  

  改良小提琴

  额外提示:您当前正在使用 save()/restore() 调用来维护转换矩阵.另一种方法是使用最初替换 save()/restore() 的绝对值来设置矩阵 - 所以而不是第一个 translate():

  Bonus tip: you're currently using save()/restore() calls to maintain the transformation matrix. Another way could be to set the matrix using absolute values initially replacing the save()/restore() - so instead of the first translate():

  ctx.setTranform(1,0,0,1,this.cx, this.cy);    // translate to pivot
  

  您还可以为每个设置单独设置样式等内容.无论如何，它不会改变核心解决方案.

  You can also set things like styles on an individual basis for each. Regardless, it doesn't change the core solution though.

  这篇关于如何在鼠标移动事件后围绕其中心旋转 Canvas 对象?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！