使用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. maven 编译替换占位符

    首先开启资源配置的插件,由此插件替换占位符 <plugin> <groupId>org.apache.maven.plugins</groupId> <art ...

  2. vue中监听页面滚动和监听某元素滚动

    ①监听页面滚动 在生命周期mounted中进行监听滚动: mounted () { window.addEventListener('scroll', this.scrollToTop) }, 在方法 ...

  3. sharepoint OOS打开文档使用新窗口

    总体说来就是在<a>标签上嵌入_blank $("a[onclick*='return DispEx'][target!='_blank']") .attr(" ...

  4. selenium java maven 自动化测试(二) 页面元素获取与操作

    在第一节中,我们已经成功打开了页面,但是自动化测试必然包含了表单的填写与按钮的点击. 所以在第二章中我以博客园为例,完成按钮点击,表单填写 还是以代码为准,先上代码: package com.ryan ...

  5. BZOJ 5248: [2018多省省队联测]一双木棋(对抗搜索)

    Time Limit: 20 Sec  Memory Limit: 512 MBSubmit: 439  Solved: 379[Submit][Status][Discuss] Descriptio ...

  6. 偏前端--之小白学习本地存储与cookie

    百度了很多都是讲的理论,什么小于4kb啊之类的,小白看了一脸懵逼复制到html中为什么没效果!!哈哈.我来写一个方便小白学习. 贴图带文字描述,让小白也运行起来,然后自己再去理解... 1. cook ...

  7. ps加强总结

    快捷键 1.ctrl+alt+z返回 2.ctrl+z撤销 3.ctrl+s保存 4.ctrl+shift+s另存为 5.shift是有序的选择   ctrl键是无序的选择 6.ctrl+g打组   ...

  8. vs code 修改文件的缩进

    百度这个问题的都是强迫症患者. 前人代码是2个空格缩进,我习惯3个, step1:打开  文件 —>  首选项 —> 设置,进入用户设置 step2:设置缩进量,(加两句代码) step3 ...

  9. python 爬虫基础知识(继续补充)

    学了这么久爬虫,今天整理一下相关知识点,还会继续更新 HTTP和HTTPS HTTP协议(HyperText Transfer Protocol,超文本传输协议):是一种发布和接收 HTML页面的方法 ...

  10. PTA基础编程题目集6-7 统计某类完全平方数 (函数题)

    本题要求实现一个函数,判断任一给定整数N是否满足条件:它是完全平方数,又至少有两位数字相同,如144.676等. 函数接口定义: int IsTheNumber ( const int N ); 其中 ...