多种网站,班玛县网站建设公司,大学生网页设计期末作业,淘宝视频怎么下载文章目录 一、前言二、演示三、部分代码与分析 QML 其它文章请点击这里:
QT QUICK QML 学习笔记 国际站点 GitHub:
https://github.com/chenchuhan 国内站点 Gitee :
https://gitee.com/chuck_chee 一、前言
此 Demo 主要用于无人机吊舱视角的模拟#xf… 文章目录 一、前言二、演示三、部分代码与分析 QML 其它文章请点击这里:
QT QUICK QML 学习笔记 国际站点 GitHub:
https://github.com/chenchuhan 国内站点 Gitee :
https://gitee.com/chuck_chee 一、前言
此 Demo 主要用于无人机吊舱视角的模拟这种动态调整椭圆比例和方向文字的功能可以很好地表示吊舱的俯仰角变化和视野方向。通过滑块调整俯仰角椭圆比例随之改变同时方向标记实时旋转能够直观反映无人机当前的视角范围和角度变化。
二、演示 椭圆的俯仰角与动态缩放 pitchangle 随着滑块高度变化改变椭圆纵向半径 (radiusY)模拟俯仰角变化。 文本在椭圆轨迹上旋转通过 ellipseCanvas.movingTextAngle 动态计算角度滑块拖动时实时更新。 三、部分代码与分析 右侧滑块
通过 MouseArea 设置了竖直方向 (Drag.YAxis) 的拖动行为并限定滑块移动范围。梯度与样式滑块本身采用了绿色到蓝色的渐变样式且支持抗锯齿。信号处理onYChanged 调用 ellipseCanvas.requestPaint()触发椭圆和文字的重新绘制。
Rectangle {anchors.fill: parent;color: lightGrayRectangle {id: containeranchors {top: parent.top;topMargin: _margin * 2;bottom: parent.bottom;bottomMargin: _margin *2;right: parent.right;rightMargin: _margin}width: _pixradius: width/2;opacity: 0.6 //不透明度antialiasing: true // 抗锯齿具体效果见下面图片//黑色——棕色的渐变gradient: Gradient {GradientStop { position: 0.0; color: black }GradientStop { position: 1.0; color: brown }}//[重点2]:当面板放大放小的时候需要保持滑块的比例不变onHeightChanged: {if(height slider.height){ //当缩小的太小的时候可以把小滑块也跟着变小slider.height height; //小滑块高度 滑道高度}else {slider.height _pix*2; //小滑块高度 固定高度var _scale (height - _pix*2) / (oldHeight - _pix*2)//比列尺 * 之前的实际距离slider.y slider.y * _scale;oldHeight height;//[重点3]默认中间值也会随着长宽拖动而变化的。_defaultSilderValue height/2-_pix;}}//小滑块条Rectangle {id: sliderx: 1; y: container.height/2-_pix; //y轴向向下为负, 默认滑块放中间width: _pix-2; height: _pix*2 ;radius: width/2;antialiasing: truegradient: Gradient {GradientStop { position: 0.0; color: green }GradientStop { position: 1.0; color: aqua }}MouseArea {anchors.fill: parentanchors.margins: -_pixdrag.target: parent;drag.axis: Drag.YAxisdrag.minimumY: 1;drag.maximumY: container.height - slider.height-1;}onYChanged: {ellipseCanvas.requestPaint()}}}}下侧滑块
控制旋转角度 ellipseCanvas.movingTextAngle其值直接绑定到 Text 显示的内容。滑块范围设置为 0-360用于控制画布中旋转文本的角度。 Slider {id: slider2width: parent.width * 0.8height: 20minimumValue: 0maximumValue: 360stepSize: 1anchors.bottom: parent.bottomanchors.bottomMargin: 20anchors.horizontalCenter: parent.horizontalCenteronValueChanged : {ellipseCanvas.movingTextAngle value;ellipseCanvas.requestPaint();}}中间画布
主要负责绘制动态椭圆和沿轨道旋转的文字。通过纵向半径 (radiusY) 依据滑块位置动态变化模拟俯仰角比例 (pitchangle)。绘制椭圆中绘制了两个椭圆外圈为黑色内圈为白色。动态计算每个文字在椭圆轨迹上的位置角度通过滑块值和文字索引动态调整。在每个文字位置绘制刻度线长度固定。当滑块 slider 或 slider2 值发生变化时调用 ellipseCanvas.requestPaint() 触发重绘。 Canvas {id: ellipseCanvasproperty real movingTextAngle: 0 // 控制“北”文字的角度anchors.fill: parentonPaint: {var ctx ellipseCanvas.getContext(2d);var startX ellipseCanvas.width / 2 - radius;var startY ellipseCanvas.height / 2 - radius;var radiusX radiusvar pitchangle (slider.y)/(container.height- _margin *4)var radiusY radiusX * pitchangle;console.log([pitchangle]:, pitchangle)ctx.clearRect(0, 0, ellipseCanvas.width, ellipseCanvas.height);ctx.lineWidth 5ctx.strokeStyle blackctx.beginPath();ctx.ellipse(startX, startY, radiusX*2, radiusY*2);ctx.stroke();ctx.lineWidth 3ctx.strokeStyle whitectx.beginPath();ctx.ellipse(startX, startY, radiusX*2, radiusY*2);ctx.stroke();// 设置文本样式ctx.font 20px Arial;ctx.fillStyle black;// 绘制沿椭圆轨道旋转的文本var textArray [东, 南, 西, 北];var textAngleStep Math.PI / 2; // 每个文本之间的角度差for (var i 0; i textArray.length; i) {var textAngle i * textAngleStep; // 计算文本的角度// 计算文本位置输入角度从 0 到 360 度var angleInRadians (Math.PI * ellipseCanvas.movingTextAngle / 180 i * textAngleStep) % 360;var x startX radiusX (radiusX - ctx.measureText(textArray[i]).width*1.2) * Math.cos(angleInRadians) ;var y startY radiusY (radiusY - ctx.measureText(textArray[i]).width*1.2) * Math.sin(angleInRadians);// 绘制文本ctx.fillText(textArray[i], x-ctx.measureText(textArray[i]).width/2, yctx.measureText(textArray[i]).width/2);// 绘制刻度线ctx.strokeStyle redvar tickLength 10; // 刻度长度// 绘制刻度线ctx.beginPath();ctx.moveTo(startX radiusX radiusX*Math.cos(angleInRadians),startY radiusY radiusY*Math.sin(angleInRadians))ctx.lineTo(startX radiusX radiusX*Math.cos(angleInRadians) - tickLength * Math.cos(angleInRadians),startY radiusY radiusY*Math.sin(angleInRadians) - tickLength * Math.sin(angleInRadians));ctx.stroke();}}}
}QML 其它文章请点击这里: QT QUICK QML 学习笔记
