svg的json结构说明

最新推荐文章于 2024-04-20 09:37:00 发布
最新推荐文章于 2024-04-20 09:37:00 发布
阅读量1.3k 收藏
点赞数
文章标签： html5 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38320365/article/details/108678283
版权

svg的json结构说明

更新日志
文档内容
json结构文件
json说明–js属性
json说明–TEXT属性
json说明–DO属性
json说明–DI属性
json说明–Btn属性
json说明–RECT属性

更新日志
更新时间：2020年8月15日
更新内容：
文档创建。
添加DO\DI\Btn\RECT\ARC操作说明。

文档内容
主要描述svg的配置文件。
并对关键属性进行说明。

如果svg未铺满显示，请修改svg文件：

json结构文件

{
“sys”: {
“ver”: “1.1”
},
“HELP”: {
“TEXT”: “建议在span中定义”,
“DO”: “建议创建do0 do1 各自的动画图，然后各自group，最后整体两个group，do0在do1下面”,
“DI”: “建议DO相同”,
“RECT”: “group+变化层+不变化的遮盖顶层.”,
“01”: “页面创建完毕之后，建议将所有的可编辑的对象，放在独立的一层，或者依次放到最顶层，优点是配置比较集中”,
“02”: “”
},
“JS”: [{
“id”: “id”,
“opr”: “svg”,
“js”: “$UI/cloud/equip/Default/svg/pump3/PCsvg/pump3.svg.js”,
“mark”: “ui处理 .init() 在初始化中调用， .modbus_rcv()在接收到modbus 信息调用 .model_rcv() 在接收到设备信息调用 http://192.168.1.12:8081/pump3/PCsvg/pump3.svg.js”
}],
“TEXT”: [{
“id”: “level”,
“unid”: “”,
“regtype”: “ai”,
“io”: 0,
“name”: “”,
“unit”: “米”
}],
“DO”: [{
“id”: “do1”,
“unid”: “”,
“regtype”: “do”,
“io”: 0,
“time”: 0
}, {
“id”: “do2”,
“unid”: “”,
“regtype”: “do”,
“io”: 1,
“time”: 0
}, {
“id”: “do3”,
“unid”: “”,
“regtype”: “do”,
“io”: 2,
“time”: 0
}],
“DI”: [{
“id”: “kg1”,
“unid”: “”,
“regtype”: “do”,
“io”: 0
},
{
“id”: “kg2”,
“unid”: “”,
“regtype”: “do”,
“io”: 1
},
{
“id”: “kg3”,
“unid”: “”,
“regtype”: “do”,
“io”: 2
}
],
“Btn”: [{
“id”: “button1”,
“opr”: [{
“unid”: “”,
“operator”: “equip_do”,
“oprtype”: “OPEN”,
“io”: 0,
“help”: “打开继电器 io = 0 代表第一个通道”
}]
}],
“RECT”: [{
“id”: “p_wendu1”,
“unid”: “”,
“regtype”: “ai”,
“io”: 0,
“rect”: {
“opr”: “scaleY”
}
}],
“ARC”: [{
“id”: “yali1”,
“unid”: “”,
“regtype”: “ai”,
“io”: 0,
“arc”: {
“opr”: “rotate”,
“cx”: 15,
“cy”: 8,
“begin”: 0,
“end”: 180
}
}]
}

json说明–js属性
“JS”: [{
“id”: “id”,
“opr”: “svg”,
“js”: "KaTeX parse error: Expected 'EOF', got '}' at position 78: …"mark": "" }̲], 主要属性为id、js. …UI"开头，认为时本地文件，可以访问已有的文件。
以"http"或者"https"开头，认为是网络文件，可以访问远端服务器文件。（提示远端服务器允许跨域访问，否则会加载失败）
其它格式，认为是云端文件格式，自动加载（用户可上传自定义文件）。
"js"文件格式模板参考如下：

define(function(require) {
var jysvgmethord = require("$UI/cloud/lib/svg/jysvgmethord");

var model = function() {};

//---------------------必要属性

//加载时进行调用
model.prototype.Init = function(fEquipInfo) {
    console.log("svg custom Init");
};

//接收到modbus 信息时进行调用
model.prototype.ShowModbusReg = function(mbreg, jysvg, jydam) {
    console.log("svg custom ShowModbusReg");
};

//接收到设备信息信息时进行调用
model.prototype.ShowNowInfo = function(fInfo, jysvg, jydam) {

    var draw = jysvg.svgdraw;
    var fEquipInfo = jysvg.fEquipInfo;
    var nowjson = jysvg.nowjson;


    if (draw == null) return;
    if (fEquipInfo == null) return;
    if (jydam == null) return;
    if (nowjson == null) return;

    debugger;

    var element_water = SVG("#water");

    if (this.water_x == undefined) {
        this.water_x = element_water.transform("translateX");
    }

    if (this.water_y == undefined) {
        this.water_y = element_water.transform("translateY");
    }

    var water_ratio = jydam.getairatio("", 0);
    var height = 120;
    element_water.transform({
        translate: [this.water_x, this.water_y - height * water_ratio]
    }, false);
};

//扩展预留
model.prototype.onOprSendEvent = function(opr, jysvg, jydam) {
    console.log("svg custom onOprSendEvent");
};

return new model();

});

可以用require方式，加载外部文件，并直接访问。

json说明–TEXT属性
json结构
“TEXT”: [{
“id”: “level”,
“unid”: “”,
“regtype”: “ai”,
“io”: 0,
“name”: “”,
“unit”: “米”
}]

svg文件

米

处理过程
json处理
id为svg文件的id,名称需要相同。
undi为空，代表当前设备。
regtype：“ai”:代表ai数据
预计后期支持
“ao”:代表ao数据
“data”：日期
“time”：时间
io: 0代表第一个通道
name:名称 可为空
unit:单位 可为空
显示内容： name+数值+unit

json说明–DO属性
json结构
“DO”: [{
“id”: “do1”,
“unid”: “”,
“regtype”: “do”,
“io”: 0,
“time”: 0
}, {
“id”: “do2”,
“unid”: “”,
“regtype”: “do”,
“io”: 1,
“time”: 0
}],

svg文件



处理过程
json处理
id为 do1 为按钮id do1_1为打开按钮 ，绑定关闭操作 do1_0为显示关闭按钮，绑定打开操作
undi为空，代表当前设备。
regtype：“do”:代表继电器
io: 0代表第一个通道
time: ==0忽略 >0代表延迟时间

json说明–DI属性
json结构
“DI”: [{
“id”: “kg1”,
“unid”: “”,
“regtype”: “do”,
“io”: 0
},
{
“id”: “kg2”,
“unid”: “”,
“regtype”: “di”,
“io”: 1
},
{
“id”: “kg3”,
“unid”: “”,
“regtype”: “do”,
“io”: 2
}
],

svg文件



处理过程
json处理
id为 kg1为按钮id id="kg1_0"为状态为0时进行显示 为1时进行隐藏。 id="kg1_1"为状态为0时进行显示 为1时进行隐藏。
undi为空，代表当前设备。
regtype：“do”:代表继电器通道， “di”:代表DI通道
io: 0代表第一个通道

json说明–Btn属性
json结构
“Btn”: [{
“id”: “button1”,
“opr”: [{
“unid”: “”,
“operator”: “equip_do”,
“oprtype”: “OPEN”,
“io”: 0,
“help”: “打开继电器 io = 0 代表第一个通道”
}]
},
{
“id”: “button2”,
“opr”: [{
“unid”: “”,
“operator”: “equip_do”,
“oprtype”: “OPEN”,
“io”: 0,
“help”: “打开继电器 io = 0 代表第一个通道”
},
{
“unid”: “”,
“operator”: “equip_do”,
“oprtype”: “CLOSE”,
“io”: 0,
“help”: “关闭继电器 io = 0 代表第一个通道”
},
{
“unid”: “”,
“operator”: “equip_do”,
“oprtype”: “AOPEN”,
“help”: "打开所有继电器 "
},
{
“unid”: “”,
“operator”: “equip_do”,
“oprtype”: “ACLOSE”,
“help”: “关闭所有继电器 io = 0 代表第一个通道”
},
{
“unid”: “”,
“operator”: “equip_do”,
“oprtype”: “OPENONE”,
“io”: 0,
“timer1”: 10,
“help”: “打开一段时间后关闭 time = 10 代表打开1 .0 秒后关闭”
},
{
“unid”: “”,
“operator”: “equip_do”,
“oprtype”: “CLOSEONE”,
“io”: 0,
“timer1”: 10,
“help”: “关闭一段时间后打开 time = 10 代表打开1 .0 秒后关闭”
},
{
“unid”: “”,
“operator”: “equip_do”,
“oprtype”: “OPRMORE”,
“io”: 0,
“cnt”: 0,
“timer1”: 10,
“timer2”: 20,
“help”: “循环打开关闭 cnt:循环次数 timer1:打开时间 timer2:关闭时间 有效数值范围：0~65535”
},
{
“unid”: “”,
“operator”: “equip_do”,
“oprtype”: “READ”,
“help”: “获取设备最新状态”
},
{
“unid”: “”,
“operator”: “equip_mb”,
“oprtype”: “RDO”,
“regstart”: 0,
“regnum”: 10,
“help”: “获取DO状态 获取reg0~9之间的寄存器信息”
},
{
“unid”: “”,
“operator”: “equip_mb”,
“oprtype”: “RDI”,
“regstart”: 0,
“regnum”: 10,
“help”: “获取DI状态”
},
{
“unid”: “”,
“operator”: “equip_mb”,
“oprtype”: “RAI”,
“regstart”: 0,
“regnum”: 10,
“help”: “获取AI状态”
},
{
“unid”: “”,
“operator”: “equip_mb”,
“oprtype”: “RAO”,
“regstart”: 0,
“regnum”: 10,
“help”: “获取AO状态”
},
{
“unid”: “”,
“operator”: “equip_mb”,
“oprtype”: “WDO”,
“regstart”: 0,
“reginfo”: “0120111”,
“help”: “控制DO状态 regstart【0代表从第一个通道开始】 reginfo【0代表关闭 1代表打开 2代表忽略】”
},
{
“unid”: “”,
“operator”: “equip_mb”,
“oprtype”: “WAO”,
“regstart”: 0,
“reginfo”: “134_456_789”,
“help”: “控制DO状态 regstart【0代表从第一个通道开始】 reginfo【134_456_789 代表连续写3个寄存器数据，依次为134，456，789】”
},
{
“unid”: “”,
“operator”: “equip_mb”,
“oprtype”: “WAOHEX”,
“regstart”: 0,
“reginfo”: “12345678abcd”,
“help”: “控制DO状态 regstart【0代表从第一个通道开始】 reginfo【12345678abcd 代表连续写3个寄存器数据，依次为0x1234,0x5678,0xabcd】”
}
]
}
],

svg文件

处理过程
支持按键button触发多个动作执行

json说明–RECT属性
json结构
“RECT”: [{
“id”: “p_wendu1”,
“unid”: “”,
“regtype”: “ai”,
“io”: 0,
“rect”: {
“opr”: “scaleY”,
“L”:0,
“H”:100
}
}]

svg文件

处理过程
json处理
id为 kg1为按钮id id=“p_wendu1” 相对应
undi为空，代表当前设备。
regtype：“ai”:代表AI通道
io: 0代表第一个通道

qq_38320365
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
SVG格式转json文件
weixin_36703970的博客
01-12 3964
最近要做物体分割的任务，但在网上获取的标注图片以SVG格式存储，所以要通过SVG文件画出mask，再把格式转化为json 目录 SVG格式简介 数据集 用Python解析SVG文件 提取XML文档中关键字 1.观察svg文件层级关系 2.解析文件 3.保存polygon 4.画出轮廓 写入python字典转json SVG格式简介 图像格式即图像文件存放的格式，svg为可缩放矢量图（Scalable Vector Graphics），基于XML格式描述图像，存储点和线，而位图图像.
记一次数据库中大量html和svg组成的json字符串 如何处理为数组
qq_58778333的博客
04-21 697
更准确地说，此函数解码所有实体（包括所有数字） 实体），a） 对所选文档类型必须有效 — 即 对于 XML，此函数不会解码可能定义的命名实体 在某些 DTD 中 — 和 b） 其字符或字符在编码字符中 集与所选编码相关联，并且允许在所选编码中 文档类型。首先我想到用 框架自带的json_decode对JSON格式的字符串进行解码 发现不行。时，JSON 对象将返回关联 array 或 object，这取决于是否在。时，JSON 对象将返回 object。相反，因为它转换 HTML 实体 在相应的字符中。
svg-to-json:将SVG字符串转换为JSON
05-15
#SVG到JSON一种将SVG字符串转换为JSON数据并可选地呈现统计信息的方法。 #Usage创建新实例，提供svg字符串，还可以选择传入options 。 var svg_json = new SVGToJSON ( svg [ , options ] ) ; #API ## Object.json SVGToJSON()返回一个对象。 OBJ.json是主要的JSON数据。 它是所有SVG标签的数组。 var svg_json = new SVGToJSON ( svg ) ; svg_json = { json : [ ... ] } ## Object.json [I]中的每个标签Object.json有四个值。 var first_tag = svg_json . json [ 0 ] ; first_tag = { attrs : { "h
探索SVGSON：将SVG转换为JSON的优雅工具
最新发布
gitblog_00098的博客
04-20 641
探索SVGSON：将SVG转换为JSON的优雅工具 项目地址:https://gitcode.com/elrumordelaluz/svgson SVGSON 是一个开源项目，旨在提供一种简单而高效的方式，将可缩放矢量图形（SVG）文件转换成JSON格式。对于开发者来说，这种转换可以极大地提升SVG在Web应用和动态图形中的可操作性与灵活性。本文将对SVGSON的技术特性、应用场景及优势进行深入探...
svg2json:将 SVG 文件（从 Inkscape）转换为 json
06-12
将 SVG 文件转换为 json 当您使用 Inkscape 创建了一个 SVG 并且需要将它与 d3.js 一起使用时 安装 克隆这个 repo 运行npm install 转换文件 将 SVG 文件放在 svg 文件夹中（已经有一些示例文件） 运行node convertAll json 文件位于 json 文件夹中 使用 d3.js 查看文件 运行node server 访问localhost:3000
svg2topo:将 SVG 从 Inkscape 转换为 Topojson 地图坐标
05-29
然后，通过`svg2topo`工具，我们可以解析SVG文件，提取其中的几何路径，并将其转化为Topojson的结构。Topojson的优势在于它能够有效地合并相邻的边界，减少数据冗余，同时保持地理数据的精确性。 在`svg2topo-...
Twaver Web SVG 开发说明文档
05-20
### Twaver Web SVG 开发说明文档 #### 一、前言 Twaver Web SVG 开发说明文档是一份针对电信网管 WEB 模式开发的重要参考资料。该文档详细介绍了 Twaver Web SVG 的架构、开发流程以及常见问题解决方案等内容，...
svg-follower
05-01
3. `index.html`：项目的主要入口文件，可能包含了SVG图形的HTML结构和JavaScript引用。 4. `package.json`：项目依赖和配置信息，列出了如`typescript`、`webpack`等构建工具。 5. `tsconfig.json`：TypeScript的...
D3树图数据结构例子
01-12
本文将深入探讨如何利用D3实现树图数据结构，并以"简单树图"为例进行说明。 树图是一种展示层次数据的有效方式，它通过矩形区域的大小和位置来表示节点及其之间的关系。D3中的`treemap layout`函数提供了构建树图的...
vector-table:SVG编辑器
05-06
6. `README.md`：项目说明文件，通常包括如何安装、运行和贡献项目的指南。 开发过程中，你可能需要了解SVG的基本语法和属性，以及JavaScript的DOM操作、事件监听等概念。对于前端开发者来说，熟悉一个像React或Vue...
将各种数据转换JSON格式
09-15
将表格等各种数据转换为JSON格式，保存本地，即使不连接数据库也能轻松完成各种操作，并且无法修改源
svg-model:将SVG文件转换为更简单的JSON表示形式以进行渲染
03-25
SVG模型 表示用于在2D画布上绘制的SVG的简化模型。 在构建SVG渲染器时，这很有用。 怎么运行的 所有SVG元素都将转换为平面路径列表。 组属性（例如，样式，变换）已应用于每个路径。 路径简化为精确绘图所需的最少命令集。
SVGParser ios SVG转json
10-12
使用方法：cd到此目录下 ./SVGParser -d后把文件拖进去就好了
渲染Json动画文件
qq_41742961的博客
10-12 144
渲染Json动画文件。
使用vue+div+svg实现审批流程图功能，可生成JSON格式
高彬的专栏
05-04 3369
前段时间手写一个画审批流程的功能，当时使用的纯svg实现的，使用期间遇到了一些问题，纯svg实现逻辑会复杂一些，比如：svg矩形不能写文字、元素内不能放子元素等，所以这次使用“DIV+SVG”重新开发一版。 上一个纯SVG纯地址是：SVG绘制流程图_高彬的博客-CSDN博客_svg流程图项目中需要绘制流程图，在网上找了几个开源插件，了解后项目要求都不完全匹配，改代码几乎不可能，代码太长了，看懂都是一个问题！！因此从零手写，参考了wps和ProcessOn的流程图前端代码，想出两种方案：一、div+canv
Fabricjs中实现序列化Json与反序列以及转换SVG
BADAO_LIUMANG_QIZHI的博客
02-10 2501
场景 Fabricjs一个简单强大的Canvas绘图库快速入门： Fabricjs一个简单强大的Canvas绘图库快速入门_BADAO_LIUMANG_QIZHI的博客-CSDN博客 在上面的基础上，在画布上添加完对象之后，可以将整个画布转换成json数据。 然后还可以将json数据反序列成画布。 还可以将画布转换成svg。 注： 博客：BADAO_LIUMANG_QIZHI的博客_霸道流氓气质_CSDN博客-C#,SpringBoot,架构之路领域博主 关注公众号 霸道的程序猿 获取编程相关
D3.js SVG JSON 画折线图
qq_42683219的博客
10-26 1167
效果图 HTML代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>diaphragm</title> <style> svg{ position: absolute;...
svg和json交互_Web开发人员阅读列表：SVG图像映射和交互性
cungui5726的博客
08-23 452
svg和json交互HTML imagemaps were one of the first graphical methods used to navigate complex websites, and continue to retain a number of advantages when they are designed well. One significant drawback ...
用JavaScript(JSON)生成pdf、docx、png、svg、flash等，带中文、图形、图片、超链接...
xdocs的博客
12-05 2856
运行效果： http://sandbox.runjs.cn/show/rdhbtfbw 规范说明见：http://xdoc.sinaapp.com var obj = { "version": "9.8.1", "meta": { "author": "xdoc" }, "paper": { "margin":
svglib svg转json
04-24
您是想了解如何将SVG格式的文件转换为JSON格式吗？如果是的话，我可以为您提供一些相关的信息。 SVG（Scalable Vector Graphics） 是一种基于 XML 的矢量图形格式，它有一个标准的 DOM 模型，可以用 JavaScript ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值