微信小程序canvas拖拽、截圖組件功能-創(chuàng)新互聯(lián)

先看下微信小程序canvas拖拽功能

成都創(chuàng)新互聯(lián)堅持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：成都網(wǎng)站設(shè)計、做網(wǎng)站、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時代的雙清網(wǎng)站設(shè)計、移動媒體設(shè)計的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！

組件地址

github.com/jasondu/wx-… readme近期補上

實現(xiàn)效果

如何實現(xiàn)

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

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

需要解決的問題

  • 如何將多個元素渲染到canvas上
  • 如何知道手指在元素上、如果多個元素重疊如何知道哪個元素在最上層
  • 如何實現(xiàn)拖拽元素
  • 如何縮放、旋轉(zhuǎn)、刪除元素

看起來挺簡單的嘛，就把上面這幾個問題解決了，就可以實現(xiàn)功能了；接下來我們一一解決。

如何將多個元素渲染到canvas上

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

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

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

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

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

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

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

這一步相對比較難一點，我會通過示意圖跟大家講解。

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

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

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

const centerX = (this.x + this.w) / 2; // 中點坐標(biāo)
const centerY = (this.y + this.h) / 2; // 中點坐標(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;

本文名稱：微信小程序canvas拖拽、截圖組件功能-創(chuàng)新互聯(lián)
文章地址：http://muchs.cn/article28/csjpcp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站導(dǎo)航、云服務(wù)器、做網(wǎng)站、網(wǎng)站維護(hù)、移動網(wǎng)站建設(shè)、企業(yè)網(wǎng)站制作

廣告

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

手機網(wǎng)站建設(shè)