资讯专栏INFORMATION COLUMN

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

baishancloud / 2889人阅读

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

概述

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

大功告成,有什么遗漏的,希望搞过这方面的大牛一起来探讨。

下一篇文章,写下这个编辑器用到的设计模式吧。

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

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

相关文章

  • 仿企秀辑器拖拉

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

    gghyoo 评论0 收藏0
  • 仿企秀辑器拖拉

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

    jkyin 评论0 收藏0
  • vue应用产品iShow H5辑器

    摘要:地址文档网站在线地址今年年初,开始断断续续打磨自己的编辑器,到现在也有半年有余。目前是版本,后续会不断完善,也欢迎大家贡献自己的想法,共同进步。 github地址:https://github.com/qiuyaofan/iShow 文档:https://qiuyaofan.github.io/iShow/ 网站在线地址:https://qiuyaofan.github.io/is...

    W_BinaryTree 评论0 收藏0
  • react+mobx 构建H5制作工具项目经验总结

    摘要:三性能优化处理做工具类的项目,性能是非常大的挑战,我总结了以下几个常见的性能优化点数据缓存。防抖,节流,事件委托内存释放。 内容大纲: 1、功能介绍 2、技术架构 3、性能优化 4、细节分享 5、开源说明 一、项目功能介绍 很久没写过技术类的文章了,这次给大家分享一个近期的项目,采用react+mobx+jquery构建的大型工具类项目。查看项目网址。 如果用过易企秀,maka或者...

    Ilikewhite 评论0 收藏0
  • react+mobx 构建H5制作工具项目经验总结

    摘要:三性能优化处理做工具类的项目,性能是非常大的挑战,我总结了以下几个常见的性能优化点数据缓存。防抖,节流,事件委托内存释放。 内容大纲: 1、功能介绍 2、技术架构 3、性能优化 4、细节分享 5、开源说明 一、项目功能介绍 很久没写过技术类的文章了,这次给大家分享一个近期的项目,采用react+mobx+jquery构建的大型工具类项目。查看项目网址。 如果用过易企秀,maka或者...

    用户84 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<