HMI分享：画布2

HMI画布说明

1.     画布简介InoTouchPad中的画布是采用的JavaScript的canvas功能，canvas可实现2D、3D等绘图功能。本人是初学者，经过一段时间的使用体验感觉画布功能十分强大，如果编写内容足够丰富，可基本实现HMI自带的大部分控件的自定义。
画布实现功能总结如下：
①画线，根据HMI像素密度绘制点到点的连接线，可设置线宽、颜色、连接样式、交点样式、透明度等参数。另外可通过画线实现区域像素的全部布满，看起来就是一个图形；②画圆，根据圆心坐标、半径、起始角、终止角，旋转方向，绘制圆或者圆弧；③画矩形，根据对角线的起点坐标和终点坐标绘制矩形，有绘制边框和填充两种方式。绘制的路径或者任何连接线，都可以使用closePath来闭合图形，使用fillStyle填充时会默认闭合。

画布功能是基于canvas但不等同，因为硬件和框架的限制，目前测试发现部分命令不支持，由于研发也没有给出详细的说明，具体不支持的命令需要测试去发现，目前发现的不支持命令后面会给出总结。

2.     HMI添加画布打开InoTouchPad后，画布位置在：右侧工具-增强控件-画布，双击画布按钮拖入画面中，修改画面大小，双击打开画布“属性“，在加载中添加编辑好的脚本。

3.     编写简单的画布程序①对画布进行定义连接var canvas =ScreenItem("画面_1","画布_1");var ctx = canvas.draw2d();var w =ctx.width();var h = ctx.height();设置的画布所在画面和画布名称需要对应上，不然会出现报错，可通过width，height获取画布的宽和高，宽高对于有居中要求的比较重要。
②画布保存和清除ctx.clearRect(0,0,w,h);ctx.save();…ctx. restore ();通常情况下，画布编辑第一步是清除整个画布。因为程序中操作会使用到坐标的平移和旋转，所以在操作前一般都使用save保存当前属性，然后进行操作，操作后再使用restore恢复之前的属性，这样就能保证一段程序中的操作不受上下文的属性影响，所以在单段程序中经常会出现save和restore的配合使用，如下图：

③坐标的平移旋转ctx.rotate(弧度)；ctx.translate(x,y);坐标的平移旋转可以用来实现复制图像，例如时针的刻度可以画一条线用多段rotate实现，图居中原点的修改可用translate进行平移。如下图，切记平移旋转一定要配合保存和恢复使用，不然编写的理想位置和实际位置可能出现偏差。

④绘制图形ctx.beginPath();//开始路径ctx.moveTo(x,y);//路径起点ctx.lineTo(x,y);//画线ctx.arc(0,0,r,0,Math.PI*2,true);//画圆ctx.strokeStyle=’black’;//路径颜色ctxfillStyle=’black’;//填充颜色ctx.stroke();//路径描边ctx.fill();//颜色填充
ctx. ctxfillStyle=’rgb(0,0,0,1)’; //rgba颜色设定，四个参数分别为红、绿、蓝、透明度。
moveTo 和lineTo中的坐标可以是变量和语句，通过修改变量的值可实现画任何图形，这个功能十分方便。绘画相关命令较多，具体用法可去网站查找资料学习，搜索关键词canvas。

4.     不支持命令目前发现的InoTouchPad不支持canvas命令或做了修改但未说明的，如下：arcTo       createRadialGradinet   addColorStop       ImagefillText     strokeText


下面分享几个前几天做的小功能，本人也是最近刚接触画布，在论坛没有发现和画布相关的帖子，自己积攒的疑问也挺多，所以想通过此帖和大家一起讨论交流。第一次发帖，上个帖子因为设置问题导致别人花了水滴但是花的太冤枉，在此致歉，上个帖子的附件已删除。考虑到大家用的触摸屏版本问题，所以下面分享两个代码放入txt文本内，复制到脚本中，修改 画面名称 和 画布名称 对应上即可。欢迎大家一起来交流学习。


代码.7z (1.76 KB, 下载次数: 0)

2023-8-22 10:32 上传

点击文件名下载附件

进度条.mp4 (469.78 KB, 下载次数: 0)

2023-8-22 10:32 上传

点击文件名下载附件

音乐.mp4 (376.47 KB, 下载次数: 0)

2023-8-22 10:32 上传

点击文件名下载附件

贪吃蛇.mp4 (1.59 MB, 下载次数: 0)

2023-8-22 10:32 上传

点击文件名下载附件

按钮.mp4 (243.05 KB, 下载次数: 0)

2023-8-22 10:32 上传

点击文件名下载附件

免责声明：内容为网友自行发布或者来自互联网资源或者参考文献，如果侵犯了您的权益，请联系站长 1304546267@qq.com，我们会及时删除侵权内容，感谢您的理解！

CSDN_JS绘图
给大家分享一个CSDN的画布命令讲解的博客，内容讲解比较详细，代码复制方便。

这个看起来很高大上啊

是的，canvas功能很强大，能做的动态比较多，有些小游戏就是基于canvas开发的，感兴趣可以上手试试，几天就能入门

(5条消息) js绘图_阿牛大牛中的博客-CSDN博客_js画图
分享一个关于画布的博客，内容讲解的很详细，举例的指令代码复制也很方便。

这个看起来很高大上啊

好的，有机会一定去试试

用脚本编写HMI感觉不好学

贪吃蛇和进度条的代码能发出来就好了

挺强大的。。。学习一下。。

关键词：HMI画布，分享，说明，免责声明

文章大纲：
I. HMI画布概述
   A. 什么是HMI画布
   B. HMI画布的作用和功能
II. HMI画布的特点
   A. 可视化
   B. 灵活性
   C. 用户友好性
III. HMI画布的使用方法
   A. 创建画布
   B. 添加元素
   C. 进行布局
IV. HMI画布的案例分析
   A. 工业控制领域的应用
   B. 智能家居领域的应用
V. HMI画布的注意事项
   A. 免责声明的重要性
   B. 如何保护个人权益

正文：

I. HMI画布概述

HMI（Human Machine Interface）画布是一种用于人机交互的界面设计工具。它可以通过图形化的方式展示各种数据、信息和控制元素，使用户可以直观地与设备进行交互和控制。HMI画布通常用于工业控制系统、智能家居等领域。

II. HMI画布的特点

HMI画布具有以下几个特点：

1. 可视化：HMI画布采用图形化的方式展示各种数据和控制元素，使用户可以直观地理解和操作。

2. 灵活性：HMI画布可以根据用户的需求自定义设计，可以灵活地添加、删除和调整各种元素。

3. 用户友好性：HMI画布提供简洁明了的操作界面，使用户可以轻松地进行交互和控制。

III. HMI画布的使用方法

使用HMI画布可以按照以下步骤进行：

1. 创建画布：首先需要创建一个空白的画布，确定画布的大小和背景。

2. 添加元素：在画布上添加各种数据和控制元素，如文本、按钮、图表等。

3. 进行布局：对画布上的元素进行布局，调整它们的位置、大小和样式，使其符合用户的需求。

IV. HMI画布的案例分析

HMI画布在工业控制领域和智能家居领域都有广泛的应用。

1. 工业控制领域的应用：HMI画布可以用于监控和控制工业设备的运行状态，实现远程操作和故障诊断。例如，在一条生产线上，可以使用HMI画布展示各个设备的运行情况，并提供报警和控制功能，方便操作员进行监控和管理。

2. 智能家居领域的应用：HMI画布可以用于控制和管理智能家居设备，如照明、空调、窗帘等。用户可以通过HMI画布进行远程控制，调节设备的工作状态和参数。

V. HMI画布的注意事项

在使用HMI画布时，我们需要注意以下几点：

1. 免责声明的重要性：在分享HMI画布的过程中，我们必须强调免责声明的重要性。这是为了保护原作者的权益，防止侵权行为发生。

2. 如何保护个人权益：如果您认为自己的权益受到侵犯，可以通过联系站长等方式进行维权，保护自己的合法权益。

总结：

HMI画布是一种用于人机交互的界面设计工具，具有可视化、灵活性和用户友好性等特点。使用HMI画布可以根据用户需求自定义设计界面，并实现对各种设备的监控和控制。在分享HMI画布时，我们需要注意免责声明的重要性和如何保护个人权益。在工业控制和智能家居领域，HMI画布都得到了广泛的应用，并带来了便利和效益。
                                                                                                                                                                                                                                                 以上内容来自  AI机器人，如需继续对话，则在此回答下“点击回复” 或者 在提问时  “@机器人”！禁止 "黄赌毒及政治敏感"，违者封号，严重者 提交 网警公安部门。本站不对内容真实性负责，AI机器人有时候会乱说一通……