VUE3 中导入Visio 图形

分类:热门推荐日期:2024-03-29浏览:1评论:0

        微软的Visio是一个功能强大的图形设计工具，它能够绘制流程图，P&ID，UML 类图等工程设计中常用的图形。它要比其它图形设计软件要简单许多。以后我的博文中将更多地使用VISO 来绘制图形。之前我一直使用的是corelDraw。

        Visio 已经在工程设计中得到广泛的应用。

本博客讨论如何将Visio 设计的SVG 导入webHMI。

目的与方法

        我的目标是使用Visio 绘制石化行业的工艺和仪表流程图（P&ID ），并将它导入VUE3 的前端显示出来。

  •   直接导入Web 不做任何的修改和添加
  •   图形要能够携带一些数据属性
  •   能够与后端的OPC UA 模型相对应
  • 实现图形可点击

    之前我曾经使用其它的方式：

    • 使用autoCAD 绘制，输出DXF
    • 使用corelDaw ，Inkscape 等软件绘制，然后人工添加内置的javascript小程序
    • 使用javascript 的widget  canvas 绘制
    • 使用SVG和svidget 插件实现。

               在我过往的博文中可以找到我的实验，这些方法或多或少需要额外的编程，或者格式转换。这次我们尝试直接导入Visio 产生的SVG 图形。

      实现 

      简单的P&ID 图

      使用Visio 就不多说了，我画了一个简单的P&ID图。

      Visio 图形添加数据属性

              图形中需要包含一些数据，最常见的需要一个DataTag 能够将图形与后端数据相对应，我这里使用OPCUA 作为后端信息模型，所以，至少我们需要OPCUA 节点的基本信息：

      • NodeId
      • BrowseName
      • DisplayName
      • NodeType

                值得庆幸的是Visio 图形支持添加数据属性，它们成为形状数据，添加的具体方式是右键点击图形，选择”数据“=》”定义形状数据“

        你可以点击新建，添加新的属性，在上图中，我们添加了NodeId 。

        当从Visio 导出SVG 文件时，形状数据会作为专用属性（v:custProps）

        在前端载入时，我们要读取NodeId 的值，将它填写到 的onclick 参数中 （见下面的源代码）

        SVG 嵌入到HTML 中

        SVG 嵌入到HTML 网页中有许多的方法，之前我使用嵌入在 中。

        使用

              作为HMI，SVG 图形中的每一个图形都是可以点击的（Click able），这需要在导入HTML 时添加到 中，但是我发现，在 内部的SVG 添加了onclick 之后，无法方位VUE3 中的OnClick 函数，即便增加了Window.οnclick=this.Click 也不行。内部无法调用外部函数。

        使用vite-svg-loader插件

        第二种方式是使用vite-svg-loader插件，

        结果发现也不行。vite-svg-loader 只是装入了图形，将数据的内容都阉割掉了。

        可行的方式-直接导入SVG到HTML

        经过不断的尝试，采用了如下可行的方式：

        将SVG 直接作为字符串插入到 中去。读取SVG 的方式可以为两种：