仿“易企秀”编辑器之拖拉拽

baishancloud 发布于2019-08-01 17:48 / 2981人阅读

摘要：概述最近心血来潮，想仿造一下易企秀，做一个新的编辑器。选择易企秀，而不是互动大师，主要是因为易企秀的技术难度比较低，编辑器的核心部分，如果全职开发，估计一个月就做完了。

概述

最近心血来潮，想仿造一下易企秀，做一个新的编辑器。主要是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拖拽编辑器拖拉拖拉表格

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/51384.html

仿“易企秀”编辑器之拖拉拽

摘要：概述最近心血来潮，想仿造一下易企秀，做一个新的编辑器。选择易企秀，而不是互动大师，主要是因为易企秀的技术难度比较低，编辑器的核心部分，如果全职开发，估计一个月就做完了。概述 showImg(https://segmentfault.com/img/bVWSA1?w=1122&h=921); 最近心血来潮，想仿造一下易企秀，做一个新的编辑器。主要是3年前那个编辑器有些自动化方面和动画性...

gghyoo 2019-08-21 17:07 评论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