使用QML中的Canvas实现电子罗盘绘制,效果图如下

一个简单的电子罗盘,红色N极。其中中间飞机表示当前的指向,

还是比较简单的,直接上代码吧

/*
作者:张建伟
时间:2018年4月27日
简述:电子罗盘界面实现
*/
importQtQuick2.0

Rectangle
{
id:root
width:200
height:200
anchors.centerIn:parent
color:"transparent"

propertyintm_Angle:0

Rectangle
{
width:parent.width
height:parent.height
color:"transparent"
rotation:root.m_Angle
Canvas
{
anchors.fill:parent
onPaint:
{
varctx=getContext("2d");
//绘制圆圈
ctx.lineWidth=2;
ctx.strokeStyle="#FFFFFF";
ctx.globalAlpha=1.0;
ctx.beginPath();
ctx.arc(width/2,width/2,width/2-2,0,2*Math.PI);
ctx.stroke();
ctx.restore();
for(vari=0;i<36;i++)
{
ctx.save();
ctx.translate(width/2,height/2);
ctx.rotate(i*10*Math.PI/180);
ctx.beginPath();
if(i%9==0)
{
ctx.moveTo(0,-width/2+12);
ctx.lineTo(0,-width/2+2);
}
else
{
ctx.moveTo(0,-width/2+10);
ctx.lineTo(0,-width/2+2);
}
ctx.stroke();
ctx.restore();
}
}
}
Rectangle
{
width:20
height:20
anchors.horizontalCenter:parent.horizontalCenter
anchors.top:parent.top
anchors.topMargin:12
rotation:-parent.rotation
color:"#00000000"
Text{
anchors.centerIn:parent
font.family:"微软雅黑"
font.pixelSize:14
color:"#FF0000"
text:qsTr("N")
}
}
Rectangle
{
width:20
height:20
anchors.verticalCenter:parent.verticalCenter
anchors.right:parent.right
anchors.rightMargin:12
color:"#00000000"
rotation:-parent.rotation
Text{
anchors.centerIn:parent
font.family:"微软雅黑"
font.pixelSize:14
color:"#FFFFFF"
text:qsTr("E")
}
}
Rectangle
{
width:20
height:20
anchors.verticalCenter:parent.verticalCenter
anchors.left:parent.left
anchors.leftMargin:12
color:"#00000000"
rotation:-parent.rotation
Text{
anchors.centerIn:parent
font.family:"微软雅黑"
font.pixelSize:14
color:"#FFFFFF"
text:qsTr("W")
}
}
Rectangle
{
width:20
height:20
anchors.horizontalCenter:parent.horizontalCenter
anchors.bottom:parent.bottom
anchors.bottomMargin:12
color:"#00000000"
rotation:-parent.rotation
Text{
anchors.centerIn:parent
font.family:"微软雅黑"
font.pixelSize:14
color:"#FFFFFF"
text:qsTr("S")
}
}
Rectangle
{
width:50
height:50
color:"transparent"
rotation:-parent.rotation
anchors.centerIn:parent
Image{
anchors.fill:parent
source:"file:Images/Su_33_Pointer.png"
}
}

}
}

Qt-QML-电子罗盘的更多相关文章

  1. Qt qml 单例模式

    Qt qml 单例模式,没什么好说的,看代码吧.单例模式很适合做全局的配置文件. [示例下载] http://download.csdn.net/detail/surfsky/8539313 [以下是 ...

  2. Qt qml listview 列表视图控件(下拉刷新、上拉分页、滚动轴)

    Qt qml listview下拉刷新和上拉分页主要根据contentY来判断.但要加上顶部下拉指示器.滚动条,并封装成可简单调用的组件,着实花了我不少精力:) [先看效果]    [功能] 下拉刷新 ...

  3. qt qml qchart 图表组件

    qt qml qchart 图表组件 * Author: Julien Wintz * Created: Thu Feb 13 23:41:59 2014 (+0100) 这玩意是从chart.js迁 ...

  4. qt qml中PropertyAnimation的几种使用方法

    qml文章 qt qml中PropertyAnimation的几种使用方法 动画应用场景有以下几种: 首先如果一个Rectangle.动画是要改变它的x和y值 1,Rectangle一旦被创建,就要移 ...

  5. Qt QML referenceexamples attached Demo hacking

    /********************************************************************************************* * Qt ...

  6. Qt qml的软件架构设计

    google: qt qml application architecture 有很多资源. 1 https://www.ics.com/blog/multilayered-architecture- ...

  7. QT QML目录导航列表视图

    [功能] /目录.文件 /文件过滤 /递归 /事件 /高亮当前行 /当前选项 /目录切换动画 /限制根目录 [下载]:http://download.csdn.net/detail/surfsky/8 ...

  8. Qt(QML)本地化

    Internationalization and Localization with Qt Quick 程序国际化 1) Use qsTr() for all  Literial UI strings ...

  9. qt qml 利用xmlhttprequest 调用有赞api

    最近朋友在有赞商城上面开了一个店铺,因为有实体店,一般卖商品后送货上门,但是打票时候老是人工用world文档人工复制黏贴订单打印小票, 所以就找我帮忙做一个软件专门打印小票的,就研究起来调用有赞第三方 ...

  10. QT QML 3D模型查看器

    原文链接:http://amin-ahmadi.com/2018/01/28/viewing-3d-models-using-qt/ 本文使用QT Quick中的Scene3D QML类型来查看3D模 ...

随机推荐

  1. 让isis支持高德地图

    概述 由于项目需要用到地图,虽然isis的插件库里有个现成的地图实现,不过用的google地图,虽然google地图可以不用注册Appkey,但完全打不开.所以打算改成国产地图. 效果 先看下运行效果 ...

  2. javaSE、javaEE、javaME

    javaSE.javaEE.javaME区别: Java SE 是做电脑上运行的软件. Java EE 是用来做网站的-(我们常见的JSP技术) Java ME 是做手机软件的.

  3. Angular动态表单生成(三)

    ng-dynamic-forms实践篇(上) 定个小目标 先来定个小目标吧,我们要实现的效果: 动态生成一个表单,里面的字段如下: 字段名称 字段类型 验证 备注 姓名 text 必填,长度小于15 ...

  4. 极光客户互动云java post请求

    package com.common.utils; import java.io.IOException; import java.net.URLDecoder; import java.util.M ...

  5. Xcode缓存数据清除

    1. 移除 APP 打包的ipa历史版本(Archives) 不可恢复,就是你打的包,如果需要dysm文件,及时备份 路径:~/Library/Developer/Xcode/Archives 2. ...

  6. jdk8新特性-stream

    一.什么是流stream 1.可理解为高级版本的 Iterator 不是集合元素,它不是数据结构并不保存数据,它是有关算法和计算的. 2.单向,不可往复 数据只能遍历一次,遍历过一次后即用尽了,就好比 ...

  7. Ubuntu 16.04 64位安装YouCompleteMe

    之前记录在OneNote上感觉有点乱,而且不适合保存shell,这次重新安装又出问题了,干脆写篇博客记录. 从零开始 1.git(用来下载vim和相关插件) sudo apt-get install ...

  8. 执行mongod其他实例出现的问题

    windows环境下,配置其他mongo实例,会出现一些问题 1.配置路径不对,执行bat文件时出现闪屏 根据提示创建C:\data\db\ 目录(因为mongodb默认在/data/db下创建数据库 ...

  9. tp3.2和Bootstrap模态框导入excel表格数据

    导入按钮 <button class="btn btn-info" type="button" id="import" data-to ...

  10. [示例] 用代码设置 ListView 颜色 (只适用 Win 平台,无需修改官方源码)

    如果可以使用代码随意设置 ListView 的颜色,而不用加载额外的 Style 及修改官方的源码,那该有多好?! 其实 Style 提供了很强了扩充性及可塑性,可以很容易的去操作它. 下面以 Lis ...