在线流程图和思维导图开发技术详解（二）

原创 已于 2022-09-20 16:14:53 修改 · 1k 阅读 · 3 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#流程图 #思维导图 #脑图

于 2022-09-20 15:58:01 首次发布

一、项目概述

二、项目架构

三、几何计算难点

四、鼠标事件处理

五、数据保存与导出

六、文本处理

二、项目架构

2.1 系统架构

项目系统架构如下图所示：

  1. UI元素即HTML DOM元素。项目打开时，画面虽然是一片空白的，但实际上UI元素并不空白。一些可复用不需动态创建的元素可预先定义好。例如选择框、对齐线等，出现的时候它们只是位置发生了改变，不需动态创建，可预先定义好，节省开销。

  2. UI元素使用ID标注（Vue里使用ref），然后注册到UI管理

最低0.47元/天 解锁文章
在线流程图和思维导图开发技术详解（一）
lweiyue的专栏
09-20 3065
本项目的最终结果是一个同时具有流程图和思维导图功能的Web版制图软件。能够制作出如下图所示的图：项目具有以下的一些功能：类似软件的常规功能：元件库、分组管理、层次管理、锁定管理、图形样式、文字样式、连接线样式等。用户可添加自定义图片，包括png、jpg、gif、svg等格式，以及一种项目自定义的格式。流程图和思维导图可同时在一个页面中完成编辑。思维导图可变换左侧、右侧、底部、双侧等模式。整图转换为png、svg、jpg等格式。文本支持内部多种样式。
在线流程图和思维导图开发技术详解（三）
lweiyue的专栏
09-20 2319
例如在不保持比例的情况下，只要拖动位置跟“左”有关的，矩形的x坐标和宽度都要修改，而跟“右”有关的，只要修改宽度即可。在计算之前，整棵树的大小是未知的，树摆放在哪里不好把握。我们一开始计算的时候，会假定根节点的坐标是(0,0)，然后计算出每个节点的相对坐标。以内部矩形的左上角为例，L1、L2为组矩形的长和宽，l1、l2是左上角点在两条边上的投影点距离组矩形原点的距离。旋转矩形的描述是rect(x,y,width,height,angle)，直接给定一个鼠标点P(x,y)，无法判断这个点跟旋转矩形的关系。
移动开发思维导图
01-20
一个学习Android的思维导图，只要从环境搭建、Android基础知识、用户界面优化、系统功能、数据存储、网络通信、混合编程、主流开源库深度部析、NFC应用开发、Android测试、实战开发
开发思维导图
weixin_34208185的博客
08-22 851
今天在网上搜到几个开发思维导图，在这记录一下 转载于:https://www.cnblogs.com/johnnyC/p/9517389.html
开发思维导图用这个工具就够了
非著名程序员
08-03 1331
【公众号回复 “1024”，免费领取程序员赚钱实操经验】大家好，我是你们的章鱼猫。今天要推荐一个免费开源的思维导图工具库：Mind elixir，开发思维导图用它就够了。我们来先看一下效...
在线流程图和思维导图开发技术详解（四）
lweiyue的专栏
09-20 503
当鼠标按下时，我们需要判断按下的地方是在图元上（实际上还要分是否选中、是否锁定等情况）还是在空白的地方。最后鼠标弹起，完成一次事件。在所有处理器中，鼠标事件处理器是最为复杂的，因为在整个页面中，基本可以使用鼠标完成所有功能。除此之外，鼠标的动作还需要配置辅助键，例如CTRL和SHIFT，在拖动图元变换时会用到这两个键。每个动作之后，只需要对当前动作作出处理（例如改变光标、记录当前位置等），然后改变状态即可。可以看到，对于上面的动作，如果不断使用if/else去处理，这个代码层次将会非常多和冗长，难以管理。
在线流程图和思维导图开发技术详解（五）
lweiyue的专栏
09-20 748
最新的操作会被撤销，恢复操作之前的流程图。有一种方式是，保存一张初始图，然后把每次的操作都记录下来。还有一种方法，也是本项目所采用的方法，就是把所有图元的信息保存起来，序列化成一个字符串。当需要撤销时，从Stack里取出字符串，反序列化成图元信息，覆盖当前的图元信息，重新加载和渲染。在上一节中，我们已经提到，在数据保存时，svg数据也保存了下来。当存在图片时，img引用一个svg，svg又引用一张图片，就会显示不出现。项目后端使用.NET开发，在NuGet中引用一个名为Svg的库，即可实现svg的转换。
求javascript牛人协助开发在线版思维导图
weixin_34342578的博客
09-17 136
2019独角兽企业重金招聘Python工程师标准>>> ...
思维导图开发过程应用
开发学习过程中一点经验积累
03-15 2320
思维导图作为项目开发过程日志，进度记录，目标制定，问题分解，任务分解，问题分析过程记录
基于VUE使用Hbuilder工具开发的思维导图工具
Crazydoubao的博客
12-10 1369
最近接触了VUE，发现还挺好上手，所以本文基于VUE开发的思维导图工具，是结合时下最流行的思维导图模式开发的，可移动使用的工具。话不多说，界面如下： 主要实现核心代码如下： <template> <view class="body"> <view class="header"> <view style="margin-left: 5px;margin-top: 5px;width: 95%;display:inline-block.
免费在线思维导图工具mindv说明书
09-11
什么是MindV MindV是一款思维导图(心智图)工具。世界500强企业内部一直使用思维导图来提升员工的创造力。现在越来越多的人开始学习思维导图，学习这种21世纪的思维方式，引爆自己的灵感，提升自己的创造力，来改变自己，改变一个企业，甚至一个国家的竞争力。 MindV使用跨浏览器、跨平台的silverlight 4 技术开发，可以在所有流行的浏览器中运行。用户第一次在浏览器中点击链接运\行mindv时，如果您的机器没有安装 Silverliht 4,系统会提示您从微软网站下载并安装Silverlight 4；您只需按照提示一步一步执行；安装完Silverlight 4，MindV就可以运行了。 Mindv的部署:目前有两个网站提供用户注册,登录，购买,帮助等服务及并在主页提供运行Mindv的链接: mindv中国:http://www.mindv2.com/ 适合中国大陆人士为简体版本. mindv国际:http://www.mindv.com/ 适合中国大陆以外地区用户,为英语与繁体中文双语版本. 而Mindv应用本身部署在网站外的微软云计算平台中. 较本网站运\行更快速,为用户提供更稳健的服务和数据安全保护。 MindV可以帮我做些什么？ 新的文档工具： MindV简单讲是一款新的文档工具，是Word，PPT，Excel之外另一种记录文档的工具。会议要点，各种提纲，读书笔记，整理思路，各种组织结构图等；文件格式符合Open XML规范；可以嵌入多媒体，超级链接，附件文档。 管理创意和设计：随时随地记录你的创意，将你的设计工作记录保存到本地或更为安全的云中。 解决每天的问题：将问题的各个组成部分可视化地列出，并深入研究它们之间的关系，找出一个创意的方案。 项目管理：从项目的开始到完成，都可以通过工具快速方便地设计和改进。 管理任务和优先级： 将任务划分成可管理的分任务，快速和方便地按照优先级排列。 可视化的教与学 ：采用多媒体技术展示知识；方便学生记录学习重点。 团体合作与分享 ：好的创意可以分享，用户可以将思维导图保存在云文件夹中并以网址的形式发布或者直接嵌入到网页中；团队成员可以就一个问题分别发表高见
前端思维导图及笔记
01-26
整理一些前端的框架笔记思维导图，喜欢的朋友可以来下载
超详细Ajax.xmind思维导图
02-27
什么是AJAX？Ajax运行原理？XMLHttpRequest 基础知识？什么是跨域访问？跨域访问的解决方法？如何拼接多个html文件？JQ Ajax的方法？
【思维导图】软件开发工具
lyn
09-27 806
【前言】    之前一直都看不进去书，好吧，现在也看不进去。可是不看也不行啊，方正也要总结，那就之间画成思维导图吧。有些知识点写得太细的，觉得已经不能叫思维导图。下面直接上图。 第一章 第二章 第三章 第四章 第五章 第六章 【总结】    学习的时候总是说要形成知识网，怎么才能形成那，我们可以先去找本章的关系，然后再去找整
信息系统开发思维导图
Kelly成长之路
10-18 1758
使用vue3和svg画布标签实现一个思维导图功能的开发
m0_54050217的博客
09-26 5015
SVG是一种用XML定义的语言，用来描述二维矢量及矢量或栅格图形。SVG提供了3种类型的图形对象，矢量图形、图象、文本。SVG是一种图像文件格式，它的英文全称为，意思为可缩放的矢量图形。矢量图，也称为面向对象的图像或绘图图像，在数学上定义为一系列由线连接的点。矢量文件中的图形元素称为对象。每个对象都是一个自成一体的实体，它具有颜色、形状、轮廓、大小和屏幕位置等属性。XML是一套定义语义标记的规则，这些标记将文档分成许多部件并对这些部件加以标识。
vue3使用simple-mind-map，分分钟开发思维导图
最新发布
qq_31676725的博客
08-24 1万+
思维导图？感觉很复杂的样子，这种很牛p的东西应该不是我三两天就能手写搞定的，于是我`github`转了一圈，果然不出我所料，对比了几个插件以后我是先选择了它
4.2-软件开发中，“思维导图”的作用与绘制方法介绍
Robert Zhang
04-02 3334
一、怎样从”需求“转变为”软件功能“呢？ 做一个软件，你肯定是有一个明确的想法或需求，比如你是外包公司接了一个甲方的需求，或者领导和你说要做一个做软件，并告诉了你基本的需求。需要你根据这个“需求”设计出软件的“具体实现功能”。这个时候，就需要你根据对需求的理解，并结合软件开发的知识来设计软件的功能。 具体怎样设计呢？总不能仅仅在脑子里想一想吧。因此，你需要把每个需求点对应的软件设计写下来。一般是用...
思维导图APP开发独立源码部署
sidu666的博客
01-18 1149
思维导图APP开发，思维导图APP开发独立源码部署。思维模式决策了为人处事的高效率，逻辑思维导图给很多人产生过益处，乃至可以说成取得成功的重要。逻辑思维导图APP不但能让用户线上开创观念导图，还可以把笔记开展收拾归类，让作业越来越更加便捷。 逻辑思维导图APP开发设计功能特点 1、新创建笔记：用户可以在系统软件中新创建笔记，应用起来十分简单，用户可以提升平级节点，也可以提升子级节点。一般用户较多能开创50个节点，能面对一般的要求。 2、收拾笔记：在逻辑思维导图中，用户可以随便拖移节点来开展挪动，适用刺
Web开发思维导图详解
“Web思维导图”这一主题涵盖了现代Web开发的全貌，从基础技术到高级架构设计，体现了系统化、结构化的知识体系。该文件以“web.mindnode”为唯一子文件名，表明其使用的是MindNode等专业的思维导图工具所创建的可视...
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值