仿“易企秀”编辑器之拖拉拽
概述
最近心血来潮,想仿造一下易企秀,做一个新的编辑器。主要是3年前那个编辑器有些自动化方面和动画性能方面的缺陷吧,人生不能有遗憾就早早动手吧。选择易企秀,而不是互动大师,主要是因为易企秀的技术难度比较低,编辑器的核心部分,如果全职开发,估计一个月就做完了。如果是互动大师,业余时间开发根本估计核心部分都够呛。核心部分包括拖拉拽,组件生命周期,场景增删改,工程增删改,完善的组件事件通信机制,撤销恢复还有动画编辑。
有兴趣的朋友可以进 github 看看。里面有在线演示的地址。该项目还在持续开发中,轻拍,别打脸。
拖拉拽的核心原理
不同的编辑器,不管怎么样,拖拉拽的业务逻辑一定要自己写,这是血的教训。两年前,接手一家公司的编辑器,那个编辑器的核心部分是用某个开源项目的,性能有问题,核心元数据的数据结构也有问题。重构了几次,才契合当时公司的业务。
转回正题。拖拉拽,说白了,就是三个事件组成,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) => {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/qq386232894/h5-editor
大功告成,有什么遗漏的,希望搞过这方面的大牛一起来探讨。
下一篇文章,写下这个编辑器用到的设计模式吧。
转载于:https://www.cnblogs.com/geilishu/p/7677949.html
仿“易企秀”编辑器之拖拉拽相关推荐
- 最新鲁班H5页面生成工具系统源码+功能强大/仿易企秀
正文: 最新鲁班H5页面生成工具系统源码+功能强大/仿易企秀,这系统的功能真的非常强大,都是主流很高级的一些技术开发的. Vue2.0开发,通过拖拽的形式,生成页面的工具,类似易企秀.百度H5等工具. ...
- h5制作 php 开源,PHP源码:2019最新仿易企秀V15.1完整版开源版源码,修复采集功能、新增同行站模板采集等...
源码说明: 更新功能如下: 新增同行站模板采集 修复模板中心采集方法 修复自定义场景加载LOGO问题 预览H5不在是默认封面加载 可以自定义自己的网站LOGO 安装说明: 把源码包上传到网站根目录 然 ...
- 易企秀 伪静态 linux,最新仿易企秀V15.1完整版开源版源码分享,修复采集功能,新增同行站模板采集功能等等...
源码说明:0 j; j/ T/ g! d* a& [ 易企秀是一款针对移动互联网营销的手机网页DIY制作工具,用户可以编辑手机网页,分享到社交网络,通过报名表单收集潜在客户或其他反馈信息.用户 ...
- html5互动场景制作系统,春哥技术博客高仿易企秀H5场景应用制作平台源码V1.0正式版发布...
经过一个月的艰苦努力,春哥团队最新作品即将与大家见面了,<2015年6月春哥技术博客高仿易企秀H5场景应用制作平台源码V1.0正式版>即将来临, 现在春哥接受预定啦,春哥技术博客依然走价格 ...
- java 仿易企秀_鲁班H5(开源可视化搭建系统, 可以理解为开源版本易企秀)核心实现原理解析...
鲁班H5核心原理解析(开源版本的拖拽生成H5平台,功能类似易企秀的开源可视化搭建系统) 相关地址 鲁班H5是什么? 鲁班H5是基于Vue2.0开发的,通过拖拽的形式,生成页面的工具,类似易企秀.百度 ...
- 易企秀源码html,精仿易企秀源码
源码说明: 今天带给大家的是11月最新易企秀同步官方V6.7完美商业运营版,新增完美MAKA70C多平台采集 组件采集 微信支付充值等功能! 此版本是Taobao价值1600元的版本,还有更多功能请自 ...
- 易企秀手机html5场景源码,仿易企秀V15.1手机网页DIY制作工具完整版开源版源码修复采......
源码介绍: 源码内附详细安装文档,可轻松搭建网站. 易企秀是一款针对移动互联网营销的手机网页DIY制作工具,用户可以编辑手机网页,分享到社交网络,通过报名表单收集潜在客户或其他反馈信息.用户通过易企秀 ...
- 商城、门户、微信服务平台、CMS、易企秀、红包、分销商城、游戏源代码
近期收集了一些项目源代码,共享出来供大家学习参考. 办公OA系统源码.rar: https://t00y.com/file/22083442-406735572 轻量级微信平台.rar: https ...
- [H5页面生成工具 v1.14.1] 通 过拖拽的形式生成页面的工具+类似易企秀百度H5
介绍: 鲁班H5是基于Vue2.0开发的,通过拖拽的形式,生成页面的工具,类似易企秀.百度H5等工具. 鲁班H5特征: 1.编辑器 参考线 吸附线.组件对齐 拽改变组件形状 元素: 复制(画布) 元素 ...
最新文章
- 大型网站架构演变和知识体系
- Ambari安装之部署 (Metrics Collector和 Metrics Monitor) Install Pending ...问题
- 二叉树中序遍历方法实现
- windbg 如何再内核模式调试用户空间的程序
- 分时线的9代表什么_为什么要打板?资深股民分享打板技巧和思路,句句精辟!...
- VMware Horizon虚拟桌面工具箱之审计与远程协助
- 深度学习算法和机器学习算法_啊哈! 4种流行的机器学习算法的片刻
- html5 canvas裁剪图片,html5-canvas 使用画布裁剪图像
- 基于墨刀的轻音乐播放器——乐享APP原型设计
- 安卓平板外接摄像头_华为?小米?千元安卓平板如何选择?
- eclipse远程连接hadoop_Hadoop群启集群
- 操作系统—多生产者多消费者问题
- 自动控制原理概念梳理(脑图)
- 高数复习笔记(同济 第七版 上下册)
- 中国象棋matlab
- java 中英文长度_Java 计算中英文长度的若干种方法
- 在类内调用cuda内核函数,出现的错误: illegal combination of memory qualifiers 等问题的解决
- 2018tfe世界计算机专业排名,2018年TFE TIMES美国研究生计算机科学专业排名
- 练习4-7 求e的近似值 (15分)
- VR全景电子商务方案/APP/小程序/公众号/网站
热门文章
- [MATLAB]从键盘输入一个带有字母构成的字符串,要求大写变小写,小写变大写输出。
- 服务器2008系统镜像,云服务器2008r2镜像
- jQuery 中ajax回调函数获得的数据格式问题
- 为什么我支持黄奇帆的建议,赞成取消住房公积金制度
- php: pcntl_signal信号处理
- BZOJ 1066 POJ 2711 [SCOI2007]蜥蜴
- CentOS系列之Elasticsearch(二):查询
- 香港服务器部署网站慢,用香港云主机服务器网站慢怎么解决?
- 成人世界黑话鉴定指南
- i12蓝牙耳机怎么设置成中文_windows10的蓝牙怎么打开?如何修复Windows 10中的蓝牙问题...