共计 8826 个字符，预计需要花费 23 分钟才能阅读完成。
看见项目里用了一个裁图插件，看一了这么一个效果，故此模拟一下 github L6zt 项目地址：https://github.com/L6zt/captu…step 1: npm install && npm run devstep 2 浏览器访问 http://localhost:7001/ 实现效果：
/ 代码思路 /1. 页面的坐标系是以左上角 为 (0,0) 点,2. 依鼠标拖动的坐标位置，和 刚开始 坐标位置进行 比较，算出 差值即是当前 拖动距离，依靠这个距离控制 元素的 大小 或 位置。3. 该效果有 9 个控制点，被控制的元素 + 8 个圆形蓝色控制点。都是利用上面的原理，来做。此时可以想到 9 目标 都有 同样的效果，因此我实现了一个 CaptureMouse 类，来减少代码量。具体代码结构：mian.js 实现 CaptureMouse；
具体部分代码介绍
/*
*
*
*
*
*/
/*
* 事件列表 mousedown mouseup mousemove touchstart touchmove touchend
*
*/
import {on, off, once} from ‘./utils/dom’;
import {checkIsPc} from ‘./utils/browser’;
import JcEvent from ‘./common/event’;
const global = window;
const doc = global.document;
const body = doc.body;
/*
* _x _y 初始坐标
* _dx _dy 坐标增量
*
*
*/
class CaptureMouse{
constructor (elem, options) {
this.elem = elem;
this._isPc = this.checkInPc();
this._defaultOptions = {};
this.options = Object.assign({}, this._defaultOptions, options || {});
this._x = 0;
this._y = 0;
this._mvX = 0;
this._mvY = 0;
this._dx = 0;
this._dy = 0;
this.actionEvent = new JcEvent();
this.captureMouseStart = this.captureMouseStart.bind(this);
this.captureMouseMove = this.captureMouseMove.bind(this);
this.captureMouseEnd = this.captureMouseEnd.bind(this);
this.findMouseLc = this.findMouseLc.bind(this);
this.init();
}
checkInPc () {
const {isPc} = checkIsPc();
return isPc
}
// 输出参数转换
findMouseLc (e) {
const {pageX, pageY} = e;
const {_x, _y} = this;
const dx = pageX – _x;
const dy = pageY – _y;
this._dx = dx;
this._dy = dy;
this._mvX = pageX;
this._mvY = pageY;
const playLoad = {
dx,
dy,
mvX: pageX,
mvY: pageY,
x: this._x,
y: this._y
};
return playLoad
}
// 鼠标按下事件
captureMouseStart (e) {
const {captureMouseMove, captureMouseEnd} = this;
const elem = body;
const {pageX, pageY} = e;
this._x = this._mvX = pageX;
this._y = this._mvY= pageY;
e.stopPropagation();
// 绑定鼠标移动事件
on({
elem,
type: ‘mousemove’,
fn: captureMouseMove
});
// 绑定鼠标左键抬起事件
on({
elem,
type: ‘mouseup’,
fn: captureMouseEnd
});
}
captureMouseMove (e) {
const playLoad = this.findMouseLc(e);
e.preventDefault();
e.stopPropagation();
this.actionEvent.trigger({
type: ‘state:change’,
playLoad
})
}
// 操作结束
captureMouseEnd (e) {
const {captureMouseMove, captureMouseEnd} = this;
const playLoad = this.findMouseLc(e);
const elem = body;
// e.stopPropagation();
// 销毁 绑定的 鼠标移动事件
off({
elem,
type: ‘mousemove’,
fn: captureMouseMove
});
// 销毁 绑定的 鼠标抬起事件
off({
elem,
type: ‘mouseup’,
fn: captureMouseEnd
});
this.actionEvent.trigger({
type: ‘state:end’,
playLoad
})
}
// 外面函数捕捉 鼠标 事件活动 结束
captureStateEnd(fn) {
const self = this;
this.actionEvent.on({
type: ‘state:end’,
fn: fn.bind(self)
})
}
// 外面函数 捕捉 鼠标 变化信息
captureStateChange(fn) {
const self = this;
this.actionEvent.on({
type: ‘state:change’,
fn: fn.bind(self)
})
}
offCaptureStateChange (fn) {
const self = this;
this.actionEvent.off({
type: ‘state:change’,
fn: fn.bind(self)
})
}
init () {
const {_isPc, elem, captureMouseStart} = this;
if (_isPc) {
on({
elem,
type: ‘mousedown’,
fn: captureMouseStart
})
} else {
}
}
destroy () {
const {_isPc, captureMouseStart, elem} = this;
if (_isPc) {
off({
elem,
type: ‘mouseup’,
fn: captureMouseStart
})
}
}
};
export default CaptureMouse
// index.js 初始化 整个效果的主文件
import ‘./css/main.scss’
import CaptureMouse from ‘./main’;
import {getElement, sgElemCss, createdElem} from ‘./utils/dom’;
const global = window;
const doc = global.document;
// 生成控制点
const insertControlDot = (fartherNone) => {
const childNodeList = [
{
tag: ‘span’,
classNames: ‘control-content-lc jc-capture-lt’
}, {
tag: ‘span’,
classNames: ‘control-content-lc jc-capture-lm’
},
{
tag: ‘span’,
classNames: ‘control-content-lc jc-capture-rt’
}, {
tag: ‘span’,
classNames: ‘control-content-lc jc-capture-rm’
}, {
tag: ‘span’,
classNames: ‘control-content-lc jc-capture-lb’
}, {
tag: ‘span’,
classNames: ‘control-content-lc jc-capture-rb’
}, {
tag: ‘span’,
classNames: ‘control-content-lc jc-capture-bm’
}, {
tag: ‘span’,
classNames: ‘control-content-lc jc-capture-tm’
}
];
const xmlRoot = doc.createDocumentFragment();
childNodeList.forEach(nodeDesc => {
xmlRoot.appendChild(createdElem(nodeDesc))
});
fartherNone.appendChild(xmlRoot);
};
// 初始化绑定事件
const init= () => {
const controlView = getElement(‘.mouse-handle-view’);
insertControlDot(controlView);
const rbElem = getElement(‘.jc-capture-rb’);
const tmElem = getElement(‘.jc-capture-bm’);
const bmElem = getElement(‘.jc-capture-tm’);
const lmElem = getElement(‘.jc-capture-lm’);
const rmElem = getElement(‘.jc-capture-rm’);
const rtElem = getElement(‘.jc-capture-rt’);
const ltElem = getElement(‘.jc-capture-lt’);
const lbElem = getElement(‘.jc-capture-lb’);
const captureControlView = new CaptureMouse(controlView);
let left = sgElemCss(controlView, ‘left’);
let top = sgElemCss(controlView, ‘top’);
let width = sgElemCss(controlView, ‘width’);
let height = sgElemCss(controlView, ‘height’);
const initCaptureRb = () => {
const captureRbElem = new CaptureMouse(rbElem);
captureRbElem.captureStateChange(function (playLoad) {
const {dx, dy} = playLoad;
let curWidth = width + dx;
let curHeight = height + dy;
if (curWidth < 24) curWidth = 24;
if (curHeight < 24) curHeight = 24;
sgElemCss(controlView, {
width: `${curWidth}px`,
height: `${curHeight}px`
});
});
captureRbElem.captureStateEnd(function () {
const {_dx, _dy} = this;
width = width + _dx;
height = height + _dy;
if (width < 24) width = 24;
if (height < 24) height = 24;
sgElemCss(controlView, {
width: `${width}px`,
height: `${height}px`
})
});
};
const intCaptureMainTree = () => {
const captureRbElem = new CaptureMouse(rbElem);
captureControlView.captureStateChange(function (playLoad) {
const {dx, dy} = playLoad;
let curLeft = left + dx;
let curTop = top + dy;
sgElemCss(controlView, {
left: `${curLeft}px`,
top: `${curTop}px`
})
});
captureControlView.captureStateEnd(function (playLoad) {
const {_dx, _dy} = this;
left = left + _dx;
top = top + _dy;
console.log(‘end’, left, top);
sgElemCss(controlView, {
left: `${left}px`,
top: `${top}px`
})
})
};
const initCaptureTm = () => {
const captureTmElem = new CaptureMouse(tmElem);
captureTmElem.captureStateChange(function (playLoad) {
const {dx, dy} = playLoad;
let curHeight = height – dy;
let curTop = top + dy;
if (curHeight < 24) curHeight = 24;
sgElemCss(controlView, {
height: `${curHeight}px`,
top: `${curTop}px`
});
});
captureTmElem.captureStateEnd(function () {
const {_dx, _dy} = this;
height = height – _dy;
top = top + _dy;
if (height < 24) height = 24;
sgElemCss(controlView, {
height: `${height}px`,
top: `${top}px`
})
});
};
const initCaptureBm = () => {
const captureBmElem = new CaptureMouse(bmElem);
captureBmElem.captureStateChange(function (playLoad) {
const {dx, dy} = playLoad;
let curHeight = height + dy;
if (curHeight < 24) curHeight = 24;
sgElemCss(controlView, {
height: `${curHeight}px`
});
});
captureBmElem.captureStateEnd(function () {
const {_dx, _dy} = this;
height = height + _dy;
if (width < 24) width = 24;
if (height < 24) height = 24;
sgElemCss(controlView, {
height: `${height}px`
})
});
};
const initCaptureRm = () => {
const captureRmElem = new CaptureMouse(rmElem);
captureRmElem.captureStateChange(function (playLoad) {
const {dx, dy} = playLoad;
let curWidth = width + dx;
if (curWidth < 24) curWidth = 24;
sgElemCss(controlView, {
width: `${curWidth}px`
});
});
captureRmElem.captureStateEnd(function () {
const {_dx, _dy} = this;
width = width + _dx;
if (width < 24) width = 24;
sgElemCss(controlView, {
width: `${width}px`
})
});
};
const initCaptureLm = () => {
const captureLmElem = new CaptureMouse(lmElem);
captureLmElem.captureStateChange(function (playLoad) {
const {dx, dy} = playLoad;
let curWidth = width – dx;
let curLeft = left + dx;
if (curWidth < 24) curWidth = 24;
sgElemCss(controlView, {
width: `${curWidth}px`,
left: `${curLeft}px`
});
});
captureLmElem.captureStateEnd(function () {
const {_dx, _dy} = this;
width = width – _dx;
left = left + _dx;
if (width < 24) width = 24;
sgElemCss(controlView, {
width: `${width}px`,
left: `${left}px`
})
});
};
const initCaptureRt = () => {
const captureLmElem = new CaptureMouse(rtElem);
captureLmElem.captureStateChange(function (playLoad) {
const {dx, dy} = playLoad;
let curWidth = width + dx;
let curHeight = height – dy;
let curTop = top + dy;
if (curWidth < 24) curWidth = 24;
if (curHeight < 24) curHeight = 24;
sgElemCss(controlView, {
width: `${curWidth}px`,
height: `${curHeight}px`,
top: `${curTop}px`
});
});
captureLmElem.captureStateEnd(function () {
const {_dx, _dy} = this;
width = width + _dx;
height = height – _dy;
top = top + _dy;
if (width < 24) width = 24;
if (height < 24) height = 24;
sgElemCss(controlView, {
width: `${width}px`,
height: `${height}px`,
top: `${top}px`
})
});
};
const initCaptureLb = () => {
const captureLbElem = new CaptureMouse(lbElem);
captureLbElem.captureStateChange(function (playLoad) {
const {dx, dy} = playLoad;
let curWidth = width – dx;
let curHeight = height + dy;
if (curWidth < 24) curWidth = 24;
if (curHeight < 24) curHeight = 24;
sgElemCss(controlView, {
width: `${curWidth}px`,
height: `${curHeight}px`,
});
});
captureLbElem.captureStateEnd(function () {
const {_dx, _dy} = this;
width = width – _dx;
height = height + _dy;
if (width < 24) width = 24;
if (height < 24) height = 24;
sgElemCss(controlView, {
width: `${width}px`,
height: `${height}px`,
})
});
};
const initCaptureLt = () => {
const captureLtElem = new CaptureMouse(ltElem);
captureLtElem.captureStateChange(function (playLoad) {
const {dx, dy} = playLoad;
let curWidth = width – dx;
let curHeight = height – dy;
let curTop = top + dy;
let curLeft = left + dx;
if (curWidth < 24) curWidth = 24;
if (curHeight < 24) curHeight = 24;
sgElemCss(controlView, {
width: `${curWidth}px`,
height: `${curHeight}px`,
top: `${curTop}px`,
left: `${curLeft}px`
});
});
captureLtElem.captureStateEnd(function () {
const {_dx, _dy} = this;
width = width – _dx;
height = height – _dy;
top = top + _dy;
left = left + _dx;
if (width < 24) width = 24;
if (height < 24) height = 24;
sgElemCss(controlView, {
width: `${width}px`,
height: `${height}px`,
top: `${top}px`,
left: `${left}px`
})
});
};
initCaptureRb();
initCaptureTm();
initCaptureBm();
initCaptureRm();
initCaptureLm();
initCaptureRt();
initCaptureLb();
initCaptureLt();
intCaptureMainTree();
}
init();
