仿「易企秀」編輯器之拖拉拽

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

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

轉回正題。拖拉拽，說白了，就是三個事件組成，mousedown,mousemove,mouseup。

mousedown的時候，記錄點選的元素，空白處？某個元素的旋轉點，縮放點還是移動的區域？假設使用者點選了旋轉點，那麼記錄下要旋轉的元素，元素的中心點，然後mousemove的時候根據中心點和當前滑鼠的位置，計算出角度，然後渲染新的角度到介面上。以此類推，移動和縮放也是差不多的，只是細節邏輯不一樣。

mousemove的時候，主要是為了實時渲染拖拉拽的結果，包括移動的時候要吸附參考線。

mouseup的時候，清除mousedown的時候記錄的一些變數。

拖拉拽，其實難的是效能處理，尤其是移動端。要是乙個場景裡面幾百個元件，移動端就很痛苦了。

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

假如沒有使用事件委託，那麼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) =>
this._debounce.handle(()=>）;
}); 

要相容移動端，那麼就是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
()

易企秀12 4 模板編輯無法刪除頁面問題分析

今天碰到乙個朋友 說，他在使用易企秀編輯模板時，想刪除場景的某個頁面，刪除後，儲存發布後，又顯示出來了，問我怎麼解決。首先，我們來看下，執行刪除動作的 易企秀會員表有這樣的乙個設定，普通會員與鑽石會員 字段 level int 對應的後面管理是，使用者許可權，普通與修改模板頁，對應值 0，4 從 中...

使用編輯之vim編輯器

一，安裝vim基礎包 sudo apt get install vim 二，vim基礎 1.兩種模式 普通模式和插入模式。在普通模式中，vim編輯器會將按鍵解釋成命令。在普通模式下，可以通過按下i或者a進入插入模式，按esc鍵回到普通模式。2.普通模式下的一些快捷使用鍵 h 左移乙個字元 j 下移一...

vi編輯器之問答

本文以問答的形式對vi編輯器進行認識 熟悉和使用。適合vi初學者 入門者閱讀。更多vi深入的東西請參考其它文件。vi 編輯器是visual inte ce的簡稱，是linux和unix上最基本的文字編輯器。能對文字進行輸出 刪除 查詢 替換 塊操作等多種操作，類似與windows上的notepad ...