文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

实现pc端鼠标滚轮缩放图片的步骤

之前写一个图片预览插件的时候，遇到了鼠标滚轮滚动进行图片缩放的需求，现在来回顾一下。...获取鼠标滚动方向 阻止了鼠标滚动的默认事件之后，我们就要开始进入正题了。获取鼠标滚动的数据进行图片缩放，其实主要就是获取鼠标滚动的方向，向上滚动就放大，向下滚动就缩小。...据搜索得知，事件参数中，代表鼠标滚轮滚动方向的参数为e.wheelDelta，我们可以打印一下 scrollFunc(e) { // ......// 鼠标滚轮缩放 scrollFunc(e) { e = e || window.event // 火狐下没有wheelDelta，用detail代替，由于detail值的正负和wheelDelta...我们在上面获取鼠标滚轮滚动方向之后，会执行scaleFunc函数，并传入一个参数，当鼠标向上滚动时，传入0.05，意为放大0.05倍（实际倍数1+0.05），反之缩小0.05倍。

2.2K30
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    【Java AWT 图形界面编程】使用鼠标滚轮缩放 Canvas 画布中绘制的背景图像 ( 绘制超大图像 + 鼠标拖动 + 鼠标滚轮缩放 + 以当前鼠标指针位置为缩放中心 示例 )

    一、鼠标滚轮缩放的中心点设置为当前鼠标中心点 - 要点分析 ---- 鼠标指针指向界面中的 Canvas 画布某个位置 , Canvas 画布中绘制着一张超大图片 , 以该位置为中心 , 滑动鼠标滚轮时进行缩放...; 使用鼠标滚轮缩放后 , 在 Canvas 中绘制的图片的尺寸肯定是放大或者缩小了 , 尺寸发生了改变 ; 图片缩放时 , 鼠标指针指向一个位置 , 该位置对应着一个当前 Canvas 画布中的 x..., y 坐标 , 同时可以计算出当前位置对应的图片中的 水平方向的比例 和 垂直方向的比例 ; 在缩放后的图片中 , 只要保证鼠标指针指向相同的 x, y 坐标时 , 该位置对应的 水平方向的比例 和..., 并设置图片位置 ; 这样图片缩放时 , 始终可以保证鼠标指向的部位保持位置不变 ; 1、保存当前鼠标指针指向的位置 首先 , 在类中定义如下成员字段 , pointer_x 和 pointer_y...在鼠标滚轮缩放完成后 , 再根据鼠标指针指向的位置和比例 , 结合图片缩放后的尺寸 , 重新计算画布偏移的位置 , 以达到鼠标指向的图片元素位置基本保持不变的目的 ; /** * 计算新的比例

    2.8K10

    【Java AWT 图形界面编程】使用小键盘按键缩放 Canvas 画布中绘制的背景图像 ( 键盘按键监听 + 绘制超大图像 + 鼠标拖动 + 鼠标滚轮缩放 + 以当前鼠标指针位置为缩放中心 示例 )

    一、键盘按键监听 - 要点分析 ---- 如果要为 Java AWT 界面编程的应用设置键盘按键监听 , 必须为 Frame / JFrame 窗口设置键盘监听 , 为组件设置是无效的 ; 下面是设置键盘监听的核心代码...+ 绘制超大图像 + 鼠标拖动 + 鼠标滚轮缩放 + 以当前鼠标指针位置为缩放中心 示例 ---- 在 【Java AWT 图形界面编程】Canvas 中绘制超大图片 ( 使用鼠标拖动查看全图 | 设置...Canvas 画布 ( 鼠标滚轮事件监听器 MouseWheelListener ) 博客中 , 新增鼠标滚轮缩放画布示例 , 但是使用鼠标拖动时 , 拖动的效果也随之缩放, 如 缩小画布后 , 移动鼠标..., 移动距离对应的缩放效果也随之缩小 ; 在 【Java AWT 图形界面编程】使用鼠标滚轮放大缩小 Canvas 画布中绘制的背景图像 ( 鼠标滚轮事件监听器 MouseWheelListener...| Canvas 中绘制图像并设置图像大小 ) 博客中 , 使用缩放背景图像的方式 , 实现缩放效果 ， 并同时福袋鼠标指针拖拽效果 ; 本博客中实现的案例 , 在上面的基础上 , 添加了鼠标滚轮缩放的中心点设置为当前鼠标中心点

    1.8K20

    Canvas鼠标滚轮缩放以及画布拖动(图文并茂版)

    Canvas鼠标滚轮缩放以及画布拖动 本文会带大家认识Canvas中常用的坐标变换方法 translate 和 scale，并结合这两个方法，实现鼠标滚轮缩放以及画布拖动功能。...实现鼠标滚轮缩放 效果 实现原理 鼠标滚轮的放大需要结合上面介绍的 Canvas 的 translate 和 scale 两个方法进行组合变换。...缩放原理 在缩放的时候，会调用 scale(n, n) 方法，将坐标系放大 n 倍。假设鼠标滚轮停在 A 点进行放大操作，放大之后得到坐标 A' 点。...缩放原理图 鼠标停留在 A 点对蓝色矩形进行放大，放大系数为 n，蓝色矩形的起点左上角和坐标原点重合，宽度和高度分别是 x 和 y，因此，A点的坐标为 (x, y)。...this.ctx.scale(this.scale, this.scale); this.draw(); } 总结 本文从基础原理到代码实现，完整给大家讲解了 Canvas 画布绘制中经常会遇到的画布拖动和鼠标滚轮缩放功能

    2.8K10

    C++ Qt开发：Charts折线图绑定事件

    接着，我们继续增加一个折线图动态预览功能，通过使用该功能可以对特定区域进行选择放大缩小，读者可通过键盘案件进行缩放也可通过鼠标滚轮和左右键选中缩放，该功能在图形预览中也是最常见的。...为了实现该功能，需要先来了解三个常用键盘鼠标库，第一个是QMouseEvent该库主要用于实现对鼠标左键或右键的单击、释放等操作的监控，对鼠标滚轮的响应则通过QWheeEvent来监控，而键盘事件则通过...鼠标滚轮事件 (wheelEvent)： 当鼠标滚轮滚动时触发。你可以在该函数中处理鼠标滚轮事件，如放大缩小、滚动视图等。 键盘按下事件 (keyPressEvent)： 当键盘按键被按下时触发。...鼠标滚轮事件 (wheelEvent)： 根据滚轮滚动方向，调整 g_x 的值，然后使用 zoom 方法进行缩放。...总体而言，这段代码实现了一个基本的图表视图类，支持鼠标交互和键盘控制，提供了图表的缩放、移动等功能。这样的自定义视图类通常用于定制图表的交互行为，以满足特定的应用需求。

    52010

    3D快捷键

    快捷键   全局选项：   Alt + 鼠标滚轮 上/下使窗口 透明/不透明   程序切换：  Alt + Tab：在当前工作台中切换窗口  Ctrl + Alt + Tab：在所有工作台中切换窗口...  窗口排列（编排并显示所有窗口）：上/下  左下角（关键区域）：所有工作台（点击一个窗口缩放它到前台）  右上角（关键区域）：当前工作台  显示桌面（看当前立体面的桌面）：  右下角...：手动旋转立方体  缩放：  Win + 鼠标右键：缩放一次  Win + 鼠标滚轮 上/下：手动缩放大/小  移动窗口：  Alt + 鼠标左键并拖曳：移动窗口  Ctrl + Shift...：将所选区域截图（图片保存在桌面）  焦点轨迹效果：  更旧的窗口更加透明  摆动效果：  使窗口丶菜单等像棉花糖  亮度和饱和度：  Ctrl + 鼠标滚轮 上/下：增加/减少...饱和度（对桌面也有效）  Shfit + 鼠标滚轮 上/下：增加/减少 亮度（对桌面也有效）  窗口对齐：  Win + 小键盘1...9：在屏幕中快速对齐一个窗口（1＝左下，2＝中下，3＝

    97930

    数字孪生：第三人称鼠标操作

    最近制作了能开箱即用的UE5鼠标组件，直接拷入一个文件，再拖到场景中，就能使用了，可以控制相机的平移、旋转、缩放 使用方法： 拷贝Third-Person.uasset到工程的目录下（百来KB） 拖拽...键盘鼠标操作与几何变换的对应 左键+X轴 沿纬线移动 左键+Y轴 沿经线移动 右键+X轴、键盘AD 左右移动 右键+Y轴 前后移动（水平面） 鼠标滚轮、键盘WS 前后移动 鼠标滚轮按下 飞到目标位置...zoom，因此有了图中的逻辑：如果监听到滚轮前进则将臂长乘以0.9，若是滚轮后退则将臂长乘以1.1，这样缩放的速度与臂长的长度正相关，最后将臂长限制在1m到1km之间，便满足了我们的需求。...绕物体旋转可以抽象成一个经纬网：球心是物体，臂长是半径，相机的yaw（纬线）和pitch（经线）都是在球面上运动。...因为虚拟球面是二维的，所以相机旋转也是二维的，只有Elevation（升降）与Azimuth（平转）这两个维度（正好鼠标垫也是二维的），对于前方的pawn来说就是Pitch（俯仰）和Yaw（偏航），本质是一样一样的

    99331

    【错误记录】Java AWT 图形界面编程设置键盘事件没有响应 ( 设置键盘事件 | 键盘事件必须设置到 Frame JFrame 对象上 )

    scale = e.getKeyCode() - 96; // 基于鼠标位置和比例, 计算最新的偏移...repaint(); // 重新绘制画布 } } }); 出现问题的博客代码 : 【Java AWT 图形界面编程】使用小键盘按键缩放...Canvas 画布中绘制的背景图像 ( 键盘按键监听 + 绘制超大图像 + 鼠标拖动 + 鼠标滚轮缩放 + 以当前鼠标指针位置为缩放中心 示例 ) ; 二、解决方案 ---- 鼠标事件 , 可以添加到具体的...Component 组件上 , 但是凡是涉及到 键盘 的事件 , 必须添加到顶级组件 , 也就是窗口组件上 , 如 : Frame / JFrame 组件上 , 才能生效 ; 否则就会出现上述情况 ,...scale = e.getKeyCode() - 96; // 基于鼠标位置和比例, 计算最新的偏移

    52720

    VSCode如何鼠标滚轮放大界面

    介绍 我相信没有开发者会没有使用过鼠标的滚轮放大界面功能。尤其是现在的人越来越近视，几乎很少有不放大就能看清代码的人。...我们无论是写文档还是写程序，大多的编辑器都可以直接使用鼠标滚轮放大界面功能，但我们发现，VSCode初始状态，并不具备鼠标滚轮放大界面功能。而是需要我们手动配置一下，本文将介绍一下如何配置。...用户可以更改主题和键盘快捷方式实现个性化设置，也可以通过内置的扩展程序商店安装扩展以拓展软件功能。...在搜索界面搜索ZOOM 之后选择“按住Ctrl键并滚动鼠标滚轮时编辑器字体大小进行缩放”。...首选项->设置->用户->扩展->JSON 点击在settings.json中编辑 添加"editor.mouseWheelZoom": true, 最后保存就可以了 之后我们就可以使用Ctrl+鼠标滚轮完成缩放

    3K40

    UE 实现镜头平移，旋转和缩放

    0x00 引 在数字孪生三维场景中，通过键盘和鼠标来控制镜头的移动，缩放是很常见的行为，也是很必要的行为，用户正是通过这些操作，达到对整个三维场景的观看和控制。...0x01 键盘控制镜头前后左右移动 通常，我们会通过几个键盘来控制镜头的移动，比如W向前，S向后，A向左，D向右。...如果是开发过threejs的读者，可能能够设想到的思路是这样的，监听键盘事件，如果是字母W就是把镜头的位置和中心点向前移动，其他键类似。...图片 0x03 鼠标滚轮控制镜头缩放 实现滚轮缩放，需要使用到 弹簧臂组件。...0x04 本文讲述了通过蓝图实现镜头的平移旋转，旋转和缩放，涉及到了很多的知识点，需要仔细耐心的查看。

    3.3K20

    GoogleMaps_键盘网站

    在 Google 地球中使用键盘/鼠标导航 首先要明白导航过程中的三个中心，视野中心，相机视角，鼠标锁定位置。...鼠标锁定位置中心可以通过Shift触发。也可以用中间滚轮和右键触发。 提示：要减慢移动速度，请按住 Alt 并同时使用键盘快捷键。...，拖拽 Ctrl+左键 拉近/推远 在地平面视图，点击左键上下移动 放大 双击左键 鼠标滚轮中键和键盘放大缩小的区别，鼠标滚轮会以当前鼠标左键位置为中心，键盘会以屏幕中心为中心。...缩放（鼠标锁定位置） 中键滚动 以鼠标锁定位置为中心自由观察 按住中键拖动 比左键配合Shift更方便。...放大（视野中心） + + 缩小（视野中心） – – 鼠标右键（无论按住Ctrl，Shift都是以鼠标锁定位置为中心） 旋转 点击右键并向左或向右拖动 缩放 点击右键并向上或向下拖动 缩放

    1.5K20

    提高效率 |ArcGIS Pro 中所有快捷键一网打尽

    左键拖动 - 平移单击左键 - 弹出滚动滚轮 - 缩放单击并拖动滚轮 - 倾斜和旋转（在 3D 中）右键拖动 - 持续缩放在使用其他工具进行居中并放大或居中操作时，请分别按下 C+Shift 或 C+Ctrl...左键拖动 - 平移 单击左键 - 弹出 滚动滚轮 - 缩放 单击并拖动滚轮 - 倾斜和旋转（在 3D 中） 右键拖动 - 持续缩放 在使用其他工具进行居中并放大或居中操作时，请分别按下 C+Shift...加号 (+) 或 Ctrl+滚动鼠标滚轮 放大。 放大该地图。 减号 (-) 或 Ctrl+滚动鼠标滚轮 缩小。 缩小地图。 Z+水平移动光标或 Z+滚动鼠标滚轮 更改 z 值。...Shift+Z+水平移动光标或 Shift+滚动鼠标滚轮 加快 z 的变化速度。 按住 Shift 并转动鼠标滚轮。...Ctrl+滚动鼠标滚轮 放大或缩小表的比例。 Ctrl+0 将表的比例重置回 100％。 Shift+滚动鼠标滚轮 水平滚动表窗口。 Ctrl+F 显示查找和替换命令。

    1.3K20

    2.blender的基本操作与动画案例挑战

    1.基本操作 1.按住鼠标中键，移动鼠标，即可对视角进行旋转 2.按住shift+中键，移动鼠标，即可对视角进行平移 3.前后滚动滚轮，即可实现视角放大缩小的推拉 如果是之前使用过C4D或者maya的用户...3.镜头框大小和移动，取消勾选【锁定相机到视图方位】，中间滚轮可以放大缩小，按住shift+中键可以平移。 4.选定观察者视角为镜头视角。 ?...移动、旋转、缩放 ? 勾选以后，选中哪个物体，就可以移动旋转缩放哪个物体。...缩放物体的快捷键 S键 等比缩放 参数控制 ?...maya和c4d 默认的长度单位是厘米，而blender是米，可以修改成习惯的厘米。不过最好默认使用米。 选择 ?

    2.5K30

    那些你不知道的Ps冷知识②——乾坤大挪移

    万用滚轮 在大家使用PS时，滚轮这个东西实际上并不常用，但一个滚轮加上三功能键却可以完全实现缩放和平移、纵移、调整数值等功能。...①缩放 Alt+滚轮：此法可实现对画布的无比例缩放，滚动时以鼠标所在位置为参照中心进行缩放。（PS：笔者不推荐此法，介绍这条纯粹为了引出第二个…） ?...Alt+Shift+滚轮：等比例缩放画布，滚动时以鼠标所在位置为参照中心进行缩放（注意看动图中视图百分比的数值前后变化），墙裂推荐，我最常使用的快捷键之一，等比例缩放，完美替代Ctrl+”+”、Ctrl...PS：Ctrl+1：100%视图 Ctrl+0：缩放至铺满视图（非比例） ②移动 视图在超过一屏的情况下（或者在全屏下） 直接鼠标滚轮即可实现纵向移动，每滚一小格是一个屏幕像素； 按住Ctrl...打开编辑——键盘快捷键，打开图层那一页，找到上面的几项内容，然后根据自己口味进行修改吧！ 以后对齐只用快捷键，高大上有木有！ ?

    51430

    【Java AWT 图形界面编程】使用鼠标滚轮放大缩小 Canvas 画布 ( 鼠标滚轮事件监听器 MouseWheelListener )

    文章目录 一、使用鼠标滚轮放大缩小 Canvas 画布 - 要点分析 1、鼠标滚轮事件 2、核心代码示例 二、绘制超大图像 + 鼠标拖动 + 鼠标滚轮缩放示例 1、代码示例 2、效果展示 一、使用鼠标滚轮放大缩小...Canvas 画布 - 要点分析 ---- 1、鼠标滚轮事件 设置一个缩放比例 scale , 默认为 1.0 ; private double scale = 1.0; // 缩放比例，默认为...应用该缩放比例 ; // 添加鼠标滚轮监听器 addMouseWheelListener(new MouseWheelListener() {...// 绘制图形 } } 二、绘制超大图像 + 鼠标拖动 + 鼠标滚轮缩放示例 ---- 在 【Java AWT 图形界面编程】Canvas 中绘制超大图片 ( 使用鼠标拖动查看全图...| 设置 JFrame 窗口自动关闭 | 获取并绘制图片 | 鼠标拖动计算位移 | 画布偏移 ) 博客中 , 绘制了超大图像 , 可以使用鼠标拖动 , 这里在上述基础上 , 新增鼠标滚轮缩放示例 ;

    2.3K30

    把笔记本触摸板用起来

    大部分的笔记本用户对于触摸板都是当作没有鼠标时的一个替代品，但是现在的windows触摸板內置了不少的快捷功能，比自己去鼠标找然后点击效率会高一点，如果没有外接键盘，双手随便可以触碰的到的话，使用触摸板会把体验提升一个档次...单指单，双击和滑动 这是我们使用最多的一个情景了，平时用来移动鼠标，选中，打开文件 双指操作 双指操作可以模拟鼠标的滚轮 双指左右，上下移动 当页面存在滚动条或者打开了图片查看器，可以触发滚动屏幕或者查看下一张图片...双指点击 : 模拟鼠标右键 双指收缩放大 模拟缩放和放大的情景，可以在浏览器中，触摸板双指缩放和放大，可以使页面进行缩放和放大 三指操作 三指点击： 呼出windows自带的搜索菜单...即是左右箭头，作用可以在虚拟桌面中来回切换，前提虚拟桌面必须大于1个) 三指左划： 打开最近的任务，相当于快捷键alt + tab 四指操作： 四指点击： 呼出快捷中心 四指左右滑动： 切换虚拟桌面，和三指的...3介绍中类似 四指上下划： 和三指相同 窗口操作 全屏或缩放窗口 : 双击窗口标题栏 拖动窗口 : 双击窗口,第二次双击后不要松开,移动手指即可拖动窗口 Win快捷键使用 WIN : 显示/隐藏菜单

    1.7K42
    点击加载更多

    扫码

    添加站长 进交流群

    领取专属 10元无门槛券

    手把手带您无忧上云

    扫码加入开发者社群

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

      领券