仿“易企秀”編輯器之拖拉拽

gghyoo 發布于2019-08-21 17:07 / 2056人閱讀

摘要：概述最近心血來潮，想仿造一下易企秀，做一個新的編輯器。選擇易企秀，而不是互動大師，主要是因為易企秀的技術難度比較低，編輯器的核心部分，如果全職開發，估計一個月就做完了。

概述

最近心血來潮，想仿造一下易企秀，做一個新的編輯器。主要是3年前那個編輯器有些自動化方面和動畫性能方面的缺陷吧，人生不能有遺憾就早早動手吧。選擇易企秀，而不是互動大師，主要是因為易企秀的技術難度比較低，編輯器的核心部分，如果全職開發，估計一個月就做完了。如果是互動大師，業余時間開發根本估計核心部分都夠嗆。核心部分包括拖拉拽，組件生命周期，場景增刪改，工程增刪改，完善的組件事件通信機制，撤銷恢復還有動畫編輯。

有興趣的朋友可以進 github 看看。里面有在線演示的地址。該項目還在持續開發中，輕拍，別打臉。

拖拉拽的核心原理

不同的編輯器，不管怎么樣，拖拉拽的業務邏輯一定要自己寫，這是血的教訓。兩年前，接手一家公司的編輯器，那個編輯器的核心部分是用某個開源項目的，性能有問題，核心元數據的數據結構也有問題。重構了幾次，才契合當時公司的業務。

性能優化

拖拉拽，其實難的是性能處理，尤其是移動端。要是一個場景里面幾百個組件，移動端就很痛苦了。

首先必須使用事件委托，因為事件具有冒泡機制，因此我們可以利用冒泡的原理，把事件加到父級上，觸發執行效果。這樣做的好處當然就是提高性能了。

假如沒有使用事件委托，那么100個組件，每個組件1個旋轉點，8個縮放點，1個移動點，那么就要添加800個mousedown事件。如果使用事件委托，就只要一個mousedown事件就好。

原理是用戶點擊頁面的時候，事件里有個target屬性，也就是用戶所點擊的元素，通過元素的class判斷是不是觸發點（觸發點就是移動點，旋轉點，縮放點的統稱），如果不是，就找元素的父節點，繼續判斷是不是觸發點，以此類推。一直找到document，如果沒找到觸發點，那么就是點擊了空白處，找到觸發點好辦了，就找觸發點所屬的組件。有觸發點的類型和所按下的組件，mousemove的時候就可以根據分支進行不同的處理。

晚點我在補張示意圖。

弄完事件委托，就弄函數節流了。主要是mousemove是高頻率的事件，頻率不要那么高就好了。

偽代碼如下：

private _debounce:Debounce = new Debounce(50,true);

。。。

this._mouseMoveRecycle = Renderer.addEventListener(document, "mousemove", (event: MouseEvent) => {
        if (!isMouseDown) {
          return;
        }
        this._debounce.handle(()=>{
            //處理mousemove的內容了
        }）;
});

兼容移動端

搞完功能就是兼容性了，大前端最蛋疼的就是這個了。

要兼容移動端，那么就是touchstart，touchmove，touchend三個事件了，這個網上大把教程，就不細說了。有一點要小心的，就是touchend返回的event里面，有些瀏覽器是沒有event.pageX的，如果要用到，那么就在touchmove實時記錄，touchend的時候拿來用就好了。

假如有一天你的領導說，手機移動端是能旋轉的，旋轉了之后，編輯器的組件的位置就錯亂，因為組件的位置是使用absolute沒有自適應。

示意圖如下（紅色框表示手機屏幕）：

既然看不到，我們就把編輯器根據orientation進行旋轉。變成下面的樣子，用戶不就可以繼續編輯了。

666，問題來了，而且是很大的問題。旋轉之后，整個世界的坐標系都換了。

其實只要把event.pageX和event.pageY根據window.orientation進行轉換就好。這部分當我做到移動端的時候，會補上去。

到這里就差不多了。差不多？因為有些手機瀏覽器不支持window.orientation，所以還差一步兼容處理。沒事，其實移動端屏幕旋轉的時候，會觸發resize事件，然后根據屏幕的寬高計算orientation。或者mousedown的時候，根據屏幕的寬高進行獲取。

下面是偽代碼:

//判斷瀏覽器支持window.orientation否，不支持就通過事件去獲取
window.onresize = function(){
window.orientation=(window.innerWidth > window.innerHeight)? "landscape":"portrait";  
}

github地址:https://github.com/qq38623289...

大功告成，有什么遺漏的，希望搞過這方面的大牛一起來探討。

下一篇文章，寫下這個編輯器用到的設計模式吧。

GPU云服務器云服務器易企秀 html5拖拽編輯器拖拉拖拉表格

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/89143.html

仿“易企秀”編輯器之拖拉拽

摘要：概述最近心血來潮，想仿造一下易企秀，做一個新的編輯器。選擇易企秀，而不是互動大師，主要是因為易企秀的技術難度比較低，編輯器的核心部分，如果全職開發，估計一個月就做完了。概述 showImg(https://segmentfault.com/img/bVWSA1?w=1122&h=921); 最近心血來潮，想仿造一下易企秀，做一個新的編輯器。主要是3年前那個編輯器有些自動化方面和動畫性...

baishancloud 2019-08-01 17:48 評論0 收藏0
vue應用產品之iShow H5編輯器

摘要：地址文檔網站在線地址今年年初，開始斷斷續續打磨自己的編輯器，到現在也有半年有余。目前是版本，后續會不斷完善，也歡迎大家貢獻自己的想法，共同進步。 github地址：https://github.com/qiuyaofan/iShow 文檔：https://qiuyaofan.github.io/iShow/ 網站在線地址：https://qiuyaofan.github.io/is...

W_BinaryTree 2019-08-21 16:25 評論0 收藏0
react+mobx 構建H5制作工具項目經驗總結

摘要：三性能優化處理做工具類的項目，性能是非常大的挑戰，我總結了以下幾個常見的性能優化點數據緩存。防抖，節流，事件委托內存釋放。內容大綱： 1、功能介紹 2、技術架構 3、性能優化 4、細節分享 5、開源說明一、項目功能介紹很久沒寫過技術類的文章了，這次給大家分享一個近期的項目，采用react+mobx+jquery構建的大型工具類項目。查看項目網址。如果用過易企秀，maka或者...

用戶84 2019-08-22 18:42 評論0 收藏0