前言：昨天下午老大突然對(duì)我說(shuō)有這樣的一個(gè)需求可以對(duì)圖片進(jìn)行放大縮小旋轉(zhuǎn)拖拽的效果讓我進(jìn)行修改，沒有修改的時(shí)候是只有一張圖片。當(dāng)聽到這個(gè)需求的時(shí)候心里一頓慌啊，既然任務(wù)已經(jīng)下達(dá)那只有完成了然后我就在百度一頓搜啊幸好還是找到了類似的素材，接下來(lái)就是瘋狂的修改源代碼直到是我們想要的效果。今天是周六為什么今天來(lái)發(fā)表這個(gè)技術(shù)點(diǎn)呢因?yàn)樽蛱鞗]什么時(shí)間因?yàn)橐恢痹谂@個(gè)需求今天有時(shí)間我這個(gè)人啊不上班難受（可能是因?yàn)閱紊硭詿o(wú)聊）所以今天就來(lái)分享一波。

原圖

上面這個(gè)是原圖是一個(gè)模態(tài)框，可以看出只有一張圖片沒有任何其他的操作，修改之后的圖片是這樣的

修改之后的圖片

大家可以看到并沒有太大的差別只是多了幾個(gè)小圖片而已，確實(shí)沒什么太大的差別主要是加了實(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)

向左旋轉(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)

向右旋轉(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)畫采用的是css3，原來(lái)就是改變參數(shù)來(lái)控制效果

接下來(lái)我們來(lái)說(shuō)明一下這個(gè)我們想要控制img身上的東西就要加一個(gè)ref然后需要在前面聲明一下

聲明ref勇于控制img

綁定

我們發(fā)現(xiàn)每一個(gè)方法里面都有?

this.imgstyle.current!.style.transform?=?'translate(-50%?,-50%)?rotate('?+?R?+?'deg)?scale('?+?SS?+?','?+?SS?+?')'

在這個(gè)里面我們采用了ts類型斷言要不然會(huì)報(bào)這樣的錯(cuò)誤

錯(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)的，如果大家有什么更好的解決辦法歡迎回帖，希望這篇文章能夠幫到你們。