必威体育Betway必威体育官网
当前位置:首页 > IT技术

2 画图软件 界面设计

时间:2019-10-11 18:15:44来源:IT技术作者:seo实验室小编阅读:84次「手机版」
 

软件界面设计

  1. 打开Qt creator
  2. 新建项目

    (1)选择Qt控件项目–> Qt Gui应用(为了适合新手我尽量附图)

    这里写图片描述

    (2)点击确定后出现项目名称和创建路径大家自己选择喽。我起的名称是pen

    然后一直点击下一步就好了

  3. 我们双击界面文件mianwindow.ui,出现如下界面

    这里写图片描述

    (1)菜单设计

    我们双击在“在这里输入” 输入我们依次输入我们的菜单名字PS:输入一次,按下回车Enter键。如果发现不支持中文。见我的另外一篇博客,里面有解决方案。完成如下图所示:

    这里写图片描述

    然后我们点击“文件”菜单双击在这里输入如下图所示这里写图片描述

    依次输入新建、打开、保存、另存为、打印、退出

    同样点击查看 依次输入放大、缩小、旋转、还原

    工具菜单里输入编辑、橡皮擦、撤销、恢复

    帮助里输入关于本软件

    输入好如下图所示,这里我只贴了一个图片

    这里写图片描述

    (2)工具栏设计

    如果不知道什么是工具栏自己百度吧。

    首先我们要给菜单添加图标;因此我们首先为项目创建资源文件。

    选中我们的项目名称,右击点击”添加文件”。点击Qt选择资源文件,确定后名称自己定。我起的是images。然后一直下一步就好了。

    出现如下图:这里写图片描述

    如上图点击“添加前缀” 前缀输入myicon 根据自己喜好自己起名字。起好如下图所示

    这里写图片描述接下来点击“添加”,选择添加文件。选择我们要添加的图标。(补充图标哪里来,到这个网站去下载。比如我们在这个网站输入打开,就会出现相应图标,下载下来就好啦,免费的。但是要注册账号)http://www.iconfont.cn/home/index?spm=a313x.7781069.1998910419.2

    下图为我放在工程目录下的图标。我把所有图标放在images文件夹下。

    这里写图片描述点击“添加”,选择添加文件找到images文件夹进入后全部选中所有图标。点击“打开”。之后就如下图所示

    这里写图片描述

    Ps:按下ctrl+s保存所有文件。不然一会在资源文件中可能找不到图标。

    菜单添加图标

    双击“mainwindow.ui”文件这里写图片描述 双击如上图所示的“action”出现如下图所示,点击“…”。

    这里写图片描述

    点击下图红线标注的按钮

    这里写图片描述

点击images 然后找到新建图标选中确定如下图

这里写图片描述

这时候可以看大action前面有图标了,如下图所示

这里写图片描述

按照上述操作给所有菜单添加图标。

完成后我们开始工具栏设计

鼠标左键选中action 往上拖,看到鼠标样式变成小手松开出现如下图

这里写图片描述

这样就把菜单添加到工具栏了。我们依次添加我们想要的菜单到工具栏,这样做当然是方便软件的操作相当于快捷方式了。

(3)绘图工具栏设计

我们在左边的部件栏里找到Dock Widget 拖入到界面中。默认坐标自动停靠。将其属性windowtitle改为“画图工具”。

然后拖入四个Label 便签名字依次命名为:选择图形、画笔线宽、画笔颜色、填充颜色。

然后拖入三个Combo Box 。对象名称objectName依次修改为:ShapeComboBox,pencolorComboBox,brushColorComboBox. 接着拖入Spin Box 修改对象名字为penWidthSpinBox. 修改其属性Minimum为1.

上述完成后如下图所示。

这里写图片描述

双击选择图形标签下面的Combo Box。点击+号依次写入无,点,直线,矩形。如下图所示

这里写图片描述

对于画笔颜色填充颜色我们将在后文实现。

最后我们选中Dock Widget就是我们的编辑工具。右击布局选择栅格布局。

最后我们运行程序生成的界面如下图所示:

这里写图片描述

好了这次更新就到这里,我们将在3 添加画布 开始我们的绘图设计。

相关阅读

系统分析与设计方法---用户界面设计的原则

用户界面设计   接口设计主要包括三个方面的内容:一是设计软件构件间的接口;二是设计模块和其他非人的信息生产者和消费者(如外部

界面设计时该如何面对视觉误差?

编者按:前几天的“蓝黑白金”事件,已经有设计师同学揭秘了误差的原因,木想到今天百度的同学出了升级版的教程,聊聊界面设计过程中,遇到

系列|一款APP设计的从0到1:界面设计篇

《一款APP设计的从0到1》这是一篇系列文章干货,上次U妹讲的是关于APP项目立项和预估时间篇,今天U妹来说一下,APP界面设计和iPad界面

腾讯界面设计工具UIDESIGNER2.0体验报告

腾讯UIDesigner2.0发布了,发布前还饶有趣味的弄了个倒计时,吊足了大家的口味啊!先来介绍一下这个软件简介UIDesigner,简称“UID

小程序开发文档之界面设计指南

相较于APP而言,小程序的产品属性更强,尽管内容不如APP丰富,但都满足人们的刚需。由于其“即用即走”的特点,满足的是用户的

分享到:

栏目导航

推荐阅读

热门阅读