可视化编辑器(可视化编辑器是干嘛的)
本文目录
基于乐吾乐meta2d从零实现可视化流程图编辑器(七)
可视化编辑器已成为前端发展趋势，相关产品层出不穷，但是用户较难根据自身需求去完整实现一个功能较为全面的可视化编辑器。本篇文章将采用乐吾乐开源的meta2d.js可视化库来实现一个简单的流程图编辑器，旨在介绍meta2d的相关功能，并向读者展示如何用meta2d从零出发搭建一个较为完整的项目。我们将在实际项目中体验meta2d的强大之处。
乐吾乐meta2d.js是集实时数据展示、动态交互、数据管理等功能于一体的全功能2D可视化引擎。它能够快速实现数字孪生、大屏可视化、Web组态、SCADA等解决方案，具有实时监控、多样、变化、动态交互、高效、可扩展、支持自动算法、跨平台等优点，能够最大程度减少研发和运维的成本，并致力于让普通业务人员无需代码开发实现物联网、工业互联网、电力能源、水利工程、智慧农业、智慧医疗、智慧城市等可视化解决方案。
乐吾乐已将meta2d核心库完全免费开源，本系列教程将基于meta2d从零实现web端可视化流程图编辑器。您可以访问GitHub上的乐吾乐meta2d开源项目地址：github.com/le5le-com/me...以及乐吾乐meta2d官方文档：doc.le5le.com/document/...
此可视化流程图编辑器的项目地址：github.com/Grnetsky/me...
在线体验地址：editor.xroot.top/
在本系列的第7篇教程中，我们将讲解setting组件框架搭建及其Map组件实现。setting组件部分包含了与设置有关的核心内容，如图纸设置、全局配置、图元外观设置、动画设置、事件设置等。我们将逐一讲解这些内容，并在讲解过程中介绍meta2d的相关API。让我们一起挖掘meta2d的潜力，用它做些了不起的东西。
基础框架搭建遵循开放封闭原则，为了最大的可扩展性与可维护性，我们所有的props都将配置在defaultsConfig文件中，并通过导入到Vue文件中进行循环渲染。首先搭建Vue部分的框架，整个setting组件分为两个大的部分：一个是为图纸服务的props（MapProps），另一个是为图元服务的props（PenProps）。每个props下面还分为几个子功能界面，因此目录结构应该为：MapProps和PenProps。
Form组件是最核心的，用于根据不同的传参渲染不同的表单。Form组件接受一个props formList用于获取外部传值，并在列表中循环渲染。我们通过间接绑定方式使用v-model指令进行数据绑定，原理是通过传参的bindProp属性获取数据源对象，通过prop属性指定数据源属性。设置好数据源后，我们就可以通过表单操作实时更新数据源，数据源来自于defaultsConfig文件中。
基础框架搭建完毕，添加功能菜单只需添加数据源并配置好传参数据即可。经过简单的样式调整，让我们先来看看Map组件的实现效果。
在上一小节中，我们实现了setting组件基本框架的搭建，并用map组件作为案例讲解了各部分作用以及它们是如何工作的。在这一小节中，我们将着手对具体功能的实现，并在实现功能中讲解meta2d的相关API。
文件名设置是较为简单的一个功能实现，只需要在表单中添加一个变量存储用户输入的文件名，并在保存时将该文件名赋值给文件。在画布相关设置中，主要涉及对工程的一些基本配置，如画布背景、画笔颜色、填充颜色、网格、标尺等。以设置画笔颜色为例，我们定义好数据源和表单数据，然后调用meta2d的setOptions方法更新配置信息。
画笔填充色的设置可以通过直接修改meta2d.store.data.xxx来实现，原理上，所有图元在渲染时会先从meta2d.store.data.xxx中获取属性，若该对象上没有该属性则会从meta2d.store.options.xxx中获取。setOptions方法的实现是将用户传入的属性通过Object.assign注册到meta2d.store.options对象上。因此，更直接的方法是直接修改meta2d.store.data.xxx，但不推荐。
更改画布背景颜色可以通过调用meta2d的setBackgroundColor方法实现，只需要在回调中调用该方法。这些功能的实现都基于对meta2d API的了解和使用，结合官方文档，我们能够更好地理解和使用这些API。
本章内容涵盖了setting组件的框架搭建、Map组件的功能实现以及对meta2d相关API的探讨。在下一章中，我们将继续深入mapProps组件的开发，完成其子组件Global（全局配置）组件的开发，重点讲解如何控制meta2d引擎的相关设置。敬请期待下次内容。
html可视化编辑器有哪些
1. Visual Studio Code
Visual Studio Code是一款功能强大的代码编辑器，适用于多种编程语言，包括 HTML。它拥有丰富的插件和扩展，能够提升HTML编辑和调试的效率。内置的代码高亮、语法检查和自动完成功能，可帮助开发者更加高效地编写代码。此外，它还支持实时预览和调试功能，让开发者能够直观地了解代码的运行状态。
2. Adobe Dreamweaver
Adobe Dreamweaver是一款专业的网页设计和开发工具，集成了代码编辑和可视化设计功能。它提供了丰富的HTML编辑工具，包括代码高亮、代码片段管理以及可视化布局设计等。支持实时预览功能，使开发者在编写代码的同时，能够实时查看页面的设计效果。此外，Dreamweaver还提供了强大的 CSS和 JavaScript支持，便于开发者构建复杂的网页应用。
3. Sublime Text
Sublime Text是一款广受欢迎的文本编辑器，也被广泛用于 HTML的可视化编辑。它具备丰富的插件和扩展，能够提供各种编程语言的开发支持，包括 HTML。Sublime Text的代码高亮、语法检查和自动完成功能，有助于提高 HTML编辑效率。其简洁易用的界面和流畅的操作，使得开发者能够快速上手并高效地进行 HTML编辑。
这些 HTML可视化编辑器各具特色和优势功能，开发者可以根据自身需求和习惯选择合适的编辑器进行 HTML开发和编辑。
什么是可视化编辑器
可视化编辑器是一种“所见即所得式”的在线多信息文本编辑工具，它允许用户在编辑维基百科等平台的内容时，无需直接编辑代码，而是通过图形界面进行操作。这种编辑方式更加直观和用户友好，可以显著降低用户学习成本。
这一工具由维基媒体基金会和Wikia共同开发，最初在2013年7月推出测试版。在默认情况下，测试版于当年启用，允许用户在Mediawiki.org和多个大型语言版本的维基百科中选择性使用这一功能。随着时间的推移，该功能逐渐成为维基百科编辑的标准工具，使得更多用户能够轻松地编辑和贡献内容。
相较于传统的代码编辑方式，可视化编辑器提供了更加丰富的功能，如插入图片、创建链接、调整文本格式等，这些操作都可以通过简单的点击和拖拽完成。这对于非技术人员来说尤其重要，因为它们能够更加轻松地参与到内容的创建和编辑中。
值得注意的是，尽管可视化编辑器极大地提高了编辑体验，但它也并非没有缺点。例如，某些高级功能仍然需要代码编辑才能实现，此外，对于那些习惯于代码编辑的用户来说，过渡到可视化编辑可能会需要一些时间来适应。
总体而言，可视化编辑器的推出和发展，标志着维基百科编辑方式的一次重要变革。它不仅提升了用户的参与度，还促进了更多人参与到知识共享的活动中来。
基于乐吾乐meta2d从零实现可视化流程图编辑器(五)
可视化编辑器已成为前端发展趋势，相关产品层出不穷，但是用户较难根据自身需求去完整实现一个功能较为全面的可视化编辑器，我将采用乐吾乐开源的meta2d.js可视化库来实现一个简单的流程图编辑器，通过这个案例来介绍meta2d的相关功能，并向读者展示如何用meta2d从零出发搭建一个较为完整的项目，让我们在实际项目中来体验meta2d的强大之处吧。
meta2d是乐吾乐开源的2D图元组成的可视化引擎，集实时数据展示、动态交互、数据管理等一体的全功能2D可视化引擎。能够快速实现数字孪生、大屏可视化、Web组态、SCADA等解决方案。具有实时监控、多样、变化、动态交互、高效、可扩展、支持自动算法、跨平台等特点，最大程度减少研发和运维的成本，并致力于普通业务人员 0代码开发实现物联网、工业互联网、电力能源、水利工程、智慧农业、智慧医疗、智慧城市等可视化解决方案。
乐吾乐已将其meta2d核心库完全免费开源，本系列教程就是基于meta2d从零实现web端可视化流程图编辑器。
乐吾乐 meta2d开源项目地址： github.com/le5le-com/me...
乐吾乐 meta2d官方文档： doc.le5le.com/document/...
此可视化流程图编辑器项目地址： github.com/Grnetsky/me…
在线体验地址: editor.xroot.top/
在这一章我们讲解Nav组件的相关功能实现，就目前的需求来看，需要实现文件的创建保存加载，放大镜、缩略图、钢笔铅笔的功能，其实这些功能的实现都非常简单，基本上都是调用meta2d提供的API即可，接下来让我们来看看这些功能如何实现吧。
文件保存的本质就是将画布的数据进行本地储存，存储方式文保存为json文件，meta2d提供了data方法，用于返回画布的相关数据信息返回数据格式json对象，我们只需要将拿到的数据通过浏览器提供的API进行本地保存即可。
在defaultConfig.js中创建saveFile函数，函数内容如下：
通过meta2d提供的data方法我们可以轻松拿到图纸数据，具体有哪些数据呢？我们来看看官方文档，这些数据统称为Meta2dData数据，表示为meta2d的数据格式，当然这些数据暂时看不懂也没关系，我们只需要知道它提供了一种数据格式用于和meta2d核心库进行交互即可。通过上面方法，最终我们得到了一个json文件，该文件中记录了图纸的所有信息，文件保存的功能就得以实现了。
让我们看看效果：
可以看到数据文件被下载到本地成功，当然，具体文件名可以用一个参数去控制，有需求的可以自己去实现。
meta2d提供了open方法用于加载图纸数据，该方法接受两个可选参数，第一个是Meta2dData对象，也就是保存数据时候的带有特定属性的json数据，第二个是布尔值，表示加载完成后是否重新渲染界面，默认为true，当然，你也可以什么参数都不传，他执行的效果就是创建一个新的画布。文件加载到的第一步就是需要拿到文件引用，在浏览器中获取有三种方式，一是通过拖拽，监听drag事件在事件对象中拿到文件引用，二是通过input标签，在回调中拿到文件引用，三是通过挂载到window上的showOpenFilePicker方法，通过异步方式拿到文件引用。前两种方案我们用的特别多，在这里我们尝试一下第三种方式。
通过showOpenFilePicker方法，就能够打开系统级文件选择器，关于此API的使用，这里不做讨论，有需要的请移步相关文档，该异步方法返回一个句柄数组，该文件句柄数组中包含了所选择的文件引用，通过句柄的getFile方法就能够拿到文件的file对象，通过text方法返回了文件的字符串形式，最终再将字符串进行反序列化生成json对象，该对象就是Meta2dData对象，将该对象传递给meta2d的open方法，最后就成功加载图纸文件了，让我们来看看实际效果。
打开文件的功能也就完成啦，当然，这里只是实现了基本功能，关于该功能的完整细节还有很多事要做，比如打开后是否对上一个图纸进行保存？是否应该清理本地缓存等？这些操作需要结合相关业务需求进行定制，在这里我们只针对该项目更多偏向主要功能的开发。
有了前面的基础，新建文件功能就简单多啦，前面说到，meta2d提供了一个open函数用于打开指定文件，但是当不给该函数传参时，就默认新建一个文件，所以在新建功能的开发上，目前只需要调用其open函数即可
来看看实际效果
当然，这里也只是实现了基本功能，具体业务流程和细节，可在后面进行迭代定制。
导入文件功能，主要是导入svg类的图元，像之前一样，导入文件前最先要打开文件，然后判断文件类型，类型判断成功则发送给meta2d处理，若不成功就退出提示用户上传正确的格式。文件类型判断主要用file对象的type属性，该属性返回MIME类型，svg的MIME类型为image/svg+xml，当类型通过后调用meta2d通过的parseSvg方法即可。
meta2d提供了缓存机制，meta2d.canvas.addCaches方法用于缓存图元，下次鼠标点击则放置
所以代码像下面这样即可：
接下来看看实际效果吧
meta2d核心库内置了放大镜功能，我们只需要调用其api进行放大镜的打开和关闭即可：
那我们的函数就很好写了，像下面这样：
来看看实际效果
与放大镜类似，meta2d也提供了相关api来实现缩略图的显示和隐藏，不过需要注意的是，缩略图对象不像放大镜对象一样是meta2d初始化就创建好的，缩略图需要我们自己调用其show方法才开始创建，所以判断缩略图是否打开之前要判断meta2d身上是否挂载了缩略图，像这样一样:
当然，你完全可以选择用闭包去做，这样我们的缩略图打开关闭功能就做好了
钢笔是meta2d提供的连线工具，meta2d内置了4种连线样式，分别为：
默认是曲线，相关API：
我们可以通过window.meta2d.canvas.drawingLineName身上是否有值来判断钢笔状态，从而调用不同API实现钢笔的打开关闭功能，像下面代码一样：
同样的你完全也可以用闭包来实现，像下面这样：
效果图如下：
与钢笔功能类似，铅笔是用来生成任意路径的工具，我们来看看官方提供了些什么API吧：
一眼就知道该怎么做了吧，和上面一样：
看看效果吧
通过这章，我们学习到了一些nav组件基本功能的实现，核心还是调用meta2d提供的相关api，最好参考官方文档来做，在后面章节，我们可以尝试增加更多功能增加工具栏等，敬请期待~
Meta2d.js开源地址
给大家推荐一下 Meta2d.js是一个实时数据响应和交互的2d引擎，可用于Web组态，物联网，数字孪生等场景。
Github： github.com/le5le-com/me...
Gitee: gitee.com/le5le/meta2d....
大家一起去为这个国产的开源产品star一下吧，毕竟优秀的国产可视化开源项目不多。
