使用touch操作图片

Posted 2021-10-19 zhoushangwu

功能：

1、图片放大缩小

2、图片移动

3、图片上做点标记

 

PS

1、后端程序员不容易，且行且珍惜

2、代码不想封装，累

 

js代码

/**************************calc picture start****************************************/
//图片拖动开始位置
var startx = 0;
var starty = 0;

//图片原始定位
var oLeft = 0;
var oTop = 0;

//图片移动后的位置
var imgLeftPx = 0;
var imgTopPx = 0;

//图标的位置
var markerLeft = 0;
var markerTop = 0;

//手指缩放，记录两根手指的位置
var pageX, pageY, initX, initY, isTouch = false;
var start = [];

var touchNumber = 0;

function picMove() {

	$("#floor_backgroup").on("touchstart", function(e) {
		//判断手指数
		//if(e.changedTouches.length == 1) {
		var ttg = e.changedTouches[0];

		//计算相对的位置
		startx = ttg.pageX
		starty = ttg.pageY
		var el = $("#floor_backgroup");

		oLeft = el.css("left");
		oTop = el.css("top");
		//}

		//手指按下时的手指所在的X，Y坐标  
		pageX = e.targetTouches[0].pageX;    
		pageY = e.targetTouches[0].pageY;     //初始位置的X，Y 坐标  
		    
		initX = e.target.offsetLeft;    
		initY = e.target.offsetTop;     //记录初始 一组数据 作为缩放使用
		start = e.touches; //得到第一组两个点
		    
		if(start.length == 2) {
			//表示手指已按下
			isTouch = true;
		}
		
		touchNumber = start.length;
		
		return false;
	})

	$("#floor_backgroup").on("touchmove ", function(e) {
		//calcPoint(e);
		//if(e.touches.length == 1) {
		if(!isTouch  && touchNumber == 1) {
			var ttg = e.touches[0];
			//计算相对的位置
			var x = ttg.pageX - startx;
			var y = ttg.pageY - starty;

			x = x + parseInt(oLeft.replace("px", ""))
			y = y + parseInt(oTop.replace("px", ""))

			$("#floor_backgroup").css({
				"left": x + "px",
				"top": y + "px"
			})
		}

		//if(e.touches.length == 2) {
		if(isTouch) {
			//得到第二组两个点
			var now = e.touches;
			//得到缩放比例， getDistance 是勾股定理的一个方法
			var p2 = now[1];
			var p1 = now[0];

			var x = (p2.pageX - p1.pageX)
			var y = (p2.pageY - p1.pageY)
			var value01 = Math.sqrt((x * x) + (y * y))

			p2 = start[1]
			p1 = start[0]

			x = (p2.pageX - p1.pageX)
			y = (p2.pageY - p1.pageY)
			var value02 = Math.sqrt((x * x) + (y * y))

			var scale = (value01 / value02);
			scale = scale.toFixed(8);

			scale = (scale - 1) / 80 + 1
			//console.log(scale)

			var image = new Image()
			image.src = $("#floor_picture").attr("src")

			//console.log(image.height)

			if($("#floor_backgroup").height() * scale > image.height) {
				return false;
			}

			if($("#floor_backgroup").height() * scale < ($("#floor_img").height() * 0.7) && $("#floor_backgroup").width() * scale < ($("#floor_img").width() * 0.7)) {
				return false;
			}

			$("#floor_backgroup").css({
				"height": ($("#floor_backgroup").height() * scale) + "px",
				"width": ($("#floor_backgroup").width() * scale) + "px"
			})
		}

		return false;
	})

	$("#floor_backgroup").on("touchend ", function(e) {
		if(isTouch) {
			isTouch = false;
		} 
		
		if(!isTouch && touchNumber == 1){
			console.log(1111)
			var ttg = e.changedTouches[0];
			var x = ttg.pageX - startx;
			var y = ttg.pageY - starty;

			imgLeftPx = parseInt($("#floor_backgroup").css("left").replace("px", ""))
			imgTopPx = parseInt($("#floor_backgroup").css("top").replace("px", ""))

			if(x == 0 && y == 0) {
				//$("#floor_img").click();
				calcPoint(e);
			}
		}

		return false;
	})

	//图标touch事件
	$("#floor_marker").on("touchstart", function(e) {
		var ttg = e.changedTouches[0];

		//记录手指放下去的位置
		markerLeft = ttg.pageX
		markerTop = ttg.pageY
		//
		//e.preventDefault();
		return false;
	})

	$("#floor_marker").on("touchmove", function(e) {
		var ttg = e.changedTouches[0];

		//拖动过程中获取到的位置
		var x = ttg.pageX;
		var y = ttg.pageY;

		//计算拖动的距离
		x = x - markerLeft;
		y = y - markerTop;

		markerLeft = ttg.pageX;
		markerTop = ttg.pageY;

		//在原基础上增加移动的距离
		var mleft = $("#floor_marker").css("left").replace("%", "")
		var mtop = $("#floor_marker").css("top").replace("%", "")

		var h = $("#floor_backgroup").height()
		var w = $("#floor_backgroup").width()

		x = x + parseFloat(mleft) / 100 * w;
		y = y + parseFloat(mtop) / 100 * h;

		imgleft = x / w * 100;
		imgtop = y / h * 100;

		//console.log(x)
		$("#floor_marker").css({
			"left": imgleft + "%",
			"top": imgtop + "%"
		})
		//e.preventDefault();
		return false;
	})

	$("#floor_marker").on("touchend", function(e) {

		//e.preventDefault();
		return false;
	})
}

var imgleft = 0;
var imgtop = 0;

function calcPoint(e) {
	var ttg = e.changedTouches[0];
	var curr = e.target;

	var x0 = curr.offsetLeft + imgLeftPx
	var y0 = $("#item2").height() + imgTopPx //curr.offsetTop

	//计算相对的位置
	var x = ttg.pageX - x0;
	var y = ttg.pageY - y0;

	var h = $("#floor_picture").height()
	var w = $("#floor_picture").width()

	imgleft = x / w * 100;
	imgtop = y / h * 100;

	//console.log(x)
	$("#floor_marker").css({
		"left": imgleft + "%",
		"top": imgtop + "%"
	})
}
/**************************calc picture end****************************************/

　　

html代码

<div id="floor_img" style="height: 100%;width: 100%; position: relative; z-index: 3; display: block; background-color:rgba(0,0,0,0.7);overflow: hidden;">
				<div id="floor_backgroup" style="position: absolute;width: 100%; " >
					<!--图片-->
					<img id="floor_picture" style="max-height: 100%; max-width: 100%;"  src="../images/bg.png">
					<!--标记图片-->
					<img id="floor_marker" src="http://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png" style="position: absolute; height: 68px; margin: -64px 0 0 -26px ; width: 53px; left: 0; top: 0;">
				</div>
			</div>