一个基于react的图片裁剪组件示例(2)

<div className="select-area" onMouseDown={ this.dragStart} ref="selectArea" > <div className="top-resize" onMouseDown={ event => this.resizeStart(event, 'top')}></div> <div className="right-resize" onMouseDown={ event => this.resizeStart(event, 'right')}></div> <div className="bottom-resize" onMouseDown={ event => this.resizeStart(event, 'bottom')}></div> <div className="left-resize" onMouseDown={ event => this.resizeStart(event, 'left')}></div> <div className="right-bottom-resize" onMouseDown={ event => this.resizeStart(event, 'right')}></div> <div className="left-top-resize" onMouseDown={ event => this.resizeStart(event, 'left')}></div> </div>

selectArea的state值设为这样，selectArea保存拖拽选择框时的参数，resizeArea保存裁剪选择框时的参数，container为.image-principal元素，el为触发事件时的event.target。

this.state = { selectArea: null, el: null, container: null, resizeArea: null }

拖拽选择框

在.select-area按下鼠标，触发mouseDown事件，调用dragStart方法。

使用method = e => {}的形式可以避免在jsx中使用this.method.bind(this)

在这个方法中，首先保存按下鼠标时的鼠标位置，裁剪框与图片的相对距离和裁剪框的最大位移距离，接着添加事件监听

dragStart = e => { const el = e.target const container = this.state.container let selectArea = { posLeft: e.clientX, posTop: e.clientY, left: e.clientX - el.offsetLeft, top: e.clientY - el.offsetTop, maxMoveX: container.offsetWidth - el.offsetWidth, maxMoveY: container.offsetHeight - el.offsetHeight, } this.setState({ ...this.state, selectArea, el}) document.addEventListener('mousemove', this.moveBind, false) document.addEventListener('mouseup', this.stopBind, false) }

moveBind和stopBind来自于

this.moveBind = this.move.bind(this) this.stopBind = this.stop.bind(this)

move方法,在鼠标移动中根据记录新的鼠标位置来计算新的相对位置newPosLeft和newPosTop,并控制该值在合理范围内

move(e) { if (!this.state || !this.state.el || !this.state.selectArea) { return } let selectArea = this.state.selectArea let newPosLeft = e.clientX- selectArea.left let newPosTop = e.clientY - selectArea.top // 控制移动范围 if (newPosLeft <= 0) { newPosLeft = 0 } else if (newPosLeft > selectArea.maxMoveX) { newPosLeft = selectArea.maxMoveX } if (newPosTop <= 0) { newPosTop = 0 } else if (newPosTop > selectArea.maxMoveY) { newPosTop = selectArea.maxMoveY } let elStyle = this.state.el.style elStyle.left = newPosLeft + 'px' elStyle.top = newPosTop + 'px' }

stop方法，移除事件监听，清除state,避免方法错误调用

stop() { document.removeEventListener('mousemove', this.moveBind , false) document.removeEventListener('mousemove', this.resizeBind , false) document.removeEventListener('mouseup', this.stopBind, false) this.setState({...this.state, el: null, resizeArea: null, selectArea: null}) }

裁剪选择框

跟拖拽一样，首先调用resizeStart方法，保存开始裁剪的鼠标位置，裁剪框的尺寸和位置，添加关于resizeBind和stopBind的事件监听，注意，由于react的事件机制特点，需要使用stopPropagation来禁止事件冒泡，事件监听的第三个参数使用false是无效的。

resizeStart = (e, type) => { e.stopPropagation() const el = e.target.parentElement let resizeArea = { posLeft: e.clientX, posTop: e.clientY, width: el.offsetWidth, height: el.offsetHeight, left: parseInt(el.style.left, 10), top: parseInt(el.style.top, 10) } this.setState({ ...this.state, resizeArea, el}) this.resizeBind = this.resize.bind(this, type) document.addEventListener('mousemove', this.resizeBind, false) document.addEventListener('mouseup', this.stopBind, false) }

裁剪的方法，将裁剪分为两种情况，一种是右侧，下侧和右下侧的拉伸。另一种是左侧，上侧和左上侧的拉伸。

第一种情况下，选择框的位置是不会变的，只有尺寸会变，处理起来相对简单。新的尺寸大小为原大小加上当前的鼠标的位置再减去开始拖拽处的鼠标的位置，如果宽度或者高度有一个超标了，则将尺寸设置为刚好到边界的大小。均为超标，设置为新的尺寸。

第二种情况下，选择框的位置和大小同时会变，要同时控制尺寸和位置不超出边界。