qml: 以鼠标为中心进行放缩;
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: 以鼠标为中心进行放缩;的更多相关文章
- html 出现粒子线条,鼠标移动会以鼠标为中心吸附的特效之canvas-nest.js插件
我在网上看到一个很炫酷,很有趣的特效,网页上会有很多移动的粒子和线条,鼠标经过时会以鼠标为中心吸附过来,如果时间够久,会形成一个类似震动的.带辐条的车轮子的东西. 网上搜了一下,源码是github里面 ...
- qml 关于鼠标穿透的问题
最近在开发过程中,遇到了鼠标穿透的问题.结合网上给予的方法,都试了一圈,在这里总结一下: import QtQuick 2.9import QtQuick.Window 2.2import QtQui ...
- QML鼠标事件实现变色矩形
QML支持鼠标事件处理,我们可以利用这个来实现一个变色矩形示例,代码如下: import QtQuick 2.4 import QtQuick.Controls 1.3 import QtQuick. ...
- Qt 开启鼠标跟踪,自动激活mouseMoveEvent的问题
最近在Qt上实现一个功能,鼠标在图片上移动,触发mouseMoveEvent事件,进而生成一个小的半透明窗口,放大显示以鼠标为中心的一个区域的图像并随鼠标移动.但是,必须鼠标摁下,才触发mouseMo ...
- HTML/JavaScript实现地图以鼠标为圆心缩放和移动
代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...
- 让交互更加生动!有意思的鼠标跟随 3D 旋转动效
今天,群友问了这样一个问题,如下所示的鼠标跟随交互效果,如何实现: 简单分析一下,这个交互效果主要有两个核心: 借助了 CSS 3D 的能力 元素的旋转需要和鼠标的移动相结合 本文,就将讲述如何使用纯 ...
- 【PCB】电子元件封装大全及封装常识
电子元件封装大全及封装常识 电子元件封装大全及封装常识 一.什么叫封装封装,就是指把硅片上的电路管脚,用导线接引到外部接头处,以便与其它器件连接.封装形式是指安装半导体集成电路芯片用的外壳.它不仅起着 ...
- fackbook的Fresco (FaceBook推出的Android图片加载库-Fresco)
[Android开发经验]FaceBook推出的Android图片加载库-Fresco 欢迎关注ndroid-tech-frontier开源项目,定期翻译国外Android优质的技术.开源库.软件 ...
- jQuery Mobile中文手册:开发入门
jQuery Mobile 以“Write Less, Do More”作为目标,为所有的主流移动操作系统平台提供了高度统一的 UI 框架:jQuery 的移动框架可以让你为所有流行的移动平台设计一个 ...
随机推荐
- linux网络配置+远程工具使用
ifconfig 网卡名 ip地址 就可以设定ip地址 只是临时改变ip地址,重启后会失效 secure crt 更改语言,用gb 和 utf8 两处修改
- centOS7 下配置和启动maria数据库
从最新版本的linux系统开始,默认的是 Mariadb而不是mysql! 使用系统自带的repos安装很简单: yum install mariadb mariadb-server systemct ...
- 洛谷-p2764(最小路径覆盖)(网络流24题)
#include<iostream> #include<algorithm> #include<queue> #include<cstring> #in ...
- PC平台的SIMD支持检测
如果我们希望在用SIMD来提升程序处理的性能,首先需要做的就是检测程序所运行的平台是否支持相应的SIMD扩展.平台对SIMD扩展分为两部分的支持: CPU对SIMD扩展的支持.SIMD扩展是随着CPU ...
- Nginx 多核cpu负载均衡
L:122 查看Linux CPU 缓存大小 cat /sys/devices/system/cpu/cpu1/cache/index0/size //指令缓存 cat /sys/devices/sy ...
- Tyche 2317 Color
题目大意:有三个人alice,bob,yazid,三种颜色red,blue,green,每个人对应一种颜色. [name] is [color]. Yazid会做以下操作: 1 将三个句子连在一起 2 ...
- 保密工作与linux系统的发展
保密工作从性质上可以分成商业方面的保密和国家安全方面的保密.由于自己从事的是IT方面的工作,工作中必然会接触涉及到计算机信息方面的相关文件.加上单位已近通过武器装备科研生产单位二级保密资格认证,今天就 ...
- CentOS安装、配置Nginx反向代理
添加Nginx存储库 sudo yum install epel-release 安装Nginx sudo yum install nginx 启动Nginx sudo systemctl start ...
- 监听导航新增Tab选项卡-layui
1. 加载element模块 2. 监听导航事件 3. 创建选项卡 //加载element模块 layui.use('element', function () { element = layui.e ...
- 洛谷P2918 [USACO08NOV]买干草(一道完全背包模板题)
题目链接 很明显的一道完全背包板子题,做法也很简单,就是要注意 这里你可以买比所需多的干草,只要达到数量就行了 状态转移方程:dp[j]=min(dp[j],dp[j-m[i]]+c[i]) 代码如下 ...