前言：昨天下午老大突然对我说有这样的一个需求可以对图片进行放大缩小旋转拖拽的效果让我进行修改，没有修改的时候是只有一张图片。当听到这个需求的时候心里一顿慌啊，既然任务已经下达那只有完成了然后我就在百度一顿搜啊幸好还是找到了类似的素材，接下来就是疯狂的修改源代码直到是我们想要的效果。今天是周六为什么今天来发表这个技术点呢因为昨天没什么时间因为一直在弄这个需求今天有时间我这个人啊不上班难受（可能是因为单身所以无聊）所以今天就来分享一波。
原图
上面这个是原图是一个模态框，可以看出只有一张图片没有任何其他的操作，修改之后的图片是这样的
修改之后的图片
大家可以看到并没有太大的差别只是多了几个小图片而已，确实没什么太大的差别主要是加了实现的功能。
源代码示意图
<Modal
className='upload-more-modal-box'
width='4.5rem'
footer={null}
visible={previewImg}
onCancel={this.handleCancel}
style={{ boxShadow: '0px 0px 5px 0px rgba(190,190,190,0.5)' }}
maskStyle={{ background: 'rgba(0,0,0,0.5)' }}
>
{/* <div className='preview_pic_wrapper'>
<img alt='' src={previewImgUrl} />
</div> */}
<div style={{ overflow: 'hidden' }} className='imgbox'>
<img
draggable
onMouseDown={this.moveImg}
alt=''
src={previewImgUrl}
ref={this.imgstyle}
style={{ transform: 'rotate(' + R + 'deg) scale(' + SS + ',' + SS + ')', left: this.state.x + 'px', top: this.state.y + 'px' }}
/>
</div>
<div className='actionimgbtn'>
<img src={leftrotate} alt='leftrotateimg' onClick={this.rotateleft}/>
<img src={rightrotate} alt='rightrotateimg' onClick={this.rotateright}/>
<img src={changebig} alt='changebigimg' onClick={this.showbig}/>
<img src={changesmall} alt='changesmallimg' onClick={this.showmin}/>
</div>
</Modal>
每一个图标上都绑定了一个事件用来对图片进行操作
1.向左旋转
向左旋转的事件
// 逆时针旋转
rotateleft = () => {
const { R, SS } = this.state
this.setState({ R: R - 90 })
this.imgstyle.current!.style.transform = 'translate(-50% ,-50%) rotate(' + R + 'deg) scale(' + SS + ',' + SS + ')'
}
2.向右旋转
向右旋转的事件
// 顺时针旋转
rotateright = () => {
const { R, SS } = this.state
this.setState({ R: R + 90 })
this.imgstyle.current!.style.transform = 'translate(-50% ,-50%) rotate(' + R + 'deg) scale(' + SS + ',' + SS + ')'
}
3.放大
放大的事件
// 放大
showbig = () => {
const { S, i, SS, R } = this.state
if (i >= 0) {
this.setState({
S: S + 1,
i: i + 1,
SS: 1 * (S + 1)
})
} else {
this.setState({
S: S - 1,
i: i + 1,
SS: 1 / (S - 1)
})
}
this.imgstyle.current!.style.transform = 'translate(-50% ,-50%) rotate(' + R + 'deg) scale(' + SS + ',' + SS + ')'
}
4.缩小
缩小的事件
// 缩小
showmin = () => {
const { S, i, SS, R } = this.state
if (i <= 0) {
this.setState({
S: S + 1,
i: i - 1,
SS: 1 / (S + 1)
})
} else {
this.setState({
S: S - 1,
i: i - 1,
SS: 1 * (S - 1)
})
}
this.imgstyle.current!.style.transform = 'translate(-50% ,-50%) rotate(' + R + 'deg) scale(' + SS + ',' + SS + ')'
}
5.对图片可以进行拖拽
拖拽的事件
// 拖拽
moveImg = (ev: any) => {
const { x, y } = this.state
ev.preventDefault()
var disx = ev.pageX - x
var disy = ev.pageY - y
document.onmousemove = (ev: any) => {
this.setState({
x: ev.pageX - disx,
y: ev.pageY - disy
})
}
document.onmouseup = () => {
document.onmousemove = null
document.onmousedown = null
}
}
接下来说明一下细节问题我们需要在constructor中定义需要用到的变量的初始值
this.state = {
R: 0,
S: 1,
i: 0,
SS: 1,
x: 0,
y: 0
}
R: 我们做旋转操作的时候旋转参数
SS：我们做放大缩小操作的时候的参数
x，y：我们做拖拽的操作的时候的参数
我们做的这些动画采用的是css3，原来就是改变参数来控制效果
接下来我们来说明一下这个我们想要控制img身上的东西就要加一个ref然后需要在前面声明一下
声明ref勇于控制img
绑定
我们发现每一个方法里面都有
this.imgstyle.current!.style.transform = 'translate(-50% ,-50%) rotate(' + R + 'deg) scale(' + SS + ',' + SS + ')'
在这个里面我们采用了ts类型断言要不然会报这样的错误
错误示例
使用类型断言之前的代码是这样的而且style下面还有一个错误的红线采用类型断言之后完美的解决了这个问题类型断言的代表就是一个感叹号和一个点（!.）
this.imgstyle.style.transform = 'translate(-50% ,-50%) rotate(' + R + 'deg) scale(' + SS + ',' + SS + ')'
关于对图片进行操作的今天就分享到这里如果有什么不懂的欢迎回帖也可以联系本人微信：13014621624，我不会告诉你们微信号就是我本人手机号的，如果大家有什么更好的解决办法欢迎回帖，希望这篇文章能够帮到你们。
网友评论