1、写在后面

上一篇中咱们简略解说了 Qml 中实现电子放大的几种形式以及之间的优劣。

而咱们的 SkeyeARS 通过屡次测试和基于多种场景思考，选用的是 间接更改 width 和 height 实现电子放大。

外表上看仿佛非常简单，然而咱们的指标是实现细节缩放即 鼠标核心放大。

并且，再插入平滑动画则更加完满，当然，也就相当简单了。

2、注释开始

首先，思考一下，咱们应该如何基于鼠标地位来进行放大。

  1. 计算鼠标在 VideoOutput 中的坐标，应用 Item.mapToItem()。
  2. 计算鼠标坐标绝对宽高的比例 xFactor 和 yFactor。
  3. 计算缩放后的宽高。
  4. 挪动 VideoOutput 至原地位。
  5. 应用 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