我有一个html5画布.我想在画布上绘制/旋转图像,图像大小不会改变.我根据图像的大小设置画布的宽度/高度.旋转图像时出现问题.
旋转图像后,红色三角形被裁剪.
在下面链接一个示例显示这个问题.请帮助.
http://jsfiddle.net/zsh64/6ZsCz/76/
旋转图像后,红色三角形被裁剪.
在下面链接一个示例显示这个问题.请帮助.
http://jsfiddle.net/zsh64/6ZsCz/76/
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var angleInDegrees = 0;
var image = document.createElement("img");
image.onload = function () {
canvas.width = image.width;
canvas.height = image.height;
ctx.drawImage(image,0);
};
image.src = "Images/rotate.png";
$("#R").click(function () {
angleInDegrees += 90;
drawRotated(angleInDegrees);
});
$("#L").click(function () {
angleInDegrees -= 90;
drawRotated(angleInDegrees);
});
function drawRotated(degrees) {
ctx.clearRect(0,canvas.width,canvas.height);
ctx.save();
ctx.translate(canvas.width / 2,canvas.height / 2);
ctx.rotate(degrees * Math.PI / 180);
ctx.drawImage(image,-image.width / 2,-image.width / 2);
ctx.restore();
}
解决方法
如果旋转图像,则可以重新计算包含图像所需的边界框.
此代码将采用宽度/高度/旋转角度并返回新的边界框大小：
function newSize(w,h,a){
var rads=a*Math.PI/180;
var c = Math.cos(rads);
var s = Math.sin(rads);
if (s < 0) { s = -s; }
if (c < 0) { c = -c; }
size.width = h * s + w * c;
size.height = h * c + w * s ;
}
这是示例代码和小提琴：http://jsfiddle.net/m1erickson/h65yr/
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
#containerDiv{
border: 1px solid red;
position:absolute;
top:100px;
left:100px;
}
#canvas{
border: 1px solid green;
}
</style>
<script>
$(function(){
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var imgWidth=200;
var imgHeight=300;
var size={width:imgWidth,height:imgHeight};
var rotation=0;
var deg2Rad=Math.PI/180;
var count1=0;
var count2=0;
var img=new Image();
img.onload=function(){
imgWidth=img.width;
imgHeight=img.height;
size={width:imgWidth,height:imgHeight};
draw();
}
img.src="https://dl.dropBoxusercontent.com/u/139992952/stackoverflow/Rotate.png";
function draw(){
canvas.width=size.width;
canvas.height=size.height;
// calculate the centerpoint of the canvas
var cx=canvas.width/2;
var cy=canvas.height/2;
var info=document.getElementById("info");
info.innerHTML="canvas size: "+(count1++)+": "+cx+" / "+cy;
// draw the rect in the center of the newly sized canvas
ctx.clearRect(0,canvas.height);
ctx.fillStyle="rgba(216,216,150,1.0)";
ctx.translate(cx,cy);
ctx.rotate(rotation * deg2Rad);
ctx.drawImage(img,-imgWidth/2,-imgHeight/2);
}
document.getElementById("rotate").addEventListener("click",rotateClicked,false);
function rotateClicked(e){
rotation+=30;
draw();
}
document.getElementById("resize").addEventListener("click",resizeClicked,false);
function resizeClicked(e){
rotation+=30;
newSize(imgWidth,imgHeight,rotation);
draw();
}
function newSize(w,a){
var rads=a*Math.PI/180;
var c = Math.cos(rads);
var s = Math.sin(rads);
if (s < 0) { s = -s; }
if (c < 0) { c = -c; }
size.width = h * s + w * c;
size.height = h * c + w * s ;
}
});
</script>
</head>
<body>
<button id="rotate">Rotate without resize</button>
<button id="resize">Resize with resize</button>
<p id=info></p>
<div id="containerDiv">
<canvas id="canvas" width=400 height=400></canvas>
</div>
</body>
</html>
