CN112230896A - 一种ahmi ide***渲染工具的实现方法 - Google Patents
一种ahmi ide***渲染工具的实现方法 Download PDFInfo
- Publication number
- CN112230896A CN112230896A CN202011132999.7A CN202011132999A CN112230896A CN 112230896 A CN112230896 A CN 112230896A CN 202011132999 A CN202011132999 A CN 202011132999A CN 112230896 A CN112230896 A CN 112230896A
- Authority
- CN
- China
- Prior art keywords
- drawing board
- ahmi
- event
- ide system
- rendering tool
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
- 238000009877 rendering Methods 0.000 title claims abstract description 24
- VDBHOHJWUDKDRW-UHFFFAOYSA-N 1-(1,1,2,3,3,6-hexamethyl-2h-inden-5-yl)ethanone Chemical compound CC1=C(C(C)=O)C=C2C(C)(C)C(C)C(C)(C)C2=C1 VDBHOHJWUDKDRW-UHFFFAOYSA-N 0.000 title claims abstract description 15
- 238000000034 method Methods 0.000 title claims abstract description 10
- 238000012544 monitoring process Methods 0.000 claims abstract description 5
- 230000000694 effects Effects 0.000 abstract description 15
- 238000011161 development Methods 0.000 abstract description 6
- 230000003993 interaction Effects 0.000 description 7
- 238000010586 diagram Methods 0.000 description 2
- 230000004075 alteration Effects 0.000 description 1
- 230000009286 beneficial effect Effects 0.000 description 1
- 238000013461 design Methods 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 230000008569 process Effects 0.000 description 1
- 238000012545 processing Methods 0.000 description 1
- 238000006467 substitution reaction Methods 0.000 description 1
- 238000012546 transfer Methods 0.000 description 1
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/20—Software design
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- General Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
本发明公开了一种AHMI IDE***渲染工具的实现方法，包括的步骤如下：新建一个画板，新建画板之后，可以在画板上进行内容的绘制,新建画板需要传入根源素的id,设置背景颜色；设置背景图片；添加一个元素,所述元素的各项参数如下，并会自动为每个元素生成一个id：通过S4中的id找到任意一个元素，并通过id删除所述元素；重新设置所述元素的属性；强制渲染工具重新渲染；监听任意一个事件，evt为事件名称；触发任意一个事件，evt为事件名称；将所述元素上移一层；将所述元素下移一层。本发明实现了一种AHMI IDE***的渲染工具(SXRender),该工具易于理解与学习，可以快速的实现基于Canvas的渲染效果。适合于AHMI IDE***的开发。
Description
技术领域
本发明涉及针对AHMI IDE***的渲染工具技术领域，具体为一种AHMI IDE***渲染工具的实现方法。
背景技术
人机界面(Human-Machine Interface,HMI)是用户和机器之间进行传递和交互的媒介，开发人机界面需要一套集成开发环境(IDE)的支持，此套IDE也是有本公司开发。IDE需要实时的提供用户设计的效果显示，并提供一些交互的手段和效果。
通过一套渲染工具来展示设计效果、响应用户交互与开启动画，可以在开发阶段不用再编写大量重复冗余的代码，而直接调用渲染工具的提供的方法，不用关心渲染工具内部的具体实现，大大提高了开发效率。
该工具可以在AHMI IDE***中方便的渲染绘制出目标效果，用于开发IDE***的各项与渲染显示、用户交互、动画有关的功能。
为此我们提出一种AHMI IDE***渲染工具的实现方法用于解决上述问题。
发明内容
本发明的目的在于提供一种AHMI IDE***渲染工具的实现方法，以解决上述背景技术中提出的问题。
为实现上述目的，本发明提供如下技术方案：一种AHMI IDE***渲染工具的实现方法，包括以下步骤：
S1:新建一个画板，新建画板之后，可以在画板上进行内容的绘制,新建画板需要传入根源素的id,配置参数如下表:
S2:设置背景颜色；
S3:设置背景图片；
S4:添加一个元素,所述元素的各项参数如下，并会自动为每个元素生成一个id：
S5:通过S4中的id找到任意一个元素，并通过id删除所述元素；
S6:重新设置所述元素的属性；
S7:强制渲染工具重新渲染；
S8:监听任意一个事件，evt为事件名称；
S9:触发任意一个事件，evt为事件名称；
S10:将所述元素上移一层；
S11:将所述元素下移一层。
与现有技术相比，本发明的有益效果是：本发明实现了一种AHMI IDE***的渲染工具(SXRender),该工具易于理解与学习，可以快速的实现基于Canvas的渲染效果。适合于AHMI IDE***的开发。
附图说明
图1为本发明中初始画板流程示意图；
图2为本发明中初始化画板代码图
图3为本发明中效果展示图；
图4为本发明中鼠标拖动内容效果流程图；
图5为本发明中鼠标点击效果流程图；
图6为本发明中鼠标释放效果流程图。
具体实施方式
下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。
请参阅图1-6，本发明提供一种技术方案：一种AHMI IDE***渲染工具的实现方法，包括以下步骤：
S1:新建一个画板，新建画板之后，可以在画板上进行内容的绘制,新建画板需要传入根源素的id,配置参数如下表:
S2:设置背景颜色；
S3:设置背景图片；
S4:添加一个元素,所述元素的各项参数如下，并会自动为每个元素生成一个id：
S5:通过S4中的id找到任意一个元素，并通过id删除所述元素；
S6:重新设置所述元素的属性；
S7:强制渲染工具重新渲染；
S8:监听任意一个事件，evt为事件名称；
S9:触发任意一个事件，evt为事件名称；
S10:将所述元素上移一层；
S11:将所述元素下移一层。
使用上述语法，在IDE***中编写渲染代码，然后***执行代码，经历初始化各项参数，正确执行代码指令，自动组织数据，并将数据按照顺序绘制在画板上。随后开始监听用户的交互,当用户交互发生时，自动重新渲染。实施流程如下：
创建画板
根据参数初始化画板的各项参数
添加绘制对象
自动将对象绘制到画板上
监听用户交互
初始化画板时更具体的流程如图1所示。
初始化一个画板并向画板中添加一个元素的流程图2的代码所示，代码使用javascript编写。
代码片段的第1句初始化了一个paintBoard(画板)，做了以下几件事情。
根据传入的idc作为画布的根节点，画布将在c元素之中。
根据传入的参数width，height作为画布的宽高。
根据传入的参数contentWidth，contentHeight(代表了内容的宽度和高度)，与width和height比较，判断画布的内容是否可以滚动，并进行相关设置。如果contentHeight大于height，则内容高度大于画布高度，画布无法完全展示其中的内功，因此可以通过滚动来展示溢出的内容。
根据传入的backgroundColor来设置画布的背景颜色。
其余未传入的参数则按照默认设置进行设置。
代码片段的第2句向画布中添加了一个对象，做了以下工作。
根据传入的参数，对象的类型是一个rect(矩形)。
根据传入的参数，矩形的宽高为0,0，宽高为100,100。
根据传入的参数，矩形的颜色是rgb(0,0,0)。
根据传入的参数，draggable，此控件是可以拖动的，可以进行鼠标按住此对象，并移动他的位置。
图3是一个效果展示图。可以看到画板中用一个黑色矩形，并且由于contentHeight大于height，画板中右侧出现了浅灰色的滚动条。
当鼠标拖住页面背景，可以实现滚动内容的效果，并且松手后可以实现自动滚动的动画。鼠标按住并拖动时，如果点在了可以拖动的元素上，则会拖动元素，否则，如果画板内容可以拖动，则拖动画板内容，并可以开启弹跳效果，即内容到达边界后，仍可以拖动一段内容。鼠标拖动内容效果流程图如图4所示。
鼠标点击在画布上SXRender会在内部自动的做一些处理与判断，其流程图如图5所示。
鼠标释放后，会根据释放的位置不同产生不同的效果。流程图如下所示。动量动画即内容在鼠标拖动的过程中有了一定的初速度，继而鼠标释放后，仍然可以自动滚动一会儿。弹跳动画是指内容被拖动到超出边界，鼠标释放后，内容自动滚动到边界位置。流程如图6所示。
尽管已经示出和描述了本发明的实施例，对于本领域的普通技术人员而言，可以理解在不脱离本发明的原理和精神的情况下可以对这些实施例进行多种变化、修改、替换和变型，本发明的范围由所附权利要求及其等同物限定。
Claims (1)
1.一种AHMI IDE***渲染工具的实现方法，其特征在于，包括以下步骤：
S1:新建一个画板，新建画板之后，可以在画板上进行内容的绘制,新建画板需要传入根源素的id,配置参数如下表:
S2:设置背景颜色；
S3:设置背景图片；
S4:添加一个元素,所述元素的各项参数如下，并会自动为每个元素生成一个id：
S5:通过S4中的id找到任意一个元素，并通过id删除所述元素；
S6:重新设置所述元素的属性；
S7:强制渲染工具重新渲染；
S8:监听任意一个事件，evt为事件名称；
S9:触发任意一个事件，evt为事件名称；
S10:将所述元素上移一层；
S11:将所述元素下移一层。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202011132999.7A CN112230896A (zh) | 2020-10-21 | 2020-10-21 | 一种ahmi ide***渲染工具的实现方法 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202011132999.7A CN112230896A (zh) | 2020-10-21 | 2020-10-21 | 一种ahmi ide***渲染工具的实现方法 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN112230896A true CN112230896A (zh) | 2021-01-15 |
Family
ID=74108969
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202011132999.7A Pending CN112230896A (zh) | 2020-10-21 | 2020-10-21 | 一种ahmi ide***渲染工具的实现方法 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN112230896A (zh) |
Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN105653612A (zh) * | 2015-12-24 | 2016-06-08 | 小米科技有限责任公司 | 页面渲染方法及装置 |
| CN109918604A (zh) * | 2019-03-07 | 2019-06-21 | 智慧芽信息科技(苏州)有限公司 | 网页绘图方法、装置、设备及存储介质 |
| CN110471656A (zh) * | 2018-05-10 | 2019-11-19 | 北京京东尚科信息技术有限公司 | 组件层级的调整方法和装置 |
| CN111694493A (zh) * | 2020-06-08 | 2020-09-22 | 杭州有赞科技有限公司 | 一种网页截图方法、计算机设备及可读存储介质 |
-
2020
- 2020-10-21 CN CN202011132999.7A patent/CN112230896A/zh active Pending
Patent Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN105653612A (zh) * | 2015-12-24 | 2016-06-08 | 小米科技有限责任公司 | 页面渲染方法及装置 |
| CN110471656A (zh) * | 2018-05-10 | 2019-11-19 | 北京京东尚科信息技术有限公司 | 组件层级的调整方法和装置 |
| CN109918604A (zh) * | 2019-03-07 | 2019-06-21 | 智慧芽信息科技(苏州)有限公司 | 网页绘图方法、装置、设备及存储介质 |
| CN111694493A (zh) * | 2020-06-08 | 2020-09-22 | 杭州有赞科技有限公司 | 一种网页截图方法、计算机设备及可读存储介质 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US20230334222A1 (en) | System and method for extended dynamic layout | |
| KR101787588B1 (ko) | 그래픽 객체의 조작 | |
| US10346013B2 (en) | Manipulating graphical objects | |
| US9619108B2 (en) | Computer-implemented systems and methods providing user interface features for editing multi-layer images | |
| US20130314434A1 (en) | System and method for image collage editing | |
| JP2003303047A (ja) | 画像入力及び表示システム、ユーザインタフェースの利用方法並びにコンピュータで使用可能な媒体を含む製品 | |
| AU2019205973A1 (en) | Responsive resize | |
| Mew | Learning Material Design | |
| US10649618B2 (en) | System and method for creating visual representation of data based on generated glyphs | |
| Lecarme et al. | The book of GIMP: A complete guide to nearly everything | |
| CN110796712A (zh) | 素材处理方法、装置以及电子设备、存储介质 | |
| US20230117213A1 (en) | Page display method and electronic device | |
| CN104574454A (zh) | 图像的处理方法及装置 | |
| CN111596848A (zh) | 一种界面取色方法、装置、设备及存储介质 | |
| CN106598410A (zh) | 电子书的显示方法、装置和终端设备 | |
| CN111259164A (zh) | 一种面向知识图谱的交互可视化方法及*** | |
| CN106648623B (zh) | 一种安卓***中字符的显示方法及装置 | |
| CN111158840B (zh) | 图像轮播方法及装置 | |
| CN111651107A (zh) | 一种3d模型前端显示方法、装置、设备及介质 | |
| CN112230896A (zh) | 一种ahmi ide***渲染工具的实现方法 | |
| Gustafson | HTML5 Web Application Development By Example Beginner's guide | |
| JP5828050B1 (ja) | キー入力表示装置、キー入力表示プログラムおよびキー入力表示方法 | |
| Ulloa | Kivy–Interactive Applications and Games in Python | |
| CN113672210A (zh) | 三角形图标代码生成方法、生成装置及可读存储介质 | |
| AU2013299742B2 (en) | Manipulating graphical objects |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination |