共计 2510 个字符,预计需要花费 7 分钟才能阅读完成。
1、写在后面
上一篇中咱们简略解说了 Qml 中实现电子放大的几种形式以及之间的优劣。
而咱们的 SkeyeARS
通过屡次测试和基于多种场景思考,选用的是 间接更改 width 和 height
实现电子放大。
外表上看仿佛非常简单,然而咱们的指标是实现细节缩放即 鼠标核心放大
。
并且,再插入平滑动画则更加完满,当然,也就相当简单了。
2、注释开始
首先,思考一下,咱们应该如何基于鼠标地位来进行放大。
- 计算鼠标在
VideoOutput
中的坐标,应用Item.mapToItem()
。 - 计算鼠标坐标绝对宽高的比例
xFactor
和yFactor
。 - 计算缩放后的宽高。
- 挪动
VideoOutput
至原地位。 - 应用
Animation
管制宽高和 坐标的变动。
当初来看看正确实现的要害代码:
MouseArea {
id: mouseArea
anchors.fill: parent
hoverEnabled: true
onWheel: {
let step = wheel.angleDelta.y / 15;
videoOutput.addScaleFactor(step * 0.004);
}
VideoOutput {
id: videoOutput
width: parent.width
height: parent.height
source: panoramicProvider
// 缩放因子, 原始源大小时为 1.0
property real scaleFactor: containerSize.width / sourceRect.width
property real minScale: 0.05
property real maxScale: sourceRect.width / parent.width + 10000.0
// 容器大小 (即 parent.size)
property size containerSize: Qt.size(parent.width, parent.height)
property real ratio: sourceRect.height / sourceRect.width
/**
* @brief 减少缩放因子,用此函数调整缩放
* @param factor 默认 0.08
* @param isCenter 是否核心缩放
*/
function addScaleFactor(factor = 0.08, isCenter = false) {if (painterButtons.fixedFillButton.checked) return;
scaleFactor += factor;
if (scaleFactor < minScale) {scaleFactor = minScale;} else if (scaleFactor > maxScale) {scaleFactor = maxScale;}
if (scaleAnimation.running) scaleAnimation.stop();
scaleWidthAnimation.to = sourceRect.width * scaleFactor;
scaleHeightAnimation.to = sourceRect.height * scaleFactor;
if (isCenter) {scaleXAnimation.to = (rect.width - scaleWidthAnimation.to) / 2;
scaleYAnimation.to = (rect.height - scaleHeightAnimation.to) / 2;
} else {let mapPos = mouseArea.mapToItem(videoOutput, mouseArea.mouseX, mouseArea.mouseY);
let xFactor = mapPos.x / width;
let yFactor = mapPos.y / height;
let diffX = scaleWidthAnimation.to - width;
let diffY = scaleHeightAnimation.to - height;
scaleXAnimation.to = x - xFactor * diffX;
scaleYAnimation.to = y - yFactor * diffY;
}
scaleAnimation.restart();}
ParallelAnimation {
id: scaleAnimation
NumberAnimation {
id: scaleWidthAnimation
property: "width"
target: videoOutput
duration: 220
}
NumberAnimation {
id: scaleHeightAnimation
property: "height"
target: videoOutput
duration: 220
}
NumberAnimation {
id: scaleXAnimation
property: "x"
target: videoOutput
duration: 220
}
NumberAnimation {
id: scaleYAnimation
property: "y"
target: videoOutput
duration: 220
}
}
}
}
至于如何应用?实际上在 onWheel
中曾经给出了形式。
例如,咱们想要放大到 2.0x
,只须要这样:
videoOutput.addScaleFactor(2.0 - videoOutput.scaleFactor);
而放大同理,并且,addScaleFactor
第二参数反对 核心放大模式
,能够在须要时传入即可。
最初咱们通过应用 ParallelAnimation
并行动画,就能够实现平滑晦涩的 4K、8K 超高清视频电子放大
成果。
收费下载体验:SkeyeARS 全景 AR 加强监视系统
## 对于 SkeyeARS ##
SkeyeARS 全景 AR 加强监视系统,是视开科技开发的一款基于宽场景多路视频无缝拼接、视频实时加强、监督指标加强显示、指标主动跟踪、视频存储回放、近程数据传输和多通道全景视频同步显示等性能的综合视频 AR 加强监视系统,广泛应用于智慧交通、智慧城市、智慧机场等大场景智能监控畛域。
具体阐明:http://www.openskeye.cn/web/product/ars
正文完