如何在不使用`context.rotate`的情况下旋转七巧板游戏中的形状

Question

在画布600 * 600中 trangle的三个点是（100,100），（300,100），（200,200） 旋转中心是（200,100）

我想要实现拖曳旋转的角色。但我不知道如何改变这些点的坐标。

ps：我知道如何计算旋转角度 var rotateRadian = Math.atan2（mouseY - center.y，mouseX - center.x） - Math.atan2（startDragPosition.y - center.y，startDragPosition.x - center.x）;

[以下评论中的其他信息]

我想建一个七巧板，有矩形，三角形和平行四边形。

Answer 1

你有个好的开始！

首先计算鼠标到中心点的角度：

// calc mouse angle
var dx=mouseX-centerX;
var dy=mouseY-centerY;
radianAngle=Math.atan2(dy,dx);

由于您有等边三角形，因此您的三角形是正多边形。使用三角法计算多边形的3个旋转点：

// vertex#1
var x1=cx+radius*Math.cos(rotationAngle);
var y1=cy+radius*Math.sin(rotationAngle);

// vertex#2
rotationAngle+=PI2/3;
var x2=cx+radius*Math.cos(rotationAngle);
var y2=cy+radius*Math.sin(rotationAngle);

// vertex#3
rotationAngle+=PI2/3;
var x3=cx+radius*Math.cos(rotationAngle);
var y3=cy+radius*Math.sin(rotationAngle);

然后只是听一下mousemove事件并相应地重绘三角形：

＆＃13;

＆＃13;

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;
var $canvas=$("#canvas");
var canvasOffset=$canvas.offset();
var offsetX=canvasOffset.left;
var offsetY=canvasOffset.top;
var scrollX=$canvas.scrollLeft();
var scrollY=$canvas.scrollTop();
ctx.fillStyle='red';
ctx.strokeStyle='blue';
ctx.lineWidth=2;

var isDown=false;
var startX;
var startY;

var PI2=Math.PI*2;
var cx=150;
var cy=150;
var sideLength=50;
var originalAngle=0;
var radius=sideLength*Math.sqrt(3)/3;

draw(200,200);

$("#canvas").mousemove(function(e){handleMouseMove(e);});


function draw(mx,my){

  //
  var dx=mx-cx;
  var dy=my-cy;
  var currentAngle=Math.atan2(dy,dx);
  var rotationAngle=currentAngle-originalAngle;
  // vertex#1
  var x1=cx+radius*Math.cos(rotationAngle);
  var y1=cy+radius*Math.sin(rotationAngle);
  // vertex#2
  rotationAngle+=PI2/3;
  var x2=cx+radius*Math.cos(rotationAngle);
  var y2=cy+radius*Math.sin(rotationAngle);
  // vertex#3
  rotationAngle+=PI2/3;
  var x3=cx+radius*Math.cos(rotationAngle);
  var y3=cy+radius*Math.sin(rotationAngle);

  ctx.clearRect(0,0,cw,ch);
  ctx.beginPath();
  ctx.moveTo(x1,y1);
  ctx.lineTo(x2,y2);
  ctx.lineTo(x3,y3);
  ctx.closePath();
  ctx.stroke();

  ctx.beginPath();
  ctx.arc(x1,y1,3,0,PI2);
  ctx.closePath();
  ctx.fill();

}


function handleMouseMove(e){
  // tell the browser we're handling this event
  e.preventDefault();
  e.stopPropagation();

  mx=parseInt(e.clientX-offsetX);
  my=parseInt(e.clientY-offsetY);

  draw(mx,my);

}

＆＃13;

body{ background-color: ivory; }
#canvas{border:1px solid red;}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h4>The triangle will rotate according to the mouse</h4>
<canvas id="canvas" width=300 height=300></canvas>

＆＃13;

＆＃13;

＆＃13;

[根据提问者评论添加]

数学是相似的，但更复杂，因为七巧板形状不规则。

对于您需要的每个形状：

找到形状的质心，它是它的旋转中心

cx=average of all x vertices. 
cy=average of all y vertices.

找到形状的3或4个径向长度

// for each radius
radial length=Math.sqrt(Math.pow(vx-cx,2)+Math.pow(vy-cy,2))

找到形状的3或4个径向角

// for each radius
radial angle=Math.atan2(Math.pow(vy-cy,2),Math.pow(vx-cx,2))

现在在我的答案中使用相同的三角法来旋转质心周围的顶点