그림을 어떤 각도로든 회전시키고 JQuery 플러그인_jquery 사용을 소개합니다.

아래의 jquery.rotate.js 파일을 소개한 다음 $("selector").rotate(angle);를 사용하여 원하는 각도로 회전합니다.
예: $("#rotate-image").rotate(45) ; 이 문장은 $(document).ready(function(){ });
에 배치되어 ID가 Rotate-image인 이미지를 45도 회전합니다.

그런데 크롬에서는 항상 표시되지 않는 것 같습니다.
아아, 2시간 동안 검색한 끝에 Chrome이 이미지의 길이와 너비를 파악하는 데 너무 까다롭다는 사실을 알게 되었습니다.
해결책은 $("#rotate-image").rotate(45); 를
$(window).load(function(){ }); $(document).ready(function(){ }); 이 실행되면 이미지가 로드되지 않습니다. 이는 사기입니다.

또한 $("selector").rotateRight() 및 $("selector").rotateLeft()를 호출하여 오른쪽으로 90도, 왼쪽으로 90도 회전하는 것이 더 편리합니다.

jquery.rotate.js:

코드 복사 코드는 다음과 같습니다.

jQuery.fn.rotate = function(angle,whence) {
var p = this.get(0)
// 지속성을 위해 이미지 태그 내부에 각도를 저장합니다.
if (! whence) {
p.angle = ((p.angle==undefine?0:p.angle) 각도) % 360
} else {
p.angle = 각도
}
if (p.angle >= 0) {
var 회전 = Math.PI * p.angle / 180
} else {
var 회전 = Math.PI * (360 p.angle; ) / 180 ;
}
var costheta = Math.round(Math.cos(rotation) * 1000) / 1000
var sintheta = Math.round(Math.sin(rotation) * 1000) / 1000;
//alert(costheta "," sintheta)
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=" costtheta ", 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 =
} else {
캔버스 .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)
}; if (회전 <= Math.PI) {
context.translate(canvas.width,-costheta*canvas.oImage.height)
} else if (회전 <= 1.5*Math.PI) {
context.translate(-costheta*canvas.oImage.width,canvas.height);
} else {
context.translate(0,-sintheta*canvas.oImage.width)
}
context.rotate(회전);
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)
jQuery.fn.rotateRight = function(angle ) {
this.rotate(angle==undefine?90:angle);
}
jQuery.fn.rotateLeft = function(angle) {
this.rotate(angle== 정의되지 않음?- 90:-angle)
}