在线流程图和思维导图开发技术详解(六)
一、项目概述
二、项目架构
三、几何计算难点
四、鼠标事件处理
五、数据保存与导出
六、文本处理
六、文本处理
6.1 两种富文本展示方式
本项目显示的文本皆是富文本,也就是在一个框里面,文本有多种样式。如下图所示:
在前端展示富文本有两种方式,一是HTML,二是SVG。在本项目,两种方式都用到了。因为有以下场合的技术制约:
SVG文本不可编辑。
导出SVG文件之后,HTML文本无法显示。
这两个需求都是必须的。那么,就存在两种方式的转换方式,这是一个难点。
6.2 富文本编辑
在一个div中启用contenteditable属性之后,它就成为了一个富文本编辑框。结合execCommand,可以实现丰富的文本样式。遗憾的是,execCommand已经被标注为废弃。而且,这种方式也存在着缺陷:
自动产生u、font等标签,同样被标注为废弃。
字体大小只有7档,1代码9px,2代表12px,3代表16px……连常用的14px都表示不出来。
目前没有很好的解决方案,网上的开源富文本编辑控件都比较复杂,有点大材小用。
所以,本项目实现了execCommand替代方案。
在替代方案中,标签不再使用b、u、font等,而只使用div和span。而字体也就恢复正常,使用px,多少px都可以。
这个实现还是很复杂的,大致流程如下:
找到选中的内容。通过document.getSelection获取选中部分。
扫描整个根div,生成一个节点树,标注每个节点的字体信息,以及选中信息。有人可能会问,为什么要扫描整个根div,而不只是选中的部分呢?那是因为当改变字体之后,原来的节点可能要分成多个节点,也可能合并成一个节点。
改变选中节点的选中信息。
合并相同字体的部分。例如,假设原来有
<span style="font-size:14px">文字1<span><span style="font-size:18px">文字2<span>
,当我们把文字2的字体大小改为14px之后,它就跟文字1一样了,两段文字没必要用两个span,合在一起即可。重新组建div内容。把节点树转换成div。
恢复选中位置。原来选中哪些部分,现在还要选中哪些部分。这也是很困难的,因为有些节点已经合并或分裂,选中的位置信息需要更新。
通过上面的步骤,即可实现富文本编辑。
6.3 HTML文本转SVG文本
在HTML中,使用div和span标签包围文本;而在SVG中,使用text和tspan标签包围文本。两者在样式的写法上基本相同,唯一需要注意的是HTML中的color需要转成SVG里的fill。最大的难点是换行问题。
在HTML中,给定一个文本范围,超长的文本会自动换行。但在SVG中,文本是不会换行的,只会超出后被裁剪。那么,原来一行的HTML文本,在SVG中可能要用两个tspan。需要怎样判断一行换行了,还有是在哪里换行呢?方法是有,但比较复杂。步骤如下:
对于一行文本,一个字一个字地选中。
通过getBoundingClientRect,获取每个文字范围的矩形框。我们要用到的是y和height。
记录前一个字符的y+height,当下一个字符的y+height跟前者不一样时,可以判定为换行了。
在线流程图和思维导图开发技术详解(六)相关推荐
- 在线流程图和思维导图开发技术详解(三)
一.项目概述 二.项目架构 三.几何计算难点 四.鼠标事件处理 五.数据保存与导出 六.文本处理 三.几何计算难点 3.1 矩形变换 我们先来看没有旋转的情况.不旋转的情况是比较简单的,只是情况比较多 ...
- 在线流程图和思维导图开发技术详解(二)
一.项目概述 二.项目架构 三.几何计算难点 四.鼠标事件处理 五.数据保存与导出 六.文本处理 二.项目架构 2.1 系统架构 项目系统架构如下图所示: UI元素即HTML DOM元素.项目打开时, ...
- 在线流程图和思维导图开发技术详解(五)
一.项目概述 二.项目架构 三.几何计算难点 四.鼠标事件处理 五.数据保存与导出 六.文本处理 五.数据保存与导出 5.1 数据保存 一张流程图,实际是一个图元列表,也就是Array<Comp ...
- 在线流程图和思维导图开发技术详解(四)
一.项目概述 二.项目架构 三.几何计算难点 四.鼠标事件处理 五.数据保存与导出 六.文本处理 四.鼠标事件处理 在所有处理器中,鼠标事件处理器是最为复杂的,因为在整个页面中,基本可以使用鼠标完成所 ...
- 推荐一个在线创作流程图、思维导图软件—ProcessOn
转载自 推荐一个在线创作流程图.思维导图软件-ProcessOn 最近要画流程图,破解了半天Visio2016没搞定,2016的估计都被封了,Visio收费又过贵,又不想折腾低版本的破解,所以找了个在 ...
- 推荐一个在线绘图工具ProcessOn----支持流程图、思维导图、UML等
我们常用来绘制流程图等的工具一版会使用visio等,但是它是一款收费软件,而且不是太易用,今天推荐一款在线绘图工具ProcessOn,不仅功能强大,而且快捷易用,还有大量优秀的模板可供使用. 邀请连接 ...
- 免费在线作图,思维导图,流程图,实时协作
www.processon.com 免费在线作图,思维导图,流程图,实时协作
- 流程图、思维导图、网络拓扑图、组织结构图——ProcessOn在线工具及增加文件数方法
可网页在线画流程图之类的,还有模版可以参考. ProcessOn 支持流程图.思维导图.原型图.UML.网络拓扑图.组织结构图等 ProcessOn在线工具: https://www.processo ...
- confluence 制作流程图_「每周开方」 高效制作流程图、思维导图
提升工作效率,并且可以自成一套职场PPT的导图.流程图! 这周的「每周开方」公子要分享强大的"思维导图"及"流程图"制作网站!在职场中导图的重要性应该不需要公子 ...
最新文章
- java鉴权_一个开箱即用的高效认证鉴权框架,专注于restful api的认证鉴权动态保护...
- 如何让fragment每次都重新加载_每次都能正确判罚丨网球是如何电子化的
- 在SQL 2005中用T-SQL插入中文数据时出现的问号或乱码的解决方案[转]
- 苹果认输!组装iPhone,富士康工人比机器好多了
- Java Web 开发必须掌握的三个技术:Token、Cookie、Session
- Java:使用Executors创建和管理线程
- 如何定义一个 Listint,string 这样的 List ?
- C++ opengl 启动光照
- 剑指offer——python【第54题】字符流中第一个不重复的字符
- word中装订线位置_Word操作技巧:Word文档双面打印全攻略,解决打印难题
- 1.Hbase集群安装配置(一主三从)
- camtasia喀秋莎2022(屏幕录像课件制作工具)
- 油猴子 Tampermonkey
- vue按住shift键多选(以element框架的table为例)
- kubectl 命令详解(三十三):rollout resume
- 如何把windows锁屏画面提取成JPG图像,并作为桌面壁纸
- [Unity3D]Unity3D游戏开发之从《魂斗罗》游戏说起(上)——目标追踪
- 记忆测试系统java代码_JAVA课程设计——记忆测试系统(附源程序).doc
- STM32电路原理图
- Linux--内核版本和发行版本