前言：昨天下午老大突然對(duì)我說(shuō)有這樣的一個(gè)需求可以對(duì)圖片進(jìn)行放大縮小旋轉(zhuǎn)拖拽的效果讓我進(jìn)行修改雅潭，沒(méi)有修改的時(shí)候是只有一張圖片拓售。當(dāng)聽(tīng)到這個(gè)需求的時(shí)候心里一頓慌啊，既然任務(wù)已經(jīng)下達(dá)那只有完成了然后我就在百度一頓搜啊幸好還是找到了類似的素材咧七，接下來(lái)就是瘋狂的修改源代碼直到是我們想要的效果汁讼。今天是周六為什么今天來(lái)發(fā)表這個(gè)技術(shù)點(diǎn)呢因?yàn)樽蛱鞗](méi)什么時(shí)間因?yàn)橐恢痹谂@個(gè)需求今天有時(shí)間我這個(gè)人啊不上班難受（可能是因?yàn)閱紊硭詿o(wú)聊）所以今天就來(lái)分享一波唁情。
上面這個(gè)是原圖是一個(gè)模態(tài)框梧税，可以看出只有一張圖片沒(méi)有任何其他的操作占业，修改之后的圖片是這樣的
大家可以看到并沒(méi)有太大的差別只是多了幾個(gè)小圖片而已帽蝶，確實(shí)沒(méi)什么太大的差別主要是加了實(shí)現(xiàn)的功能赦肋。
<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>
每一個(gè)圖標(biāo)上都綁定了一個(gè)事件用來(lái)對(duì)圖片進(jìn)行操作
1.向左旋轉(zhuǎn)
//?逆時(shí)針旋轉(zhuǎn)
??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.向右旋轉(zhuǎn)
//?順時(shí)針旋轉(zhuǎn)
??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.對(duì)圖片可以進(jìn)行拖拽
?//?拖拽
??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
????}
??}
接下來(lái)說(shuō)明一下細(xì)節(jié)問(wèn)題我們需要在constructor中定義需要用到的變量的初始值
this.state?=?{
??????R:?0,
??????S:?1,
??????i:?0,
??????SS:?1,
??????x:?0,
??????y:?0
????}
R: 我們做旋轉(zhuǎn)操作的時(shí)候旋轉(zhuǎn)參數(shù)
SS：我們做放大縮小操作的時(shí)候的參數(shù)
x，y：我們做拖拽的操作的時(shí)候的參數(shù)
我們做的這些動(dòng)畫(huà)采用的是css3励稳，原來(lái)就是改變參數(shù)來(lái)控制效果
接下來(lái)我們來(lái)說(shuō)明一下這個(gè)我們想要控制img身上的東西就要加一個(gè)ref然后需要在前面聲明一下
我們發(fā)現(xiàn)每一個(gè)方法里面都有?
this.imgstyle.current!.style.transform?=?'translate(-50%?,-50%)?rotate('?+?R?+?'deg)?scale('?+?SS?+?','?+?SS?+?')'
在這個(gè)里面我們采用了ts類型斷言要不然會(huì)報(bào)這樣的錯(cuò)誤
使用類型斷言之前的代碼是這樣的而且style下面還有一個(gè)錯(cuò)誤的紅線采用類型斷言之后完美的解決了這個(gè)問(wèn)題類型斷言的代表就是一個(gè)感嘆號(hào)和一個(gè)點(diǎn)（!.）
this.imgstyle.style.transform?=?'translate(-50%?,-50%)?rotate('?+?R?+?'deg)?scale('?+?SS?+?','?+?SS?+?')'
關(guān)于對(duì)圖片進(jìn)行操作的今天就分享到這里如果有什么不懂的歡迎回帖也可以聯(lián)系本人微信：13014621624佃乘，我不會(huì)告訴你們微信號(hào)就是我本人手機(jī)號(hào)的，如果大家有什么更好的解決辦法歡迎回帖趣避，希望這篇文章能夠幫到你們。
