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 的移动框架可以让你为所有流行的移动平台设计一个 ...
随机推荐
- 提高网络灵活性和效率的组网方式—SD-WAN
导读 最初,大多数企业只是简单地将软件覆盖添加到广域网连接上.但是,随着时间的推移,由于SD-WAN架构的易配置功能,企业将开始采用SD-WAN更复杂的功能. 广域网一般用于连接多个业务地点,如总部和 ...
- css中绝对定位和相对定位详解
相对定位relative和绝对定位absolute 相对定位 相对定位是标签在根据没加position样式前的位置来定位不会受父级标签的定位的影响,并且定位后不会脱离文本流,会占据原来的位置. 接下来 ...
- 了解AutoCAD对象层次结构 —— 5 —— 块表
为了清楚的了解块表的组成内容,让我们利用MgdDbg工具查看一下块表中的块表记录.在开始页面,以无样板模式新建一个.dwg文件(图 4‑7(1)),这样的话,默认的块表记录只有3条(图 4‑7(2)) ...
- redis日常使用汇总--持续更新
redis日常使用汇总--持续更新 工作中有较多用到redis的场景,尤其是触及性能优化的方面,传统的缓存策略在处理持久化和多服务间数据共享的问题总是不尽人意,此时引入redis,但redis是单线程 ...
- BZOJ2281[Sdoi2011]黑白棋&BZOJ4550小奇的博弈——DP+nimk游戏
题目描述 小A和小B又想到了一个新的游戏. 这个游戏是在一个1*n的棋盘上进行的,棋盘上有k个棋子,一半是黑色,一半是白色. 最左边是白色棋子,最右边是黑色棋子,相邻的棋子颜色不同. 小A可以移动白色 ...
- Mail.Ru Cup 2018 Round 2
A:阅读理解. #include<iostream> #include<cstdio> #include<cmath> #include<cstdlib> ...
- 51Nod 1381 硬币游戏
参考自:https://www.cnblogs.com/ECJTUACM-873284962/p/6445369.html 1381 硬币游戏 基准时间限制:1 秒 空间限制:131072 KB 分值 ...
- 云服务器ECS
云服务器Elastic Compute Service(ECS)是阿里云提供的一种基础云计算服务.使用云服务器ECS就像使用水.电.煤气等资源一样便捷.高效.您无需提前采购硬件设备,而是根据业务需要, ...
- 个人整理的数组splay板子,指针的写的太丑了就不放了。。
splay的板子.. 由于被LCT榨干了..所以昨天去学了数组版的splay,现在整理一下板子.. 以BZOJ3224和3223为例题..暂时只有这些,序列的话等有时间把维修序列给弄上来!! BZOJ ...
- bzoj 1029: [JSOI2007]建筑抢修 (优先队列)
链接:https://www.lydsy.com/JudgeOnline/problem.php?id=1029 思路: 按结束时间排序,优先选结束时间短的,选完后扔到优先队列里(大的优先),如果选到 ...