HTML5旋转图片

浏览数：26 / 时间：2015年06月09日
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">


<script src="CanvasModule.js" type="text/javascript" charset="utf-8"></script>

<title>旋转跳跃</title>
</head>


<script type="text/javascript" >
if (document.all) {
window.attachEvent(‘onload‘, load); 
}
else 
{ 
window.addEventListener(‘load‘, load, false);
}

//globle
var CanvasImageItems=new Array();
var BackgroundDraw;
var TargetCanvas;
var startMx=0;
var startMy=0;
var startDrgx;
var startDrgy;
var selectTmp=new Array();

function load(){
//添加键盘处理事件 
window.addEventListener("keydown", onKeyDown, false); 
window.addEventListener("keyup", onKeyUp, false);


TargetCanvas=document.getElementById("MyCanvas");
TopCanvas=document.getElementById("topCanvas");

var imgs=document.getElementsByTagName("img");

BackgroundDraw =TargetCanvas.getContext("2d");
TopDraw=TopCanvas.getContext("2d");

for(i=0;i<imgs.length;i++){
var item=new CanvasImage();
item._oElement=imgs[i];
item.left=i*123;
item.top=0;
item.tmpleft=i*123;
item.tmptop=0;
item.width=imgs[i].width;
item.height=imgs[i].height;
CanvasImageItems[i]=item;
drawBackgrdCanvasImg(CanvasImageItems[i]);
}

TargetCanvas.onmousedown=mouseDownHandler;
TargetCanvas.onmouseup=mouseUpHandler;
TargetCanvas.onmousemove=mouseMoveHandler;

TopCanvas.onmousedown=TopmouseMoveHandler;
TopCanvas.onmouseup=TopmouseUpHandler;
TopCanvas.onmousemove=TopmouseMoveHandler;

}

var MousePositon=function(){
var objTop = getOffsetTop(document.getElementById("MyCanvas"));//对象x位置
var objLeft = getOffsetLeft(document.getElementById("MyCanvas"));//对象y位置

return {
mouseX:event.clientX+document.body.scrollLeft-objLeft,//鼠标x位置
mouseY:event.clientY+document.body.scrollTop-objTop//鼠标y位置    
}
}

function getOffsetTop(obj){
var tmp = obj.offsetTop;
var val = obj.offsetParent;
while(val != null){
tmp += val.offsetTop;
val = val.offsetParent;
}
return tmp;
}

function getOffsetLeft(obj){
var tmp = obj.offsetLeft;
var val = obj.offsetParent;
while(val != null){
tmp += val.offsetLeft;
val = val.offsetParent;
}
return tmp;
}

function isChoosed(){
var re=-1;
for(i=0;i<CanvasImageItems.length;i++)
{
cimg=CanvasImageItems[i];
TopDraw.translate(cimg.left+cimg.width/2,cimg.top+cimg.height/2);
TopDraw.rotate(cimg.angle * Math.PI / 180); 
TopDraw.beginPath();
TopDraw.rect(-cimg.width/2,-cimg.height/2,cimg.width,cimg.height);

var mp=MousePositon();
if(TopDraw.isPointInPath(mp.mouseX,mp.mouseY))
{
TopDraw.stroke();
re=i;
document.getElementById("selectedone").innerHTML =re;
TopDraw.rotate(-cimg.angle * Math.PI / 180); 
TopDraw.translate(-cimg.left-cimg.width/2,-cimg.top-cimg.height/2);
break;
}

TopDraw.rotate(-cimg.angle * Math.PI / 180); 
TopDraw.translate(-cimg.left-cimg.width/2,-cimg.top-cimg.height/2);
}
TopDraw.closePath();
TopDraw.clearRect(0,0,1000,600);
TopDraw.restore();
return re;
}

function mouseMoveHandler(){
var mp=MousePositon();
document.getElementById("mousePosition").innerHTML =mp.mouseX+","+mp.mouseY;
}


function mouseDownHandler(){

TopDraw.clearRect(0,0,1000,600);
var mp=MousePositon();
startMx=mp.mouseX;
startMy=mp.mouseY;

var selected= isChoosed();

if(selected>-1)
{
document.getElementById("topCanvas").style.zIndex=2; 
CanvasImageItems[selected].selected=true;//=CanvasImageItems[selected].selected==true?false:true;
}
else
{
for(i in CanvasImageItems ){
if(CanvasImageItems[i].selected==true)
{
CanvasImageItems[i].selected=false;
}
}
redrawAllBt();
return ;
}
refreshBackground();
for(i=0;i<CanvasImageItems.length;i++){
CanvasImageItems[i].tmpleft=CanvasImageItems[i].left;
CanvasImageItems[i].tmptop=CanvasImageItems[i].top;
}

TopmouseMoveHandler();
console.log("bt down mouse");
}


function mouseUpHandler(){
console.log("bt up mouse");    
}



function TopmouseMoveHandler(){
if(selectTmp==null)
return ;
TopDraw.clearRect(0,0,1000,600);
var mp=MousePositon();
document.getElementById("mousePosition").innerHTML =mp.mouseX+","+mp.mouseY;
redrawTopRect(1000,600);
//console.log("top mouse move");
}

function TopmouseUpHandler(){
document.getElementById("topCanvas").style.zIndex=0;
TopDraw.clearRect(0,0,1000,600);
redrawAllBt();
console.log("top up mouse");
}

function redrawTopRect(RECT_WIDTH,RECT_HEIGHT){
TopDraw.clearRect(0,0,1000,600); 
var mp=MousePositon();
for(i in CanvasImageItems ){
if(CanvasImageItems[i].selected==true)
{
drawTopCanvasImg(CanvasImageItems[i]);
CanvasImageItems[i].tmpleft=CanvasImageItems[i].left+mp.mouseX-startMx;
CanvasImageItems[i].tmptop=CanvasImageItems[i].top+mp.mouseY-startMy;
}
}
}


function redrawAllBt(){
BackgroundDraw.clearRect(0,0,1000,600);
var imgs=document.getElementsByTagName("img");

for(i=0;i<CanvasImageItems.length;i++){
CanvasImageItems[i].left=CanvasImageItems[i].tmpleft;
CanvasImageItems[i].top=CanvasImageItems[i].tmptop;
drawBackgrdCanvasImg(CanvasImageItems[i]);
}

}


function drawTopCanvasImg(cimg){

TopDraw.translate(cimg.tmpleft+cimg.width/2,cimg.tmptop+cimg.height/2);
TopDraw.rotate(cimg.angle * Math.PI / 180);

TopDraw.drawImage(cimg._oElement,-cimg.width/2,-cimg.height/2,cimg.width,cimg.height);
if(cimg.selected==true){
TopDraw.beginPath();
TopDraw.rect(-cimg.width/2-1,-cimg.height/2-1,cimg.width+2,cimg.height+2);
TopDraw.stroke();
TopDraw.closePath();
}
TopDraw.rotate(-cimg.angle * Math.PI / 180); 
TopDraw.translate(-cimg.tmpleft-cimg.width/2,-cimg.tmptop-cimg.height/2);
TopDraw.restore();
}

function drawBackgrdCanvasImg(cimg){

BackgroundDraw.translate(cimg.left+cimg.width/2,cimg.top+cimg.height/2);
BackgroundDraw.rotate(cimg.angle * Math.PI / 180); 

BackgroundDraw.drawImage(cimg._oElement,-cimg.width/2,-cimg.height/2,cimg.width,cimg.height);
if(cimg.selected==true){
BackgroundDraw.beginPath();
BackgroundDraw.rect(-cimg.width/2-1,-cimg.height/2-1,cimg.width+2,cimg.height+2);
BackgroundDraw.stroke();
BackgroundDraw.closePath();
}

BackgroundDraw.rotate(-cimg.angle * Math.PI / 180); 
BackgroundDraw.translate(-cimg.left-cimg.width/2,-cimg.top-cimg.height/2);
BackgroundDraw.restore();

}

function refreshBackground(){
BackgroundDraw.clearRect(0,0,1000,600);
for(i=0;i<CanvasImageItems.length;i++)
{
if(CanvasImageItems[i].selected==false)
drawBackgrdCanvasImg(CanvasImageItems[i]);
}    
}

function onKeyDown(evt)
{
refreshBackground();
TopDraw.clearRect(0,0,1000,600); 
if(evt.keyCode=="39")
{    
document.getElementById("topCanvas").style.zIndex=2;
for(i in CanvasImageItems ) { 
if(CanvasImageItems[i].selected==true){
CanvasImageItems[i].angle+=10;
if( CanvasImageItems[i].angle>360)
CanvasImageItems[i].angle=0;
drawTopCanvasImg(CanvasImageItems[i]);
} 
}
}
else if(evt.keyCode==‘37‘)
{    
document.getElementById("topCanvas").style.zIndex=2;
for(i in CanvasImageItems ) { 
if(CanvasImageItems[i].selected==true){
CanvasImageItems[i].angle-=10;
if( CanvasImageItems[i].angle<-360)
CanvasImageItems[i].angle=0;
drawTopCanvasImg(CanvasImageItems[i]);

} 
}
}

} 

function onKeyUp(evt){
document.getElementById("topCanvas").style.zIndex=0;
redrawAllBt();
}
</script>
<body>
<canvas id="MyCanvas" class="main" width="1000" height="600" style="background:grey;position:absolute;left:200px;top:0px;z-index:1;">

</canvas>

<canvas id="topCanvas" class="main" width="1000" height="600" style="background:transparent;position:absolute;left:200px;top:0px;z-index:0;">

</canvas>

<div style="margin:600px">鼠标位置
<span id="mousePosition"></span>选中<span id="selectedone"></span>
<img src="img1.jpg" width="103px" height="163px" border="0" alt="">
<img src="img2.jpg" width="103px" height="163px" border="0" alt="">
<img src="img3.jpg" width="103px" height="163px" border="0" alt="">
<img src="img4.jpg" width="103px" height="163px" border="0" alt="">

</div>

</body>

 

</html>





function CanvasImage()
{
CanvasImage.prototype._oElement = null;
CanvasImage.prototype.top = 0;
CanvasImage.prototype.left = 0;

CanvasImage.prototype.tmptop =0;
CanvasImage.prototype.tmpleft =0;

CanvasImage.prototype.width = 0;
CanvasImage.prototype.height = 0;
CanvasImage.prototype.oCoords = null;
CanvasImage.prototype.angle =-10;
CanvasImage.prototype.theta = 0;
CanvasImage.prototype.scalex = 1;
CanvasImage.prototype.scaley = 1;
CanvasImage.prototype.cornersize = null;
CanvasImage.prototype.polaroidheight = null;
CanvasImage.prototype.randomposition = null;
CanvasImage.prototype.selected = false;
CanvasImage.prototype.bordervisibility = false;
CanvasImage.prototype.cornervisibility = false;

}
}