Как заставить мое изображение холста поворачиваться на 90 градусов каждый раз, а вращаться только на 180 градусов - PullRequest
Новая
       2

Как заставить мое изображение холста поворачиваться на 90 градусов каждый раз, а вращаться только на 180 градусов

0 голосов
/ 02 апреля 2019

я пытаюсь заставить мое изображение поворачиваться на 90 дрег, когда вы нажимаете на него, но оно поворачивает только на 180 дрег, как мне заставить его перемещаться на 90 градусов при каждом нажатии на него? 

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
  <title>Flipping photo in a canvas tag</title>
  <style>
    #canvas {cursor: pointer;}

       canvas {
    height: 50vh;    

    }  


    </style>
</head>
<body>  



<label>Image File:</label>
<br/>
<input type="file" id="imageLoader" name="imageLoader" />

<h1>Example of using <code>&lt;canvas&gt;</code></h1>

<p>This example shows how a photo is loaded in a <code>&lt;canvas&gt;</code> tag and then flipped.</p>

<p>Click on the photo to flip (provided, of course, that your browser supports <code>&lt;canvas&gt;</code>)</p>

<canvas id="canvas" style="border:1px red solid;"></canvas>

<a download="new-image.png" id="download">Download</a>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

    <script type="text/javascript">




var imageLoader = document.getElementById('imageLoader');
imageLoader.addEventListener('change', handleImage, false);


var can = document.getElementById('canvas');
var ctx = can.getContext('2d');




var img = new Image();


function handleImage(e) {
  var reader = new FileReader();
  reader.onload = function(event) {

    img.onload = function() {
      can.width = img.width;
      can.height = img.height;
      ctx.drawImage(img, 0, 0, img.width, img.height);
      ctx.save();
    }
    img.src = event.target.result;
  }
  reader.readAsDataURL(e.target.files[0]);
}




can.onclick = function() {
  console.log('here');
  ctx.translate(img.width - 1, img.height - 1);
  ctx.rotate(Math.PI);
  ctx.drawImage(img, 0, 0, img.width, img.height);

  var button = document.getElementById('download');
  button.setAttribute( 'href', can.toDataURL('image/png', 1) );

};    



    </script>


    <p><a href="http://www.phpied.com/photo-canvas-tag-flip/">Blog post is here</a></p>

</body>
</html>

1 Ответ

1 голос
/ 02 апреля 2019

Math.PI вращается на 180 °. n * Math.PI / 180 вращается на n °. Так что в вашем случае вам нужно позвонить ctx.rotate(Math.PI/2).

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

Так что вам нужно отменить ctx.translate(img.width - 1, img.height - 1); после поворота с помощью ctx.translate(-(img.width - 1), -(img.height - 1));.

Смотрите пример: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/rotate#Rotating_a_shape_around_its_center

Пример: 

// Rotation by 90° around center at 150,75
ctx.translate(150, 75);
ctx.rotate(Math.PI / 2);
ctx.translate(-150, -75);
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...