h5单手实现图片的拖动、旋转、缩放
前一段时间做了微信小程序上的单手图片的拖动、旋转、缩放,没想到有这么多人需要这个功能,有的同学问我能不能做一个h5版的?所以就有了这篇文章前提:本文不适合vue、angular、react框架、仅适用原生开发或者jquery库,因为双向数据绑定的已经在微信上说过了。原理和微信小程序大致相同,只不过不在微信的框架下,没有了双向数据绑定,一切数据的同步展示都需要自己做效果展示。首先还是定义...
前一段时间做了微信小程序上的单手图片的拖动、旋转、缩放,没想到有这么多人需要这个功能,有的同学问我能不能做一个h5版的?所以就有了这篇文章
前提:本文不适合vue、angular、react框架、仅适用原生开发或者jquery库,因为双向数据绑定的已经在微信上说过了。
原理和微信小程序大致相同,只不过不在微信的框架下,没有了双向数据绑定,一切数据的同步展示都需要自己做效果展示。
首先还是定义一个数组(储存item对象,因为我们每次操作都是操作数组里的某一个对象)、自增id、当前选取id、当前选取的对象
var itemList = []; //储存item对象
var increaseId = 0; //自增id
var selectId = 0; //当前选取的id
var item = {}; //当前选取的对象
这是我是用朋友的一个半成品项目接着做的,这里就借花献佛了。
这是个蒙层,里面有很多可选择图片。当点击的时候,在首页生成一个图片,当然还是有很多的参数:
/*这是点击生成图片的函数*/
function confirmTitle() {
increaseId++;
var left = ($(window).width() - 209) / 2; //初始化定位
var top = ($(window).height() - 209) / 2;
icom.fadeOut($('.congratulate '))
// $(".myphoto .imgbox").html("");
//添加图片编辑事件
// elelayer=$('<span class="move active" > <a class="close"></a><a class="rotate"></a><a class="resize"></a></span>').appendTo(".myphoto .imgbox");
elelayer = $('<span data-id=' + increaseId + ' class="move active" style="left:' + left + 'px;top:' + top + 'px"> <a class="close"></a><a class="rotate"></a></span>').appendTo(".myphoto .imgbox");
var id = $(this).data("id");
var src = $(this).find("img").attr("src");
console.log($(this));
imgChild = $('<img/>').attr({
src: src
}).appendTo(elelayer).addClass("wid" + id);
// var x = $(this).offset().left;
// var y = 300;
widthOrg = elelayer.find("img").width();
heightOrg = elelayer.find("img").height();
var data = { //这里是生成图片所对应的所有属性
id: increaseId, //自增id
width: widthOrg,//宽度
height: heightOrg,//高度
tx: 0, //move触摸点
ty: 0,
_tx: 0, //触摸距离
_ty: 0,
rx: 0, //rotate触摸点
ry: 0,
_rx: 0, //触摸距离
_ry: 0,
disPtoO: 0, //触摸点到圆心的距离
scale: 1, //缩放比例
left: left,
top: top,
anglePre: 0, //角度
angleNext: 0,
rotate: 0, //计算得出真正的旋转角度
ox: left + widthOrg / 2, //圆心坐标
oy: top + heightOrg / 2,
r: Math.sqrt(widthOrg * widthOrg + heightOrg * heightOrg) / 2 //对角线的半
}
itemList[itemList.length] = data;//推入到itemList里
}
生成的样子是:
拖动图片的操作:
$(".imgbox").on('touchstart', '.move img', function (e) {
selectId = $(this).parent().attr('data-id');
$(".move").removeClass('active');
$(this).parents(".move").addClass('active');
itemList.forEach(function (currentValue) {
if (selectId == currentValue.id) {
item = currentValue
}
})
item.tx = e.offsetX;
item.ty = e.offsetY;
})
$(".imgbox").on('touchmove', '.move img', function (e) {
item._tx = e.offsetX - item.tx;
item._ty = e.offsetY - item.ty;
item.left += item._tx;
item.top += item._ty;
$(this).parent().css({
left: item.left,
top: item.top
})
// 重新赋值
item.ox = +item.left + item.width / 2;
item.oy = +item.top + item.height / 2;
item.tx = e.offsetX;
item.ty = e.offsetY;
})
拖动右上角的操作:(往外延伸是缩放,往周围移动是旋转)
代码:
$('.imgbox').on("touchstart", '.rotate ', function (e) {
selectId = $(this).parent().attr('data-id');
itemList.forEach(function (currentValue) {
if (selectId == currentValue.id) {
item = currentValue
}
})
e.preventDefault();
item.rx = e.offsetX;
item.ry = e.offsetY;
console.log(item.ox, item.oy, e.offsetX, e.offsetY)
item.anglePre = getAngle(item.ox, item.oy, e.offsetX, e.offsetY);
// item.anglePre = countDeg()
})
$('.imgbox').on("touchmove", '.rotate', function (e) {
e.preventDefault();
item.disPtoO = getDistancs(item.ox, item.oy, e.offsetX, e.offsetY);
item.scale = (item.disPtoO / item.r).toFixed(2); //保留两位小数
if (item.scale >= imgScaleMax) item.scale = imgScaleMax
if (item.scale <= imgScaleMin) item.scale = imgScaleMin
// 父元素放大
item.angleNext = getAngle(item.ox, item.oy, e.offsetX, e.offsetY);
item.rotate += item.angleNext - item.anglePre;
$(this).parent().css({
scale: item.scale,
rotate: item.rotate
})
// 子元素按钮缩小
$(this).css({
scale: 1 / item.scale
}).parent().find('.close').css({
scale: 1 / item.scale
})
item.anglePre = item.angleNext;
})
里面用到的角度和距离函数:
function getAngle(px, py, mx, my) {
var x = px - mx;
var y = py - my;
var angle = Math.atan2(y, x) * 360 / Math.PI;
return angle;
}
function getDistancs(cx, cy, pointer_x, pointer_y) {
var ox = pointer_x - cx;
var oy = pointer_y - cy;
return Math.sqrt(
ox * ox + oy * oy
);
}
慢慢看,懂了其实没有那么复杂
也可以去我的github上拿源码来看,https://github.com/peng20017/h5img,记得给个星星哦。
更多推荐
所有评论(0)