zoukankan      html  css  js  c++  java
  • Qt-QML-电子罗盘

    使用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"
    }
    }
    
    
    }
    }
    
    
    

  • 相关阅读:
    gulp教程、gulp-less安装
    vue学习总结
    javascript数组去重
    【操作系统】操作系统高频面试考点总结
    【面经系列】一线互联网大厂前端面试技巧深入浅出总结
    【编程题与分析题】Javascript 之继承的多种实现方式和优缺点总结
    【计算机网络】TCP基础知识详解
    【操作系统】操作系统面试基础知识点总结
    【数据结构与算法】数据结构基础知识总结(面试考点)
    【前端知识体系-JS相关】JS-Web-API总结
  • 原文地址:https://www.cnblogs.com/DreamDog/p/9159965.html
Copyright © 2011-2022 走看看