Повернуть изображение холста против часовой стрелки на том же холсте - PullRequest
Новая
       12

Повернуть изображение холста против часовой стрелки на том же холсте

0 голосов
/ 29 апреля 2020

Скажем, у нас есть холст: 

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

var canvas = document.getElementById("one");
var context = canvas.getContext("2d");
var cw = canvas.width;
var ch = canvas.height;

// Sample graphic
context.beginPath();
context.rect(10, 10, 20, 50);
context.fillStyle = 'yellow';
context.fill();
context.lineWidth = 7;
context.strokeStyle = 'black';
context.stroke();

// create button
var button = document.getElementById("rotate");
button.onclick = function () {
  // rotate the canvas 90 degrees each time the button is pressed
  rotate();
}

var myImageData, rotating = false;

var rotate = function () {
  if (!rotating) {
    rotating = true;
    // store current data to an image
    myImageData = new Image();
    myImageData.src = canvas.toDataURL();

    myImageData.onload = function () {
      // reset the canvas with new dimensions
      canvas.width = ch;
      canvas.height = cw;
      cw = canvas.width;
      ch = canvas.height;

      context.save();
      // translate and rotate
      context.translate(cw, ch / cw);
      context.rotate(Math.PI / 2);
      // draw the previows image, now rotated
      context.drawImage(myImageData, 0, 0);
      context.restore();

      // clear the temporary image
      myImageData = null;

      rotating = false;
    }
  }
}

И при нажатии кнопки холст поворачивается на -90 градусов против часовой стрелки (вокруг центра), и размеры холста также обновляются, так что в некотором смысле , это выглядит следующим образом: я хочу повернуть элемент холста к вращению против часовой стрелки. Я использовал этот код, но он не работает так, как я хочу.

1 Ответ

0 голосов
/ 29 апреля 2020

JavaScript имеет встроенную функцию rotate() для контекста холста: 

context.rotate( angle * Math.PI / 180);

Проблема состоит в том, что поворот будет влиять только на рисунки, сделанные ПОСЛЕ вращения, что означает, что вам потребуется to:

  • Сначала очистить холст: context.clearRect(0, 0, canvas.width, canvas.height);
  • Повернуть контекст context.rotate( 270 * Math.PI / 180);
  • Перерисовать графику

Таким образом Я рекомендую оборачивать графику, которую мы хотим нарисовать, в функцию, чтобы ее было проще вызывать после каждого поворота: 

function drawGraphics() {
    context.beginPath();
    context.rect(10, 10, 20, 50);
    context.fillStyle = 'yellow';
    context.fill();
    context.lineWidth = 7;
    context.strokeStyle = 'black';
    context.stroke();
}
...