首页 > 专利技术

qml中使用canvas绘制温度计

qml中使⽤canvas绘制温度计

⽹上只到⼀篇vip⽂章，没钱充会员，只能⾃⼰画了

使⽤环境QT5.12.7

main.qml代码如下

// An highlighted block

import QtQuick 2.12

import QtQuick.Window 2.12

Window {

visible:true

width:400

height:680

title:qsTr("Hello World")

Rectangle {

id: rect1

width:200

height:600

color:"gray"

Canvas{

id:myCanvas

width: parent.width

height: parent.height

anchors.fill: parent

onPaint:{

var ctx =getContext("2d");

//起始⾓度，结束⾓度

var beginAng =1.35*Math.PI

var endAng =1.65*Math.PI

var allH =500//圆和柱连接点⾼

var allw =100//柱顶端⾼

var r =10//圆半径

var cT =0;//当前温度

var minTemperature =-50//最⼩温度

var maxTemperature =110//最⼤温度

var intervalGrid =(parseInt(maxTemperature/10)-parseInt(minTemperature/10))*2//从最⼩值到最⼤值有多少个格⼦

var intervalDistanse =(400-50)/intervalGrid //每个格⼦的距离

cT = cT>maxTemperature?maxTemperature:(cT<minTemperature?minTemperature:cT)// 限制温度计超出

var currentTemperature = allH+s(120-beginAng)-(10+(cT-minTemperature)/10*intervalDistanse*2)//当前温度解析为填空柱⾼//柱边框

ctx.beginPath();

ctx.lineWidth=3;

ctx.strokeStyle='#fff';

/ ctx.fillStyle="#f00";

// veTo(allw,allw)

ctx.lineTo(allw+r*Math.sin(120-beginAng),100);

ctx.lineTo(allw-r*Math.sin(120-beginAng),100);

ctx.lineTo(allw-r*Math.sin(120-beginAng),allH+s(120-beginAng));

ctx.stroke();

// ctx.fill();接地变

ctx.font ="18px bold ⿊体";

// 设置颜⾊

ctx.fillStyle ="#ff0";

// 设置⽔平对齐⽅式

// 设置垂直对齐⽅式

// 绘制⽂字（参数：要写的字，x坐标，y坐标）

ctx.fillText("℃", allw+r*Math.sin(120-beginAng)+20,100-20);

ctx.fillText("℉", allw-r*Math.sin(120-beginAng)-20,100-20);

ctx.closePath()

//右刻度

for(var i=0;i<=intervalGrid;i++){

ctx.beginPath();

ctx.lineWidth=2;

if(i%2==0){

ctx.strokeStyle='#fff';

ctx.lineTo(allw+r*Math.sin(120-beginAng)+20,allH+s(120-beginAng)-10-i*intervalDistanse)

ctx.font ="18px bold ⿊体";

// 设置颜⾊

监测网站

ctx.fillStyle ="#ff0";

// 设置⽔平对齐⽅式

/ 设置垂直对齐⽅式

// 绘制⽂字（参数：要写的字，x坐标，y坐标）

ctx.fillText(minTemperature+10*i/2, allw+r*Math.sin(120-beginAng)+45,allH+s(120-beginAng)-10-i*intervalDistanse);

}else{

ctx.strokeStyle='#fee';

ctx.lineTo(allw+r*Math.sin(120-beginAng)+10,allH+s(120-beginAng)-10-i*intervalDistanse)

}

ctx.stroke()

ctx.closePath()

}

盛泽坯布网>软膜布//左刻度

for(var i=0;i<=intervalGrid;i++){

ctx.beginPath();

ctx.lineWidth=2;

if(i%2==0){

ctx.strokeStyle='#fff';

ctx.lineTo(allw-r*Math.sin(120-beginAng)-20,allH+s(120-beginAng)-10-i*intervalDistanse)

ctx.font ="18px bold ⿊体";

// 设置颜⾊

ctx.fillStyle ="#ff0";

// 设置⽔平对齐⽅式

// 设置垂直对齐⽅式

// 绘制⽂字（参数：要写的字，x坐标，y坐标）

ctx.fillText(32+(minTemperature+10*i/2)*1.8, allw-r*Math.sin(120-beginAng)-45,allH+s(120-beginAng)-10-i*intervalDistanse);

}else{

ctx.strokeStyle='#fee';

ctx.lineTo(allw-r*Math.sin(120-beginAng)-10,allH+s(120-beginAng)-10-i*intervalDistanse)

}

ctx.stroke()喇叭网罩

ctx.closePath()

}

//柱填充

ctx.beginPath();

ctx.lineWidth=3;

ctx.strokeStyle='#fff';

ctx.fillStyle="#f00";

// veTo(allw,allw)

ctx.lineTo(allw-r*Math.sin(120-beginAng),currentTemperature);

ctx.lineTo(allw-r*Math.sin(120-beginAng),allH+s(120-beginAng)); ctx.stroke();

ctx.fill();

ctx.closePath()

//圆填充

ctx.beginPath();

ctx.lineWidth=3;

ctx.strokeStyle='#fff';

ctx.fillStyle="#f00";

ctx.arc(allw,allH,r,beginAng,endAng,true);

ctx.stroke();

ctx.fill();

ctx.closePath()

}

带风扇的安全帽}

}

本文发布于:2024-09-21 10:43:11，感谢您对本站的认可！

本文链接：https://www.17tex.com/tex/3/278624.html

上一篇：电力安装工长培训教材_图文

下一篇：煤矿采掘头面核定申请

标签：参数值有绘制温度计没钱解析

留言与评论（共有 0 条评论）