从零开始搭建web组态

 成果展示:by组态[web组态插件]


一、技术选择


目前只有两种选择,canvas和svg

Canvas: 是一个基于像素的渲染引擎,使用JavaScript API在画布上绘制图像,它的优点包括:

  • Canvas渲染速度快,适合处理大量图像和高度动态的图像。
  • 可以直接操作像素,能够创建高质量、流畅的动画效果。
  • Canvas可用于实现复杂的游戏、3D效果等。

SVG: 是一种基于矢量的图形格式,可以使用XML和JavaScript API在浏览器中绘制图像,它的优点包括:

  • SVG是基于矢量的图形格式,图像可以无限放大而不失真。
  • 可以为SVG图像添加事件处理器,实现交互效果。
  • 可以通过CSS进行样式控制,使得SVG图像更加灵活。
  • SVG图像可以直接嵌入到HTML文档中,不需要另外下载。

但它也存在一些缺点:

  • SVG渲染速度较慢,适合处理少量图像和少量动态的图像。
  • SVG图像在处理复杂图形时可能会导致性能问题。
  • 由于SVG是基于矢量的图形格式,它的复杂度比较高,可能会导致文件大小较大。

        根据个人喜好选择,一般来说canvas的性能要不svg好的多,对于组态画面,实时性要求要高,我们选择canvas。对canvas的开发,都需要选择一款框架,底层开发太难了,选择框架一定要选择文档全面,例子多的,konva.js是非常不错的。

ui框架自行选择,都行。

二、 konva.js简介


        konva 是一个对 canvas API 做了封装增强的 JavaScript 库。

        HTML 原生的 canva 提供的 API 比较底层,用法上像是操纵一支画笔进行各种操作,画完就结束了。

        canvas 本身不维护图形树,你也无法操作修改已被绘制的图形。

        而 konva 能够像我们操作 DOM 树一样去绘制和维护元素,它会额外维护图形构成的树,并能在绘制后,对特定图形进行样式的修改。

        你还可以在上面添加事件,比如鼠标滑入某图形时,图形变大一点。此外还支持方便的变形、动画、拖拽等高级能力。

        konvas提供商了所有组态的基础功能,如,点,线,面,拖拽,变化,放大缩小,事件等等,只要你想到的,他都有,我们要做的就是一点一点的吧这些功能堆起来,形成一个完整的组态工具。技术上并不难,就是花点时间。

三、 组态功能


        我们做一个最简单的功能,其他的功能自己慢慢堆,下面是功能列表

        组态图元: 变量组件(可根据后台推送的数据显示到画布上),属性(文字颜色)

        后台通讯:websocket

        画面保存:画面要能以字符串的形式保存到后台数据库,或者生成文件,查看画面的时候在字符串拿出来,在还原为画面

        实时数据渲染:后台来数据后要及时呈现到画布上

四、 需求分析


        我们做的组件是一个一个的,组件要方便存储,这样后续才能方便添加,一个组件里面包含该组件所有的属性。这是最重要的,否则后面扩展及其困难

        konva可以将单个的组件,序列化为字符串。这样就方便了我们做一个一个组件。

五、成功案例

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/268871.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

数据结构从入门到精通——链表

链表 前言一、链表1.1 链表的概念及结构1.2 链表的分类1.3 链表的实现1.4 链表面试题1.5 双向链表的实现 二、顺序表和链表的区别三、单项链表实现具体代码text.htext.cmain.c单链表的打印空间的开辟链表的头插、尾插链表的头删、尾删链表中元素的查找链表在指定位置之前、之后…

公网IP怎么获取?

公网IP是网络中设备的唯一标识符,用于在Internet上进行通信和定位。对于普通用户来说,了解如何获取自己的公网IP是很有必要的,本文将介绍几种获取公网IP的方法。 方法一:通过路由器查询 大多数家庭和办公室使用的路由器都会有一个…

php httpfs链接hdfs

一.代码(有bug) GitHub - michaelbutler/php-WebHDFS: A PHP client for WebHDFS 二.调用代码 1.代码1.代码 require_once(../webhdfs/src/org/apache/hadoop/WebHDFS.php);require_once(../webhdfs/src/org/apache/hadoop/tools/Curl.php); require_o…

Machine Vision Technology:Lecture2 Linear filtering

Machine Vision Technology:Lecture2 Linear filtering Types of ImagesImage denoising图像去噪Defining convolution卷积的定义Key properties卷积的关键属性卷积的其它属性Annoying details卷积练习Sharpening锐化Gaussian KernelNoise噪声 分类Gaussian noise高…

一篇了解电阻的使用

目录 一、电阻理论基础 1.电阻的定义 2.欧姆定律 3.电阻决定式 4.电阻的串并联​编辑 5.电阻的功率 6.温度对电阻的影响 二、电阻的选型 1.安装方式 2.电阻值 (1)电阻值的标称 (2)电阻值的确定 (3&#x…

如何在Linux使用Docker部署Redis并结合内网穿透实现公网远程连接本地数据库

文章目录 前言1. 安装Docker步骤2. 使用docker拉取redis镜像3. 启动redis容器4. 本地连接测试4.1 安装redis图形化界面工具4.2 使用RDM连接测试 5. 公网远程访问本地redis5.1 内网穿透工具安装5.2 创建远程连接公网地址5.3 使用固定TCP地址远程访问 正文开始前给大家推荐个网站…

游戏引擎分层简介

游戏引擎分层架构(自上而下) 工具层(Tool Layer) 在一个现代游戏引擎中,我们最先看到的可能不是复杂的代码,而是各种各样的编辑器,利用这些编辑器,我们可以制作设计关卡、角色、动画…

远程调用--webClient

远程调用webClient 前言1、创建webClient2、准备数据3、执行请求4、接收返回响应到的数据整体代码 前言 非阻塞、响应式HTTP客户端 1、创建webClient WebClient client WebClient.create();2、准备数据 Map<String,String> params new HashMap<>();params.pu…

Tabby-全网最详细讲解

1.Tabby简介 Tabby是一个无限可定制的跨平台终端应用程序&#xff0c;适用于local shells、serial、SSH和Telnet的连接。 Tabby是基于TypeScript开发的终端模拟器&#xff0c;可用于Linux、Windows和Mac OS系统。 Tabby (前身是 Terminus) 是一个可高度配置的终端模拟器和 SSH …

攻防世界-get_post

题目信息 相关知识 -G&#xff1a;表示GET请求&#xff0c;缺省POST -d参数用于发送 POST 请求的数据体 使用-d参数以后&#xff0c;HTTP 请求会自动加上标头Content-Type : application/x-www-form-urlencoded。并且会自动将请求转为 POST 方法&#xff0c;因此可以省略-X PO…

智能驾驶规划控制理论学习04-基于车辆运动学的规划方法

目录 一、线性二自由度汽车模型&#xff08;自行车模型&#xff09; 1、二自由度模型概述 2、不同参考点下的状态空间方程 3、前向仿真 二、运动基元生成方法 1、杜宾斯曲线&#xff08;Dubins Curve&#xff09; 2、Reeds Shepp Curve 三、多项式曲线&#xff08;Poly…

如何本地创建websocket服务端并发布到公网实现远程访问

文章目录 1. Java 服务端demo环境2. 在pom文件引入第三包封装的netty框架maven坐标3. 创建服务端,以接口模式调用,方便外部调用4. 启动服务,出现以下信息表示启动成功,暴露端口默认99995. 创建隧道映射内网端口6. 查看状态->在线隧道,复制所创建隧道的公网地址加端口号7. 以…

微服务监控SpringBoot Actuator模块

Spring Boot Actuator Spring Boot 包含许多附加功能&#xff0c;可帮助您在将应用程序投入生产时监控和管理应用程序。您可以选择使用 HTTP 端点或 JMX 来管理和监控您的应用程序。审核、运行状况和指标收集也可以自动应用于您的应用程序。 简介 Spring Boot Actuator模块提…

参数引入和全局变量引入实现-目标和

LCR 102. 目标和 - 力扣&#xff08;LeetCode&#xff09; 分析题意&#xff0c;画出决策树&#xff0c;其他的思路都跟前面讲过的类似&#xff1a; 全局变量引入实现&#xff1a; 全局变量的引入&#xff0c;需要手动处理回溯&#xff1b; class Solution {int ret; //…

智慧公厕:打造智慧城市的环卫明珠

在城市建设中&#xff0c;公共卫生设施的完善和智能化一直是重要环节。而智慧公厕作为智慧城市建设的重要组成部分&#xff0c;发挥着不可替代的作用。本文以智慧公厕源头实力厂家广州中期科技有限公司&#xff0c;大量精品案例现场实景实图&#xff0c;解读智慧公厕如何助力打…

SwiftUI 在 App 中弹出全局消息横幅(下)

功能需求 在 SwiftUI 开发的 App 界面中,有时我们需要在全局层面向用户展示一些消息: 如上图所示:我们弹出的全局消息横幅位于所有视图之上,这意味这它不会被任何东西所遮挡;而且用户可以点击该横幅关闭它。这是怎么做到的呢? 在本篇博文中,您将学到以下内容 功能需求…

自测-5 Shuffling Machine(python版本)

文章预览&#xff1a; 题目翻译算法python代码oj反馈结果 题目 翻译 shuffle是用于随机化一副扑克牌的过程。由于标准的洗牌技术被认为是薄弱的&#xff0c;并且为了避免员工通过不适当的洗牌与赌徒合作的“内部工作”&#xff0c;许多赌场使用了自动洗牌机。你的任务是模拟一…

探索Linux世界:初次接触和基本指令(文件操作)

文章目录 1.基本介绍和准备2.基本指令和Linux的基本操作3.几个重要基本指令3.1 ls - 列出文件和目录3.1.1文件的知识3.1.2 .和..文件 3.2pwd - 显示当前工作目录3.2.1路径知识 3.3 cd - 切换目录3.4 touch - 创建文件或更新时间戳3.5mkdir - 创建新目录3.6rm - 删除文件或目录3…

[技巧]Arcgis之图斑四至范围批量计算

ArcGIS图层&#xff08;点、线、面三类图形&#xff09;四至范围计算 例外一篇介绍&#xff1a;[技巧]Arcgis之图斑四至点批量计算 说明&#xff1a;如下图画出来的框&#xff08;范围标记不是很准&#xff09; &#xff0c;图斑的x最大和x最小&#xff0c;y最大&#xff0c;…

MySQL Strict Mode is not set for database connection ‘default‘

在使用 DJango 框架执行迁移文件的命令时&#xff0c;可以看到出现如下警告&#xff1a; (ll_env) D:\workspace\workspace-mengll\learning-log>python manage.py migrate System check identified some issues: WARNINGS: ?: (mysql.W002) MySQL Strict Mode is not set …