Question

我在画布上画了一个多边形，画面里面有一个图像。

在触摸开始和结束时，我将该多边形切成两个多边形并旋转它们并将它们彼此推开。与Fruit Ninja相似的功能。

我的问题是将图像绘制到新的多边形，所以让它看起来像是将图像切成两半并且它现在正在旋转。

有没有人有任何建议。我不一定需要代码，我只需要了解它是如何完成的，这样我就可以对其进行编程。

谢谢你。

Answer 1

无限设计是可能的，但例如......

使用translate设置多边形外的旋转点。
rotate以正角度绘制并绘制poly的左半部分。
重置转换。
使用translate设置多边形外的旋转点。
rotate为负角度并绘制poly的右半部分。
重置转换。

演示：

＆＃13;

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;

var cx=50;
var cy=20;
var r=20;
var angle=0;
ctx.fillStyle='salmon';
ctx.strokeStyle='forestgreen';
ctx.lineWidth=3;
requestAnimationFrame(animate);

function draw(angle){
  ctx.clearRect(0,0,cw,ch);

  // left side
  ctx.translate(cx,cy+40);
  ctx.rotate(angle);
  ctx.beginPath();
  ctx.arc(cx,cy,r,Math.PI/2,Math.PI*3/2);
  ctx.fill();
  ctx.stroke();
  ctx.setTransform(1,0,0,1,0,0);

  // right side
  ctx.translate(cx,cy+40);
  ctx.rotate(-angle);
  ctx.beginPath();
  ctx.arc(cx,cy,r,Math.PI*3/2,Math.PI/2);
  ctx.fill();
  ctx.stroke();
  ctx.setTransform(1,0,0,1,0,0);
}

function animate(){
  draw(angle);
  angle+=Math.PI/720;
  if(angle<Math.PI/4){ requestAnimationFrame(animate); }
}

＆＃13;

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

＆＃13;

<canvas id="canvas" width=200 height=200></canvas>

＆＃13;

JS |将剪裁了图像的多边形切成两个多边形

1 个答案: