js 그림 회전 을 실현 하 는 세 가지 방법
이 글 은 주로 js 가 그림 회전 을 실현 하 는 세 가지 방법 을 소개 하 였 으 며, 필요 한 친 구 는 참고 할 수 있다.
1 jQueryRotate. js 를 사용 하여 예시 코드 구현:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
#div1 {
width: 800px;
height: 600px;
background-color: #ff0;
position: absolute;
}
.imgRotate {
width: 100px;
height: 80px;
position: absolute;
top: 50%;
left: 50%;
margin: -40px 0 0 -50px;
}
</style>
</head>
<body>
<div id="div1">
<img id="img1" class="imgRotate" src="http://www.baidu.com/img/logo-yy.gif" />
<input id="input2" type="button" value="btn2"></input>
</div>
</body>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jQueryRotate.js"></script>
<script type="text/javascript">
var num = 0;
$("#input2").click(function(){
num ++;
$("#img1").rotate(90*num);
});
</script>
</html>
테스트 결과: chrome 에서 효과 가 정상 적 이 고 회전 후 img 대상 은 img 대상 입 니 다.ie8 효과 가 정상 적 이지 만 회전 후 img 대상 이 아래 대상 으로 변 합 니 다. 대상 의 변화 로 인해 회전 후에 도 원래 의 방법 으로 img 대상 을 얻 으 면 js 오 류 를 보고 합 니 다.image 대상 을 가 져 오 려 면 class 에 따라 가 져 올 수 있 습 니 다.그림 이 회전 한 후 다른 작업 을 하지 않 으 면 이 방법 을 사용 할 수 있 습 니 다.그림 을 확대, 축소 하 는 등 다른 작업 을 하면 이 방법 은 비교적 복잡 하 다.
<span ...>
<rvml:group class="rvml"...>
<rvml:image class="rvml".../>
</rvml:group>
</span>
2. Microsoft 가 제공 하 는 Matrix 대상 예제 코드 를 사용 합 니 다.
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
#div1 {
width: 800px;
height: 600px;
background-color: #ff0;
position: absolute;
}
.imgRotate {
width: 100px;
height: 100px;
position: absolute;
top: 50%;
left: 50%;
margin: -50px 0 0 -50px;
}
#imgRotate {
width: 100px;
height: 100px;
position: absolute;
top: 50%;
left: 50%;
margin: -50px 0 0 -50px;
}
</style>
</head>
<body>
<div id="div1">
<img id="img1" class="imgRotate" src="http://www.baidu.com/img/logo-yy.gif" />
<input id="input1" type="button" value="btn1"></input>
</div>
</body>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
function rotate(id,angle,whence) {
var p = document.getElementById(id);
// we store the angle inside the image tag for persistence
if (!whence) {
p.angle = ((p.angle==undefined?0:p.angle) + angle) % 360;
} else {
p.angle = angle;
}
if (p.angle >= 0) {
var rotation = Math.PI * p.angle / 180;
} else {
var rotation = Math.PI * (360+p.angle) / 180;
}
var costheta = Math.cos(rotation);
var sintheta = Math.sin(rotation);
if (document.all && !window.opera) {
var canvas = document.createElement('img');
canvas.src = p.src;
canvas.height = p.height;
canvas.width = p.width;
canvas.style.filter = "progid:DXImageTransform.Microsoft.Matrix(M11="+costheta+",M12="+(-sintheta)+",M21="+sintheta+",M22="+costheta+",SizingMethod='auto expand')";
} else {
var canvas = document.createElement('canvas');
if (!p.oImage) {
canvas.oImage = new Image();
canvas.oImage.src = p.src;
} else {
canvas.oImage = p.oImage;
}
canvas.style.width = canvas.width = Math.abs(costheta*canvas.oImage.width) + Math.abs(sintheta*canvas.oImage.height);
canvas.style.height = canvas.height = Math.abs(costheta*canvas.oImage.height) + Math.abs(sintheta*canvas.oImage.width);
var context = canvas.getContext('2d');
context.save();
if (rotation <= Math.PI/2) {
context.translate(sintheta*canvas.oImage.height,0);
} else if (rotation <= Math.PI) {
context.translate(canvas.width,-costheta*canvas.oImage.height);
} else if (rotation <= 1.5*Math.PI) {
context.translate(-costheta*canvas.oImage.width,canvas.height);
} else {
context.translate(0,-sintheta*canvas.oImage.width);
}
context.rotate(rotation);
context.drawImage(canvas.oImage, 0, 0, canvas.oImage.width, canvas.oImage.height);
context.restore();
}
canvas.id = p.id;
canvas.angle = p.angle;
p.parentNode.replaceChild(canvas, p);
}
function rotateRight(id,angle) {
rotate(id,angle==undefined?90:angle);
}
function rotateLeft(id,angle) {
rotate(id,angle==undefined?-90:-angle);
}
$("#input1").click(function(){
$("img.imgRotate").attr("id","imgRotate");
rotateLeft("imgRotate",90);
$("#imgRotate").attr("top","50%");
$("#imgRotate").attr("left","50%");
$("#imgRotate").attr("margin","-50px 0 0 -50px");
});
</script>
</html>
테스트 결과: chrome 에서 효 과 는 정상 이지 만 회전 후 img 대상 은 canvas 대상 으로 변 합 니 다.ie8 효과 가 정상 적 이 고 회전 후 img 대상 은 img 대상 입 니 다.Matrix () 매개 변수 가 비교적 많 기 때문에 사용 할 때 비교적 많은 계산 이 필요 하 다.3 Microsoft 가 제공 하 는 Basic Image 대상 예제 코드 를 사용 합 니 다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<img id="image" src="http://www.baidu.com/img/logo-yy.gif" />
<input id="input2" type="button" value="btn2"></input>
</body>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
var num = 0;
$("#input2").click(function(){
num = (num + 1) % 4;
document.getElementById('image').style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation='+num+')';
});
</script>
</html>
테스트 결과: chrome 에서 회전 할 수 없습니다.ie8 효과 가 정상 적 이 고 회전 후 img 대상 은 img 대상 입 니 다.Basic Image () 는 하나의 인자 만 있 습 니 다.이 세 가지 방법의 코드 를 보면 본질 적 으로 해결 방안 이다. chrome 에서 canvas 대상 을 사용 하여 실현 하고 ie8 에서 VML 또는 Matrix () 또는 Basic Image () 를 사용 하여 실현 한다.저 는 최근 에 구성 요 소 를 개 조 했 습 니 다. 그 중에서 회전, 확대 사진 과 관련 되 는데 jQuery Rotate. js 는 ie8 에서 새로운 대상 을 생 성하 기 때문에 확대 사진 전에 그림 을 선택 할 때 특수 처 리 를 해 야 합 니 다.그 후에 chrome, ie8 을 분리 처리 하기 로 결 정 했 고 chrome 에서 jQuery Rotate 를 사용 하여 이 루어 졌 으 며 ie8 에서 Basic Image () 를 사용 하여 이 루어 져 코드 의 간결 성과 가 독성 을 확보 했다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
다양한 언어의 JSONJSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
