旋转后，将图像绘制到正确的位置 [英] After rotate, draw Image at correct position

问题描述

正如您所看到的，我尝试在画布中旋转图片：
< img src =https://i.stack.imgur.com/FXif3.pngalt =enter image description here>
https://jsfiddle.net/1a7wpsp8/4/

因为我旋转图片周围 [0，image_height] ，图像信息丢失。 头部缺失，画布的高度现在变小，显示整个旋转后的图片。

这个问题我想我必须向右移动旋转原点并增加画布高度。

我添加了一个方法来获取旋转点围绕原点，以特定角度：

 函数rotate（x，y，a）{
 var cos = Math.cos，
 sin = Math.sin，
 
a = a * Math.PI / 180，
 xr = x * cos（a） ; 
 yr = x * sin（a）+ y * cos（a）; 
 
 return [xr，yr]; 
} 
  

我试图计算新的旋转原点，但失败。 p>

旋转图像的首选方法是什么？
如何在画布上显示完整图像，红色边框？感谢
https://jsfiddle.net/1a7wpsp8/4/

解决方案

这里是一个旋转图像旋转的代码：
http://jsfiddle.net/6ZsCz/1911/

HTML：

  canvas id =canvaswidth = 300 height = 300>< / canvas>< br& 
< button id =顺时针>向右旋转< / button> 
< button id =counterclockwise>向左旋转< / button> 
  

JS：

  var canvas = document.getElementById（canvas）; 
 var ctx = canvas.getContext（2d）; 
 var width = 0; 
 var height = 0; 
 var diagonal = 0; 
 var angleInDegrees = 0; 
 var image = document.createElement（img）; 
 image.onload = function（）{
 width = image.naturalWidth; 
 height = image.naturalHeight; 
 diagonal = Math.sqrt（Math.pow（width，2）+ Math.pow（height，2））; 
 ctx.canvas.height = diagonal; 
 ctx.canvas.width = diagonal; 
 ctx.clearRect（0,0，canvas.width，canvas.height）; 
 ctx.save（）; 
 ctx.translate（diagonal / 2，diagonal / 2）; 
 ctx.rotate（0）; 
 ctx.drawImage（image，-width / 2，-height / 2）; 
 ctx.restore（）; 
} 
 image.src =http://i.imgur.com/gwlPu.jpg; 
 
 $（＃顺时针）。click（function（）{
 angleInDegrees + = 45; 
 drawRotated（angleInDegrees）; 
} 
 
 $（＃counterclockwise）click（function（）{
 angleInDegrees- = 45; 
 drawRotated（angleInDegrees）; 
} 
 
 function drawRotated（degrees）{
 ctx.clearRect（0,0，canvas.width，canvas.height）; 
 ctx.save（） 
 ctx.translate（diagonal / 2，diagonal / 2）; 
 ctx.rotate（degrees * Math.PI / 180）; 
 ctx.drawImage（image，-width / 2，-height / 2）; 
 ctx.restore（）; 
} 
  

CSS（用于画布背景）：

  canvas {border：1px solid red; 
 background：red; border-radius：50％} //看到偏心的中心:) 
  

As you can see I try to rotate an image in a canvas: https://jsfiddle.net/1a7wpsp8/4/

Because I rotated the image around [0, image_height], Image-Information got lost. Parts of the head are missing and the height of the Canvas is now to small to display the whole rotated image.

To fix this problem I think I have to move the rotate-origin more to the right and increase the canvas height.

I added a method to get the rotated point around the origin, by a specific angle:

function rotate(x, y, a) {
 var cos = Math.cos,
    sin = Math.sin,

    a = a * Math.PI / 180, 
    xr =  x * cos(a) - y * sin(a);
    yr =  x * sin(a) + y * cos(a);

 return [xr, yr];
}

With that I tried to calculate the new rotating origin, but failed.

What would be your preferred method to rotate the image? How would you display the full image on the canvas, without red borders? Thanks https://jsfiddle.net/1a7wpsp8/4/

解决方案

Here is a fiddle with a code for your image rotation :) http://jsfiddle.net/6ZsCz/1911/

HTML :

canvas id="canvas" width=300 height=300></canvas><br>
<button id="clockwise">Rotate right</button>
<button id="counterclockwise">Rotate left</button>

JS:

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var width=0;
var height=0;
var diagonal = 0;
var angleInDegrees=0;
var image=document.createElement("img");
image.onload=function(){
    width = image.naturalWidth;
  height = image.naturalHeight;
 diagonal=Math.sqrt(Math.pow(width,2)+Math.pow(height,2));
   ctx.canvas.height = diagonal;
  ctx.canvas.width = diagonal;
  ctx.clearRect(0,0,canvas.width,canvas.height);
    ctx.save();
    ctx.translate(diagonal/2,diagonal/2);
    ctx.rotate(0);
    ctx.drawImage(image,-width/2,-height/2);
    ctx.restore();
}
image.src="http://i.imgur.com/gwlPu.jpg";

$("#clockwise").click(function(){ 
    angleInDegrees+=45;
    drawRotated(angleInDegrees);
});

$("#counterclockwise").click(function(){ 
    angleInDegrees-=45;
    drawRotated(angleInDegrees);
});

function drawRotated(degrees){
    ctx.clearRect(0,0,canvas.width,canvas.height);
    ctx.save();
    ctx.translate(diagonal/2,diagonal/2);
    ctx.rotate(degrees*Math.PI/180);
    ctx.drawImage(image,-width/2,-height/2);
    ctx.restore();
}

CSS(for canvas background):

canvas{border:1px solid red;
background:red;border-radius:50%} // to see exectly centered :)

这篇关于旋转后，将图像绘制到正确的位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！