如何解决Rotate() 不是函数
在我的项目中,我创建了一个画布,其中:
现在我正在尝试添加旋转功能以在按住鼠标时旋转画布内加载的图像。
我尝试添加rotate()函数,但它返回的错误信息是:$(...).rotate is not a function
HTML
<canvas id="canvas" class="resize" style="width:200px;height:200px;"></canvas>
<input type="file" id="file-input">
JS
$(function() {
$('#file-input').change(function(e) {
var file = e.target.files[0],imageType = /image.*/;
if (!file.type.match(imageType))
return;
var reader = new FileReader();
reader.onload = fileOnload;
reader.readAsDataURL(file);
});
function fileOnload(e) {
var $img = $('<img>',{ src: e.target.result });
$img.load(function() {
var canvas = $('#canvas')[0];
var context = canvas.getContext('2d');
canvas.width = this.naturalWidth;
canvas.height = this.naturalHeight;
context.drawImage(this,0);
});
}
$(document).mouseup(function(e)
{
var container = $(".ui-wrapper");
// if the target of the click isn't the container nor a descendant of the container
if (!container.is(e.target) && container.has(e.target).length === 0)
{
$("#canvas").css("border-style","hidden");
$(".ui-resizable-handle").attr("style","visibility: hidden");
} else {
$("#canvas").css("border-style","solid");
$(".ui-resizable-handle").attr("style","visibility: visible");
}
});
window.zindex = 30;
$(".resize").resizable({handles: 'ne,se,sw,nw'});
$(".resize").parent().draggable({
stack: "div"
});
//SCRIPT PER ROTAZIONE logo
$(".resize").rotate({
bind: {
dblclick: function() {
$(this).data('angle',$(this).data('angle')+90);
var w = $(this).css('width');
$(this).parent().rotate({ animateto: $(this).data('angle')}).css({width: $(this).css('height'),height: w});
}
}
});
});
这是我希望效果如何的示例:
http://jsfiddle.net/m1erickson/QqwKR/
但是,在此示例中,图像会立即加载到画布中。相反,我希望在将照片与输入文件一起上传到画布时出现旋转效果。
解决方法
这篇文章是重复的。无论如何,jQuery 中没有像 rotate()
这样的方法。您需要使用 css()
方法来应用 transform
。
$(this).css('transform','rotate(45deg)');
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。