/resize-img

图片放大/移动

Primary LanguageJavaScript

预览

预览

这是一个图片拖动和缩放demo

需求:

  • 图片支持在指定范围内拖动(在一个容器中拖动)
  • 图片可以适当的放大缩小(最宽=容器宽度,最高=容器高度)

实现思路:

  • 页面布局:容器:container,拖动的对象:box,缩放的触发点:coor
  • 拖动:在box上按下鼠标被拖动对象随着鼠标移动而移动,鼠标放开则停止移动
  • 缩放:在coor上按下鼠标,box高宽随着鼠标位置变化,鼠标放开则停止变化

技术构思:

  • container或者document上增加mousemove事件,记录鼠标位置
  • box和coor上增加mousedown事件,用于鼠标按下触发对应事件
  • document增加鼠标up事件,如果鼠标放开,则box和coor上的事件恢复初始状态,不再执行
  • 一个参数(比如:move),用于控制状态

细节:

  • 准备工作:获取对应元素,阻止img拖动
document.getElementsByTagName('img')[0].onmousedown = function (e) {
	e.preventDefault()
}; 

var container = document.getElementById('container');
var box = document.getElementById('box');
var coor = document.getElementById('coor');
  • box(被拖动对象)增加mousedown事件:
box.addEventListener('mousedown', function(event){
	var event = event || window.event,
	x = event.pageX - this.offsetLeft - container.offsetLeft, //pageX和clientX:都是相对浏览器左上角的点为参照点,但是pagex不会随页面滚动改变参考值(document左上角),clientx:可视区左上角
	y = event.pageY - this.offsetTop - container.offsetTop,
	dragBox = {
		w: box.offsetWidth,
		h: box.offsetHeight,
		left: box.offsetLeft,
		top: box.offsetTop
	};
	this.posix = {x, y};
	document = Object.assign(document, {
		move: true,
		move_target: this,
		call_position: function (event) {
			event = event || window.event;
			if (dragBox.left >= 0 && dragBox.top >= 0 && dragBox.left + dragBox.w < container.offsetWidth && dragBox.top + dragBox.h < container.offsetHeight) {
				var top = event.pageY - container.offsetTop - y;
				var left = event.pageX - container.offsetLeft - x;
				box.style.top = top + 'px';
				box.style.left = left + 'px';
			}
		}
	})
})
  • coor(控制缩放)增加mousedown
coor.addEventListener('mousedown', function(event){
	var event = event || window.event,
		posix = {
			w: box.offsetWidth,
			h: box.offsetHeight,
			x: event.pageX,
			y: event.pageY
		};
	document = Object.assign(document, {
		move: true,
		call_size: function (event) {
			event = event || window.event;
			if (posix.w <= container.offsetWidth) {
				box.style.width = event.pageX - box.offsetLeft - container.offsetLeft + 'px';
			}
			if (posix.h <= container.offsetHeight) {
				box.style.height = event.pageY - box.offsetTop - container.offsetTop + 'px';
			}
		}
	}) 
})
  • document,mousedown/mouseup事件
document.addEventListener('mousemove', function(event){
	if (!!this.move) {
		var callback = document.call_size || document.call_position 
		callback();
	}
})
document.addEventListener('mouseup', function (e) { //鼠标停止点击将所有的状态置为初始状态
	if (!!this.move) {
		judgeState();
		document = Object.assign(this, {
			'move': false,
			'call_size': false,
		});
	}
});