从零开始搭建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.mzph.cn/news/718304.shtml

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

相关文章

TIOBE 2024榜单启示:程序员如何把握未来编程趋势与机遇

程序员如何选择职业赛道? 程序员的职业赛道就像是一座迷宫,有前端的美丽花园,后端的黑暗洞穴,还有数据科学的神秘密室。你准备好探索这个充满挑战和机遇的迷宫了吗?快来了解如何选择职业赛道吧! 方向一…

linux时间校准(ntpdate)

在Linux中,可以使用ntpdate命令来进行时间校准。 首先,打开终端并输入以下命令安装ntpdate工具 yum install ntpdate 然后,运行以下命令来同步系统的时间与网络上的NTP服务器 ntpdate time.nist.gov 若要设置定期自动更新时间,可…

CSS中如何解决 1px 问题?

1px 问题指的是:在一些 Retina屏幕 的机型上,移动端页面的 1px 会变得很粗,呈现出不止 1px 的效果。原因很简单——CSS 中的 1px 并不能和移动设备上的 1px 划等号。它们之间的比例关系有一个专门的属性来描述: window.devicePix…

重构笔记系统:Docker Compose在微服务架构中的应用与优化

虽然我的笔记系统的开发是基于微服务的思想,但是在服务的配置和编排上感觉还是不太合理,具体来说,在开发上的配置和在生产上的配置差别太大。现在规模小,后面规模变大,估计这一块会成为系统生长的瓶颈。 因此&#xff…

【Web】速谈FastJson反序列化中BasicDataSource的利用

目录 关于BCEL BCEL的恶意利用demo FastJson配合BCEL初始化任意类 parse情况下后天精心构造弥补先天之不足 exp 参考文章: BCEL ClassLoader去哪了 Java动态类加载,当FastJson遇到内网 关于BCEL BCEL(Byte Code Engineering Library)的全名是Apa…

跨时钟信号处理方法

1. 背景 现在的芯片(比如SOC,片上系统)集成度和复杂度越来越高,通常一颗芯片上会有许多不同的信号工作在不同的时钟频率下。比如SOC芯片中的CPU通常会工作在一个频率上,总线信号(比如DRAM BUS)会…

python+Django+Neo4j中医药知识图谱与智能问答平台

文章目录 项目地址基础准备正式运行 项目地址 https://github.com/ZhChessOvO/ZeLanChao_KGQA 基础准备 请确保您的电脑有以下环境:python3,neo4j 在安装目录下进入cmd,输入指令“pip install -r requirement.txt”,安装需要的python库 打…

猫为什么挑食?可以改善、预防猫咪挑食的主食冻干分享

现在的猫咪主人都把自家的小猫当成了心头的宝贝,呵护备至。最令人头疼的就是猫咪挑食不吃猫粮,猫为什么挑食?遇到这类情况怎么办呢?今天,我要分享一个既能确保猫咪不受苦,又能有效改善挑食问题的方法。 一、…

vue api封装

api封装 由于一个项目里api是很多的,随处都在调,如果按照之前的写法,在每个组件中去调api,一旦api有改动,遍地都要去改,所以api应该也要封装一下,将api的调用封装在函数中,将函数集…

C++实现简易版http server

mini服务器简介 mini服务器功能 1.实现了GET和POST方法的HTTP request和HTTP respond的构建和发送,使服务器可以完成基本通信功能。 2.使用了线程池技术,使服务器可以一次接收更多的链接和加快了服务器处理数据的速度。 3.实现了简易的CGI&#xff0…

【MATLAB源码-第155期】基于matlab的OFDM系统多径信道LS,LMMSE,SVD三种估计算法的比较误码率对比仿真。

操作环境: MATLAB 2022a 1、算法描述 OFDM(Orthogonal Frequency Division Multiplexing,正交频分复用)是一种高效的无线信号传输技术,广泛应用于现代通信系统,如Wi-Fi、LTE和5G。OFDM通过将宽带信道划分…

jmeter 按流量阶梯式压测数据库

当前版本: jmeter 5.6.3mysql 5.7.39 简介 JMeter 通过 BZM - Arrivals Thread Group 来模拟并发到达的用户流量、按时间加压,可以有效地帮助测试人员评估系统在高压力和高并发情况下的性能表现。 文章目录如下 1. 下载插件 2. 界面说明 3. 测试步骤…

C#在并发编程使用Frozen来确保线程安全性

在C#中,Frozen方法通常用于通过不可变对象来确保线程安全性。这通常在并发编程中很有用,特别是在共享状态的多线程环境中。Frozen方法是Caliburn Micro框架中的一个方法,它用于将对象标记为不可变。 当你调用Frozen方法时,它返回…

云计算 2月26号 (进程管理和常用命令)

一、权限扩展 文件权限管理之: 隐藏权限防止root误删除 文件属性添加与查看 [rootlinux-server ~]# touch file1 file2 file3 1.查看文件属性 [rootlinux-server ~]# lsattr file1 file2 file3 ---------------- file1 ---------------- file2 ---------------- f…

【FAQ】HarmonyOS SDK 闭源开放能力 —Account Kit

1.问题描述 实时验证和非实时验证的区别是什么? 解决方案 相同点: “手机号快速验证”和“实时验证”都是为了向用户发起获取手机号信息的请求。最终目的都是为了获取到手机号。这两种获取方式都需要完成“获取您的手机号”的Scope权限申请。 区别&…

UDP协议和TCP协议详解

文章目录 应用层自定义协议 传输层udp协议TCP协议1.确认应答2.超时重传3.连接管理建立连接, 三次握手断开连接, 四次挥手tcp的状态 4.滑动窗口5.流量控制6.拥塞控制7.延时应答8.携带应答9.面向字节流10.异常情况 应用层 自定义协议 客户端和服务器之间往往要进行交互的是“结构…

Eigen-约简,访问和广播

约简化,访客和广播 一、约简化1. 标准计算2. 布尔约减 二、访问三、部分约简1. 将部分约减与其他业务相结合 四、广播1. 将广播与其他业务相结合 一、约简化 在Eigen中,约简化是一个接受矩阵或数组并返回单个标量值的函数。最常用的约简方法之一是.sum(…

心法利器[108] | 微调与RAG的优缺点分析

心法利器 本栏目主要和大家一起讨论近期自己学习的心得和体会。具体介绍:仓颉专项:飞机大炮我都会,利器心法我还有。 2023年新的文章合集已经发布,获取方式看这里:又添十万字-CS的陋室2023年文章合集来袭,更…

修复通达OA 百度ueditor 文件上传漏动

前些日子,服务器阿里云监控报警,有文件木马文件,因为非常忙,就没及时处理,直接删除了木马文件了事。 谁知,这几天对方又上传了木马文件。好家伙,今天不花点时间修复下,你都传上瘾了…

PHP【swoole】

前言 Swoole官方文档:Swoole 文档 Swoole 使 PHP 开发人员可以编写高性能高并发的 TCP、UDP、Unix Socket、HTTP、 WebSocket 等服务,让 PHP 不再局限于 Web 领域。Swoole4 协程的成熟将 PHP 带入了前所未有的时期, 为性能的提升提供了独一无…