h5单手实现图片的拖动、旋转、缩放

前一段时间做了微信小程序上的单手图片的拖动、旋转、缩放，没想到有这么多人需要这个功能，有的同学问我能不能做一个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，记得给个星星哦。