【iVX 初级工程师培训教程 10篇文拿证】01 了解 iVX 完成新年贺卡

目录

【iVX 初级工程师培训教程 10篇文拿证】01 了解 iVX 完成新年贺卡
【iVX 初级工程师培训教程 10篇文拿证】02 数值绑定及自适应网站制作
【iVX 初级工程师培训教程 10篇文拿证】03 事件及猜数字小游戏
【iVX 初级工程师培训教程 10篇文拿证】04 画布及我和 iVX 合照
【iVX 初级工程师培训教程 10篇文拿证】05 画布及飞机大战游戏制作
【iVX 初级工程师培训教程 10篇文拿证】06 数据库及服务
【iVX 初级工程师培训教程 10篇文拿证】07 08 新闻页制作
【iVX 初级工程师培训教程 10篇文拿证】09 聊天室制作

高分提升请查看专栏:
iVX入门到精通
大话 IVX 实战到精通

一、了解 iVX

iVX 是一门编程语言,但与常规的编程不同,iVX是一款无代码的开发语言,对于不懂开发的初学者来说,抛弃了常规编程语言中的代码,使开发更加简单并高效;iVX 在开发某些功能时自带了对应的模块,开发起来更加高效,并且对于程序员来说可以导出其代码进行二次开发,极大的增加了开发效率且不失灵活。

iVX不仅是一门编程语言,还是一个IDE;开发者不需要下载对应的环境就可以在线的进行开发,在发布项目时还可以直接进行部署,并支持域名的解析;在这一方面,iVX 减省了对应的运维成本,开发者只需要关注应用功能,维护不再成为开发者头疼的事情。

二、项目创建

我们可以通过 iVX 的IDE链接进入开发界面:https://editor.ivx.cn/

点击链接进入到IDE页面后将会出现如下窗口,根据个人需要选择不同的类型进行开发。
在这里插入图片描述
在选择项目创建时,将会看到有 绝对定位 应用和 相对定位 应用,这两者的区别分别如下:

  • 绝对定位:使用绝对的 xy 坐标绘制应用元素(例如图片所在位置根据 xy 确定),之后将会通过示例详细讲解;
  • 相对定位:根据元素的相对位置在界面中进行定位,相对定位不会存在 xy 值(除非相对定位中存在一个绝对定位组件,例如画布)。

本次项目以绝对定位为例,选择绝对定位类型的 webApp项目,点击创建即可进入该项目的编辑界面:
在这里插入图片描述
点击创建后将会看到一个IDE界面如下:
在这里插入图片描述
在以上图片示例中可以看到几个常用区域:

  • 组件面板:在以上界面中,左侧为组件面板,组件面板是 iVX 中的可添加元素区域,在组件栏中可以找到你想要的元素添加至项目中,开发简单点击即可添加;
  • 属性面板:属性面板可以更改组件的属性,例如文本的颜色、大小,图片的来源、边框等;
  • 预览工具:预览区域可以对项目进行配置、发布以及获取预览地址;
  • 对象树:该项目中所有添加的元素在对象树中都可以找得到;
  • 事件及其他工具:添加事件、服务等内容; 舞台区:项目编辑、即时显示窗口;

三、常用组件

iVX 的组件一般是常规 Web、App 等开发中的常见元素,例如以下截图中所示:
在这里插入图片描述
特殊一点的组件还有变量组件:
在这里插入图片描述
在 iVX 中组件大体可以分为 可视组件、功能组件、容器组件,其中可视组件就是图片、文本这类;功能组件就是 for 组件、if 组件 、表格组件等这一类;容器组件可以理解为是 行列、变量等组件。

这些组件咱们将会在接下来的章节中进行讲解说明。

四、绝对定位与贺卡制作

4.1 绝对定位

绝对定位在 iVX 中指使用绝对的 xy 坐标对某一个元素进行位置上的定位。

首先我们选择前台表示在前台下添加组件,随后点击页面,接下来咱们在页面上进行组件的添加。
在这里插入图片描述
添加后的元素将会在对象树中进行显示:
在这里插入图片描述
接下来鼠标点击页面1,即可在左侧的组件面板中找到对应的内容进行添加。以文本为例,点击文本组件,鼠标将会变成一个十字可绘制的样式,点击后在舞台区进行绘制:
在这里插入图片描述
绘制完毕后得到一个文本,在对象树中点击添加的文本组件,可在属性面板中更改对应的文本内容:

更改完文本后即可在舞台区中看到对应更改的内容:
在这里插入图片描述
此时咱们可以看到这个元素的属性面板中有 xy 值,这个 xy 值是以舞台区左上角为原点,越往右 x 值越大,越往下 y 值越大,更改 xy 值可以更改此元素在界面中的位置:
在这里插入图片描述

4.2 贺卡制作

明白了基本的绝对定位内容后,咱们通过图片和文本绘制一个基本的贺卡界面,并在最后添加动态效果让其更加精美。

4.2.1 贺卡界面绘制

首先在对象树中删除之前添加的元素内容,可以右键点击删除,也可以选择组件后再 delete:
在这里插入图片描述
删除完毕后,在组件面板中找到图片,并且在舞台区进行绘制:
在这里插入图片描述
随后在弹出的资源选择器中选择对应的图片进行上传即可:
在这里插入图片描述
此时图片将会在舞台区域中进行显示,并且可以拖动小点更改大小,或者直接拖动图片更改位置:

,
更改图片位置大小,并且拖动到合适位置:
在这里插入图片描述

接着右键图片可复制图片:
在这里插入图片描述
再选择页面进行黏贴:
在这里插入图片描述
选中其中一涨图片,并且在对应属性中找到 y 轴旋转,输入 180 使其与 y 轴进行水平翻转:
在这里插入图片描述
此时将会得到一张完全翻转的图片:
在这里插入图片描述
最后再把这个图片移动至合适的位置即可:
在这里插入图片描述
接着添加一张门的图片:
在这里插入图片描述
若你想这个图片完全居中,那么可以在属性中找到 x 轴原点,将其置于 50% 处;因为在 ivx 中,图片的左上角为起始点,需要将图片的x原点置于中间,给予屏幕宽度大小的一半,即可完成居中:
在这里插入图片描述

接着更改 x 坐标为屏幕的一半即可,屏幕宽度尺寸可以在对象树之上进行更改或查看:
在这里插入图片描述
接着把图片 x 坐标改成 375 的一半 187 即可使其图片居中:
在这里插入图片描述
咱们接下来继续添加其他图片直到界面绘制成以下:
在这里插入图片描述
若你想将梅花放置于其他图片之下,你只需要将图片在对象树中的位置至于那张图片之下,这样就可以是其他图片覆盖这张图片。

接下来使用中文文本绘制出文本区域,使用中文文本的好处是可以使字体有中文文本样式:
在这里插入图片描述

在文本中输入新年快乐,并更改其颜色、字体、大小:
在这里插入图片描述
最后我们点击预览查看效果:
在这里插入图片描述
我们可以按F12更改当前浏览器为手机 Web 样式:
在这里插入图片描述
此时我们发现页面太死板并不是特别好看,我们点击顶部云朵图片,左侧的组件栏将会发现更变,选择出现的动效组件可以添加动态效果:
在这里插入图片描述
接着在动效组件中咱们可以选择某一个动效类型,接着选择预览即可进行查看效果,若觉得动效时间太长,可以增加动画时长,此时动画播放就会变慢,最后打开循环播放即可:
在这里插入图片描述
随后我们右键复制这个动态效果,复制到其他图片之中将会是页面更加生动:
在这里插入图片描述
随后我们预览发现,更改手机屏幕尺寸将会有部分内容留白,因为手机长度不一样:
在这里插入图片描述
此时我们只需要在页面中添加一个横幅组件,并且设置这个横幅用于居于屏幕底部,再将需要居于屏幕底部的组件添加到横幅之中即可:
在这里插入图片描述
此时可以看到,页面之上有一个补丁,这个补丁就是横幅的位置,在横幅的属性中选择横幅的位置为左下:
在这里插入图片描述
接下来把横幅的背景色改为透明、长宽改为0:
在这里插入图片描述
接下来将底部的元素在对象树中拖拽至横幅之中,此时发现狗和云朵都不在页面之上,这是因为横幅之中是有自己的 xy 值,狗和云朵有之前的 xy 值,此时将会根据坐标值显示:
在这里插入图片描述
接下来只需要把元素拖拉上来即可,随后更改页面的背景色为红色,点击预览即可完成:
在这里插入图片描述

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

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

相关文章

ArcGIS实验教程——实验二十六:ArcScene实现二维数据的三维显示

ArcGIS实验视频教程合集:《ArcGIS实验教程从入门到精通》(附配套实验数据)》 DEM三维显示: 地形数据+影像数据: 以上效果均是在ArcScene中实现的。 ArcScene允许用户制作具有透明效果的场景,在场景中能对数据进行浏览和交互。ArcAcene支持复杂的3D符号系统及纹理制图,支…

用Swashbuckle(swagger-ui)显示API帮助并进行调试

安装Swashbuckle: 打开NuGet控制台输入: Install-Package Swashbuckle 进行安装。查看帮助 在浏览器输入 http://调试项目地址/swagger/ui/index 可以看到帮助的效果API调试 点开调试的条目,填写相关参数,“Try it out!”

Android之Fatal Exception: org.greenrobot.greendao.DaoException: Could not init DAOConfig

1 问题 release apk运行奔溃提示错误如下 Fatal Exception: org.greenrobot.greendao.DaoException: Could not init DAOConfigat org.greenrobot.greendao.h.a.<init>(DaoConfig.java:28)at org.greenrobot.greendao.b.a(AbstractDaoMaster.java:1) 2 解决办法 progu…

Linux两块磁盘挂载指向一个文件夹LVM磁盘管理(一)

注意&#xff1a;任何磁盘的操作有可能损坏里面数据&#xff0c;请提前备份数据&#xff0c;切记&#xff01;切记&#xff01;切记&#xff01; 0x00&#xff1a;前言. 在Linux使用过程中&#xff0c;发现一个文件很大&#xff0c;比如5G&#xff0c;但是有两块物理磁盘一个剩…

AOL search

AOL: American On Line转载于:https://www.cnblogs.com/sophia194910/p/5006466.html

盘点现有开源软件许可合规工具

&#xff5c;原文出处&#xff1a;The Openchain Reference Tooling Work Group&#xff5c;翻译&#xff1a;刘天栋.Ted&#xff0c;开源社.ONES&#xff08;开源战略研究组&#xff09;&#xff5c;编辑&#xff1a;胡湘月&#xff5c;设计&#xff1a;周颖引言开源软件已经吞…

centos 7.4 docker

centos 7.4 docker 1.查看系统版本 cat /etc/redhat-release CentOS Linux release 7.4.1708 (Core)哈1 cat /etc/redhat-release CentOS Linux release 7.9.2009 (Core) 哈1-02 cat /etc/redhat-release CentOS Linux release 7.6.1810 (Core) 哈1-22 cat /etc/redhat…

2016-08-29

已完成&#xff1a; 1. 监督PHP后台完成学校部分接口 4. 评审添加孩子1 5. 评审安全上网 6. 评审答题器学生端 7. 认证方案初步 8. 安全网址方案初步&#xff1a;数据库搜索模式 9. 评审学习窗1 10. 评审学习窗2 11. 评审添加孩子2 12. 答题器研发启动会议 14. Log相关数据库设…

【前端就业课 第一阶段】HTML5 零基础到实战(十一)canvas 基础

注意&#xff1a;手机&#xff08;APP&#xff09;打开&#xff0c;内容显示更佳&#xff0c;不会的私聊博主即可 想要拿代码或加入学习计划&#xff08;** 博主会监督你并且教你写文章 **&#xff09;的拉到最下面&#xff08;PC端Web打开&#xff09;加博主即可&#xff0c;目…

【遥感数字图像处理教程】理论基础知识目录(5章全)

文章目录1. 专栏简介2. 专栏地址3. 专栏目录1. 专栏简介 遥感数字图像的处理&#xff0c;是对遥感数字图像的计算机处理。与工业和医学数字图像不同&#xff0c;遥感数字图像类型更为多样&#xff0c;内容更为复杂。因此&#xff0c;遥感数字图像的处理&#xff0c;不仅需要掌握…

Android OkHttp3简介和使用详解

一 OKHttp简介 OKHttp是一个处理网络请求的开源项目&#xff0c;Android 当前最火热网络框架&#xff0c;由移动支付Square公司贡献&#xff0c;用于替代HttpUrlConnection和Apache HttpClient(android API23 6.0里已移除HttpClient&#xff09;。 OKHttpGitHub地址 OKHttp优…

C语言试题一之计算并输出n(包括n)以内能被5或9整除的所有自然数的倒数之和

📃个人主页:个人主页 🔥系列专栏:C语言试题200例目录 💬推荐一款刷算法、笔试、面经、拿大公司offer神器 👉 点击跳转进入网站 ✅作者简介:大家好,我是码莎拉蒂,CSDN博客专家(全站排名Top 50),阿里云博客专家、51CTO博客专家、华为云享专家 1、题目 请编写函数…

MonoRail学习笔记十一:页面控件的填充和验证

Mono提供很多组件可以方便的处理页面&#xff1a;可以自动将后台的值填充到页面&#xff0c;可以自动进行Javascript验证&#xff0c;可以自动在后台验证等。这些功能都是比较实用的&#xff0c;可以减少很多开发 FormHelper是用来对应html页面中Form内的tag的&#xff0c;可以…

JavaBean的详细及引用

1.JavaBean实际是具有统一接口格式的java类 2.JavaBean的组成&#xff1a;属性(Properties)、方法(Method)、事件(Events) 3.一个JavaBean的例子(该例子是用的Simple属性<属性在以后说>) //我遵循的习惯是类名大写&#xff0c;包名小写package com;//意思是将 FirstBean这…

驱动开发实战之TcpClient

场景模拟假设你有一批非标设备需要对接&#xff0c;你需要根据设备方提供的协议&#xff0c;为IoTGateway开发驱动&#xff0c;进行数据交互。文章比较长也可以到官网会有更好的体验&#xff0c;地址:http://iotgateway.net/docs/iotgateway/driver/tcpclient请先浏览上一篇驱动…

php读取acc

<?PHP/*创建ADO连接*/$conn new COM("ADODB.Connection") or die ("ADO Connection faild.");$connstr "DRIVER{Microsoft Access Driver (*.mdb)}; DBQ" . realpath("DATUM/cnbt.mdb");$conn->Open($connstr);/*创建记录集查…

【遥感数字图像处理实验】Erdas版详细图文实验教程(8实验全)

文章目录1. 专栏简介2. 专栏地址3. 专栏目录1. 专栏简介 遥感数字图像的处理&#xff0c;是对遥感数字图像的计算机处理。与工业和医学数字图像不同&#xff0c;遥感数字图像类型更为多样&#xff0c;内容更为复杂。因此&#xff0c;遥感数字图像的处理&#xff0c;不仅需要掌握…

WEBAPI 增加身份验证 (OAUTH 2.0方式)

1&#xff0c;在Webapi项目下添加如下引用&#xff1a;Microsoft.AspNet.WebApi.OwinOwinMicrosoft.Owin.Host.SystemWebMicrosoft.Owin.Security.OAuthMicrosoft.Owin.Security.CookiesMicrosoft.AspNet.Identity.OwinMicrosoft.Owin.Cors2&#xff0c; 在项目下新建Startup类…

C语言试题二之计算并输出下列多项式值s=1+1/(1+2)+1/(1+2+3)+..1/(1+2+3…+50)

📃个人主页:个人主页 🔥系列专栏:C语言试题200例目录 💬推荐一款刷算法、笔试、面经、拿大公司offer神器 👉 点击跳转进入网站 ✅作者简介:大家好,我是码莎拉蒂,CSDN博客专家(全站排名Top 50),阿里云博客专家、51CTO博客专家、华为云享专家 1、题目 计算并输出…

无代码iVX编程实现简单 小蜜蜂 经典游戏

首先咱们打开 iVX 的在线编辑器&#xff1a;https://editor.ivx.cn/ 随后选择相对定位&#xff0c;咱们选择2D游戏类型制作一个简单小蜜蜂游戏&#xff1a; 接着咱们创建一个物理世界&#xff0c;并且将页面布局如以下&#xff1a; 以上布局中&#xff0c;矩形为模拟飞机、…