這篇文章主要介紹小程序中如何實(shí)現(xiàn)canvas的拖拽功能，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

創(chuàng)新互聯(lián)建站是一家集網(wǎng)站設(shè)計(jì)、成都網(wǎng)站設(shè)計(jì)、網(wǎng)站頁(yè)面設(shè)計(jì)、網(wǎng)站優(yōu)化SEO優(yōu)化為一體的專業(yè)的建站公司，已為成都等多地近百家企業(yè)提供網(wǎng)站建設(shè)服務(wù)。追求良好的瀏覽體驗(yàn),以探求精品塑造與理念升華,設(shè)計(jì)最適合用戶的網(wǎng)站頁(yè)面。 合作只是第一步，服務(wù)才是根本,我們始終堅(jiān)持講誠(chéng)信，負(fù)責(zé)任的原則，為您進(jìn)行細(xì)心、貼心、認(rèn)真的服務(wù),與眾多客戶在蓬勃發(fā)展的市場(chǎng)環(huán)境中,互促共生。

如何實(shí)現(xiàn)

1. 使用canvas

2. 使用movable-view標(biāo)簽

由于movable-view無(wú)法實(shí)現(xiàn)旋轉(zhuǎn)，所以選擇使用canvas

需要解決的問(wèn)題

• 如何將多個(gè)元素渲染到canvas上

• 如何知道手指在元素上、如果多個(gè)元素重疊如何知道哪個(gè)元素在最上層

• 如何實(shí)現(xiàn)拖拽元素

• 如何縮放、旋轉(zhuǎn)、刪除元素

看起來(lái)挺簡(jiǎn)單的嘛，就把上面這幾個(gè)問(wèn)題解決了，就可以實(shí)現(xiàn)功能了；接下來(lái)我們一一解決。

如何將多個(gè)元素渲染到canvas上

定義一個(gè)DragGraph類，傳入元素的各種屬性（坐標(biāo)、尺寸…）實(shí)例化后推入一個(gè)渲染數(shù)組里，然后再循環(huán)這個(gè)數(shù)組調(diào)用實(shí)例中的渲染方法，這樣就可以把多個(gè)元素渲染到canvas上了。

如何知道手指在元素上、如果多個(gè)元素重疊如何知道哪個(gè)元素在最上層

在DragGraph類中定義了判斷點(diǎn)擊位置的方法，我們?cè)赾anvas上綁定touchstart事件，將手指的坐標(biāo)傳入上面的方法，我們就可以知道手指是點(diǎn)擊到元素本身，還是刪除圖標(biāo)或者變換大小的圖標(biāo)上了，這個(gè)方法具體怎么判斷后面會(huì)講解。

通過(guò)循環(huán)渲染數(shù)組判斷是非點(diǎn)擊到哪個(gè)元素到，如果點(diǎn)擊中了多個(gè)元素，也就是多個(gè)元素重疊，那第一個(gè)元素就是最上層的元素啦。

如何實(shí)現(xiàn)拖拽元素

通過(guò)上面我們可以判斷手指是否在元素上，當(dāng)touchstart事件觸發(fā)時(shí)我們記錄當(dāng)前的手指坐標(biāo)，當(dāng)touchmove事件觸發(fā)時(shí)，我們也知道這時(shí)的坐標(biāo)，兩個(gè)坐標(biāo)取差值，就可以得出元素位移的距離啦，修改這個(gè)元素實(shí)例的x和y，再重新循環(huán)渲染渲染數(shù)組就可以實(shí)現(xiàn)拖拽的功能。

如何縮放、旋轉(zhuǎn)、刪除元素

這一步相對(duì)比較難一點(diǎn)，我會(huì)通過(guò)示意圖跟大家講解。

我們先講縮放和旋轉(zhuǎn)

通過(guò)touchstart和touchmove我們可以獲得旋轉(zhuǎn)前的旋轉(zhuǎn)后的坐標(biāo)，圖中的線A為元素的中點(diǎn)和旋轉(zhuǎn)前點(diǎn)的連線；線B為元素中點(diǎn)和旋轉(zhuǎn)后點(diǎn)的連線；我們只需要求A和B兩條線的夾角就可以知道元素旋轉(zhuǎn)的角度?？s放尺寸為A和B兩條線長(zhǎng)度之差。

計(jì)算旋轉(zhuǎn)角度的代碼如下：

const centerX = (this.x + this.w) / 2;  // 中點(diǎn)坐標(biāo)
const centerY = (this.y + this.h) / 2;  // 中點(diǎn)坐標(biāo)

const diffXBefore = px - centerX;   // 旋轉(zhuǎn)前坐標(biāo)
const diffYBefore = py - centerY;   // 旋轉(zhuǎn)前坐標(biāo)
const diffXAfter = x - centerX;     // 旋轉(zhuǎn)后坐標(biāo)
const diffYAfter = y - centerY;     // 旋轉(zhuǎn)后坐標(biāo)

const angleBefore = Math.atan2(diffYBefore, diffXBefore) / Math.PI * 180;
const angleAfter = Math.atan2(diffYAfter, diffXAfter) / Math.PI * 180;

// 旋轉(zhuǎn)的角度
this.rotate = currentGraph.rotate + angleAfter - angleBefore;

計(jì)算縮放尺寸的代碼如下：

// 放大 或 縮小
this.x = currentGraph.x - (x - px);
this.y = currentGraph.y - (x - px);

以上是“小程序中如何實(shí)現(xiàn)canvas的拖拽功能”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

網(wǎng)頁(yè)標(biāo)題：小程序中如何實(shí)現(xiàn)canvas的拖拽功能
分享URL：http://jinyejixie.com/article14/peocge.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供建站公司、ChatGPT、域名注冊(cè)、電子商務(wù)、網(wǎng)站設(shè)計(jì)、網(wǎng)站設(shè)計(jì)公司

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)