如何使用键盘旋转画布框? [英] How to rotate a canvas box using keyboard?

问题描述

我一直在想是否有一种方法可以使用键盘在不使用动画的情况下打开画布框.

I've been wondering if there is a way to turn a canvas box using the keyboard without using animations.

我想按 E 键顺时针旋转我的盒子，而 Q 键应逆时针旋转它.如我之前所说，请使用不使用动画.

I would like to press the key E to turn my box clockwise, and key Q should turn it counter-clockwise. As I said before, using no animations.

如果您想确切地了解我在做什么，应该在哪里进行操作，请点击以下链接 http://cssdeck.com/labs/collab/stexplorer

If you would like to see exactly what I'm working on, and the context where it should be done, here is a link http://cssdeck.com/labs/collab/stexplorer

以防万一，我也将代码发布在这里！

and just in case, I'll post my code here too!

如果您使用此代码，请注意我希望它能够同时转动.

If you use this code, notice that I want it to be able to turn and move forward at the same time.

$(function() {
  var n = 3;
  var xD = 0;
  var yD = 0;
  var btn = undefined;
  var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");

  window.addEventListener('resize', resizeCanvas, false);

  function resizeCanvas() {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    render(); 
  }

  var ss = {
    "x": 0,
    "y": 0,
    "width": 100,
    "height": 75
  };

  function render() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
	ctx.beginPath();
	ctx.rect(ss.x, ss.y, ss.width, ss.height);
	ctx.lineWidth = 1;
	ctx.strokeStyle = "white";
	ctx.stroke();
  }

  function move() {
	x = ss.x + (xD * n);
	y = ss.y + (yD * n);
    ss.x = x;
    ss.y = y;
    render();
  }

  $(document).keydown(function(e) {
    if(btn !== undefined){ 
      return;
    }

    // shoot (space):32
    // left
	xD = e.which == 37 ? -1 : xD;
    xD = e.which == 65 ? -1 : xD;
    // up
	yD = e.which == 38 ? -1 : yD;
    yD = e.which == 87 ? -1 : yD;
    // right
	xD = e.which == 39 ? 1 : xD;
    xD = e.which == 68 ? 1 : xD;
    // down
	yD = e.which == 40 ? 1 : yD;
	yD = e.which == 83 ? 1 : yD;
    // clockwise e:69
    // counter-clockwise q: 81
    // zoom-out f:70
    // zoom-in r:82

    btn = e.which;
    e.preventDefault();
  });

  $(document).keyup(function(e) {
    if(e.which === btn){
      btn = undefined;
    }

    // shoot (space):32
    // left
	xD = e.which == 37 ? 0 : xD;
    xD = e.which == 65 ? 0 : xD;
    // up
	yD = e.which == 38 ? 0 : yD;
    yD = e.which == 87 ? 0 : yD;
    // right
	xD = e.which == 39 ? 0 : xD;
    xD = e.which == 68 ? 0 : xD;
    // down
	yD = e.which == 40 ? 0 : yD;
    yD = e.which == 83 ? 0 : yD;
    // clockwise e:69
    // counter-clockwise q: 81
    // zoom-out f:70
    // zoom-in r:82

    e.preventDefault();
  });

  resizeCanvas();
  render();
  setInterval(move, .01);
});

body {
  margin: 0;
  overflow: hidden;
}

#canvas {
  border: 1px solid #000000;
  background-color: black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="canvas" width="300" height="200"></canvas>

推荐答案

如果要使rect围绕其中心点旋转，则必须:

If you want the rect to rotate around it's centerpoint, you must:

• 使用 context.translate
将旋转点设置为矩形的中心
• 使用 context.rotate
旋转画布
• 绘制矩形

(未试用的)示例代码:

Here's (untested) example code:

var accumRotation=0;

// now change the accumRotation using the E & Q keys
// on key-E do rotate(Math.PI/2); and render();
// on key-Q do rotate(-Math.PI/2); and render();

function rotate(additionalRotation){
    accumRotation+=additionalRotation;
}

function render() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    // translate to the centerpoint of the rect
    // This sets the [0,0] origin of the canvas to the rect centerpoint
    // This will set the rotation point at the center of the rect
    var cx=ss.x+ss.width/2;
    var cy=ss.y+ss.height/2;
    ctx.translate(cx,cy);
    // rotate
    ctx.rotate(accumRotation);
    // draw the rect
    ctx.beginPath();
    // since [0,0] is at center rect, you must pull the rect drawing
    // leftward & upward by half the rect width & height
    ctx.rect(-ss.width/2, -ss.height/2, ss.width, ss.height);
    ctx.lineWidth = 1;
    ctx.strokeStyle = "white";
    ctx.stroke();
    // always clean up by unrotating & untranslating
    ctx.rotate(-accumRotation);
    ctx.translate(-cx,-cy);
}

这篇关于如何使用键盘旋转画布框?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！