import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 2.2 Window {
visible: true
width: 640
height: 700
title: qsTr("Hello World") Rectangle{
id:rect;
width: 500;
height:400;
clip:true;
Image{
id: img;
x:( rect.width - width)/2;
y: (rect.height - height)/2;
width:{
var ratio = rect.width/rect.height;
var srcRatio = sourceSize.width/sourceSize.height;
if( ratio > srcRatio )
return height * srcra ;
else
return rect.width;
}
height:{
var ratio = rect.width/rect.height;
var srcRatio = sourceSize.width/sourceSize.height;
if(ratio > srcRatio)
return rect.height;
else
return width / srcRatio;
}
source: "tvline.jpg" }
MouseArea{
anchors.fill: parent;
drag.target:img;
hoverEnabled: true;
drag.axis:Drag.XAndYAxis;
drag.minimumX: -img.width/2;
drag.maximumX: img.width/2;
drag.minimumY: - img.height/2;
drag.maximumY: img.height/2;
onWheel:{ //滚轮;
if(wheel.modifiers & Qt.ControlModifier )
{
var datl = wheel.angleDelta.y/120;
if( datl > 0)
{
console.log("mouseX:"+mouseX+";mouseY:"+mouseY+";imgX:"+img.x+";imgY"+img.y)
img.x = mouseX + (img.x - mouseX) * 1.1;
img.y = mouseY +(img.y - mouseY) *1.1;
img.width = img.width * 1.1;
img.height = img.height * 1.1;
}
else
{
console.log("mouseX:"+mouseX+";mouseY:"+mouseY+";imgX:"+img.x+";imgY"+img.y)
img.x = mouseX + (img.x - mouseX) / 1.1;
img.y = mouseY +(img.y - mouseY) /1.1;
img.width = img.width /1.1;
img.height = img.height / 1.1;
}
}
} }
}
}

  

qml: 以鼠标为中心进行放缩;的更多相关文章

  1. html 出现粒子线条,鼠标移动会以鼠标为中心吸附的特效之canvas-nest.js插件

    我在网上看到一个很炫酷,很有趣的特效,网页上会有很多移动的粒子和线条,鼠标经过时会以鼠标为中心吸附过来,如果时间够久,会形成一个类似震动的.带辐条的车轮子的东西. 网上搜了一下,源码是github里面 ...

  2. qml 关于鼠标穿透的问题

    最近在开发过程中,遇到了鼠标穿透的问题.结合网上给予的方法,都试了一圈,在这里总结一下: import QtQuick 2.9import QtQuick.Window 2.2import QtQui ...

  3. QML鼠标事件实现变色矩形

    QML支持鼠标事件处理,我们可以利用这个来实现一个变色矩形示例,代码如下: import QtQuick 2.4 import QtQuick.Controls 1.3 import QtQuick. ...

  4. Qt 开启鼠标跟踪,自动激活mouseMoveEvent的问题

    最近在Qt上实现一个功能,鼠标在图片上移动,触发mouseMoveEvent事件,进而生成一个小的半透明窗口,放大显示以鼠标为中心的一个区域的图像并随鼠标移动.但是,必须鼠标摁下,才触发mouseMo ...

  5. HTML/JavaScript实现地图以鼠标为圆心缩放和移动

    代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...

  6. 让交互更加生动!有意思的鼠标跟随 3D 旋转动效

    今天,群友问了这样一个问题,如下所示的鼠标跟随交互效果,如何实现: 简单分析一下,这个交互效果主要有两个核心: 借助了 CSS 3D 的能力 元素的旋转需要和鼠标的移动相结合 本文,就将讲述如何使用纯 ...

  7. 【PCB】电子元件封装大全及封装常识

    电子元件封装大全及封装常识 电子元件封装大全及封装常识 一.什么叫封装封装,就是指把硅片上的电路管脚,用导线接引到外部接头处,以便与其它器件连接.封装形式是指安装半导体集成电路芯片用的外壳.它不仅起着 ...

  8. fackbook的Fresco (FaceBook推出的Android图片加载库-Fresco)

    [Android开发经验]FaceBook推出的Android图片加载库-Fresco   欢迎关注ndroid-tech-frontier开源项目,定期翻译国外Android优质的技术.开源库.软件 ...

  9. jQuery Mobile中文手册:开发入门

    jQuery Mobile 以“Write Less, Do More”作为目标,为所有的主流移动操作系统平台提供了高度统一的 UI 框架:jQuery 的移动框架可以让你为所有流行的移动平台设计一个 ...

随机推荐

  1. linux网络配置+远程工具使用

    ifconfig 网卡名 ip地址 就可以设定ip地址 只是临时改变ip地址,重启后会失效 secure crt  更改语言,用gb 和 utf8 两处修改

  2. centOS7 下配置和启动maria数据库

    从最新版本的linux系统开始,默认的是 Mariadb而不是mysql! 使用系统自带的repos安装很简单: yum install mariadb mariadb-server systemct ...

  3. 洛谷-p2764(最小路径覆盖)(网络流24题)

    #include<iostream> #include<algorithm> #include<queue> #include<cstring> #in ...

  4. PC平台的SIMD支持检测

    如果我们希望在用SIMD来提升程序处理的性能,首先需要做的就是检测程序所运行的平台是否支持相应的SIMD扩展.平台对SIMD扩展分为两部分的支持: CPU对SIMD扩展的支持.SIMD扩展是随着CPU ...

  5. Nginx 多核cpu负载均衡

    L:122 查看Linux CPU 缓存大小 cat /sys/devices/system/cpu/cpu1/cache/index0/size //指令缓存 cat /sys/devices/sy ...

  6. Tyche 2317 Color

    题目大意:有三个人alice,bob,yazid,三种颜色red,blue,green,每个人对应一种颜色. [name] is [color]. Yazid会做以下操作: 1 将三个句子连在一起 2 ...

  7. 保密工作与linux系统的发展

    保密工作从性质上可以分成商业方面的保密和国家安全方面的保密.由于自己从事的是IT方面的工作,工作中必然会接触涉及到计算机信息方面的相关文件.加上单位已近通过武器装备科研生产单位二级保密资格认证,今天就 ...

  8. CentOS安装、配置Nginx反向代理

    添加Nginx存储库 sudo yum install epel-release 安装Nginx sudo yum install nginx 启动Nginx sudo systemctl start ...

  9. 监听导航新增Tab选项卡-layui

    1. 加载element模块 2. 监听导航事件 3. 创建选项卡 //加载element模块 layui.use('element', function () { element = layui.e ...

  10. 洛谷P2918 [USACO08NOV]买干草(一道完全背包模板题)

    题目链接 很明显的一道完全背包板子题,做法也很简单,就是要注意 这里你可以买比所需多的干草,只要达到数量就行了 状态转移方程:dp[j]=min(dp[j],dp[j-m[i]]+c[i]) 代码如下 ...