首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

鼠标滚轮事件在JointJS中具有抖动缩放/缩放功能

鼠标滚轮事件在JointJS中具有抖动缩放/缩放功能。JointJS是一个流程图和图形可视化库,它基于JavaScript和SVG技术,用于构建交互式的图形编辑器和图形应用程序。

在JointJS中,鼠标滚轮事件可以用于实现图形的缩放功能。当用户使用鼠标滚轮滚动时,可以通过监听滚轮事件来捕获滚动的方向和速度,并根据用户的操作来进行图形的缩放。

具体实现缩放功能的代码如下:

代码语言:txt
复制
paper.on('blank:mousewheel', function(evt, x, y, delta) {
  var scaleFactor = 1.05; // 缩放因子
  var offsetX = (x - paper.options.origin.x) * (scaleFactor - 1);
  var offsetY = (y - paper.options.origin.y) * (scaleFactor - 1);
  
  if (delta > 0) {
    paper.scale(scaleFactor, scaleFactor, x - offsetX, y - offsetY);
  } else {
    paper.scale(1 / scaleFactor, 1 / scaleFactor, x + offsetX, y + offsetY);
  }
});

上述代码中,paper表示JointJS的画布对象,paper.on('blank:mousewheel', ...)用于监听画布上的鼠标滚轮事件。在事件处理函数中,根据滚轮滚动的方向和速度,计算出缩放因子和偏移量,然后调用paper.scale()方法进行缩放操作。

JointJS还提供了其他一些与鼠标滚轮事件相关的方法和属性,例如paper.options.origin表示画布的原点位置,可以通过设置该属性来改变缩放的中心点;paper.scale()方法用于实现缩放操作,可以指定缩放因子、缩放中心点的坐标等参数。

鼠标滚轮事件在JointJS中的应用场景包括但不限于:图形编辑器、流程图、组织结构图、网络拓扑图等需要进行缩放操作的图形应用程序。

推荐的腾讯云相关产品:腾讯云云服务器(CVM)和腾讯云对象存储(COS)。

  • 腾讯云云服务器(CVM):提供弹性计算能力,可根据业务需求灵活调整计算资源,支持多种操作系统和应用场景。了解更多请访问:腾讯云云服务器
  • 腾讯云对象存储(COS):提供安全、稳定、低成本的对象存储服务,适用于存储和处理各种类型的数据。了解更多请访问:腾讯云对象存储

以上是关于鼠标滚轮事件在JointJS中具有抖动缩放/缩放功能的完善且全面的答案。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

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

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

2.8K10

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

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

1.8K20
  • 原生 JS 手写一个优雅的图片预览功能,带你吃透背后原理

    最终效果如下:图片图片缩放(PC)PC实现图片缩放相对是比较简单的,我们利用滚轮事件监听并改变 scale 值即可。...,事实上如果鼠标不断移动且幅度很大时会出现抖动,需要消除原点位置突然改变带来的影响才能完全解决这个问题(期初我并未发现,后面在做移动端缩放时简直是灾难级体验)而由于PC上问题并不明显,这里先按下不表,后面会详细提到...那就是 指针事件(Pointer events),它被设计出来就是为了便于提供更加一致与良好的体验,无需关心不同用户和场景输入硬件上的差异。接下来我们就以此事件为基础来完成各项操作功能。...(移动端) TouchEvent 的事件对象,我们可以找到 touches 这个数组,移动端通常都是利用这个数组来判断触点个数的,例如 touches.length > 1 即是多点操作,这是我们实现双指缩放的基础...虽然浏览器滚动对应的其实是 scroll 事件,但我们PC上滚动通常都是用利用滚轮(笔记本触控板也被视作滚轮),所以滚轮事件阻止系统默认事件也就阻止了滚动,但不是完全阻止,因为滚动条没隐藏的话还是可以拖动来滚动页面的

    3.2K81

    图形编辑器基于Paper.js教程09:鼠标拖动画布,以鼠标点为缩放中心进行视图的缩放

    如何使用Paper.js实现画布的缩放与拖动功能 Web开发,利用Paper.js库进行图形的绘制和交互操作是一种常见的实践。...缩放功能是通过监听鼠标滚轮事件来实现的。...viewPosition是将鼠标的屏幕位置转换为画布上的坐标,确保缩放操作围绕鼠标当前位置进行。 实现画布的拖动功能 画布的拖动功能是通过一个Tool实例来处理鼠标的拖动事件。...事件,我们记录了鼠标点击的位置,并开始跟踪拖动状态。...onMouseDrag事件,我们计算从上一次事件到当前事件鼠标移动的差值,并相应地调整视图中心,实现拖动效果。最后,onMouseUp事件结束拖动。

    13310

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

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

    2.3K30

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

    接着,我们继续增加一个折线图动态预览功能,通过使用该功能可以对特定区域进行选择放大缩小,读者可通过键盘案件进行缩放也可通过鼠标滚轮和左右键选中缩放,该功能在图形预览也是最常见的。...以下是这些事件处理函数的简要说明: 鼠标按下事件 (mousePressEvent): 当鼠标按下时触发。该函数,你可以处理鼠标按下时的逻辑,如获取鼠标坐标、进行拖拽等。...鼠标释放事件 (mouseReleaseEvent): 当鼠标释放时触发。你可以该函数处理鼠标释放时的逻辑,如执行点击操作。...鼠标滚轮事件 (wheelEvent): 当鼠标滚轮滚动时触发。你可以该函数处理鼠标滚轮事件,如放大缩小、滚动视图等。 键盘按下事件 (keyPressEvent): 当键盘按键被按下时触发。...鼠标滚轮事件 (wheelEvent): 根据滚轮滚动方向,调整 g_x 的值,然后使用 zoom 方法进行缩放

    45710

    Fabric.js 缩放画布 🍬

    使用 canvas 开发的项目,滚轮缩放画布的需求应该不算少数,比如地图。 Fabric.js 也提供了缩放画布的功能,本文主要讲解设置画布大小的几种方法。 动手实现 动手前先查查文档。...我把和本文相关的文档放在这 mouse:wheel:滚轮事件 getZoom:获取画布当前缩放级别 setZoom:设置画布缩放级别 zoomToPoint:设置画布缩放比例及缩放原点 其中 setZoom...起步 使用缩放功能之前,先初始化一下画布。 我还会在画布上设置一个背景图,便于观察。.../images/bg.jpg', img => { canvas.setBackgroundImage(img) canvas.renderAll() }) // 监听鼠标滚轮缩放事件...zoomToPoint 可以理解为 setZoom 的增强版,第一个参数是原点坐标,本例传入鼠标当前所在的坐标;第二个参数是缩放级别。 代码仓库 ⭐Fabric 滚轮缩放画布

    5.7K30

    图形编辑器基于Paper.js教程14:使用 Paper.js 绘制数学图形与交互的实现,画布缩放保持大小的圆,正弦,余弦,螺旋线

    技术分析:使用 Paper.js 绘制数学图形与交互的实现 现代Web开发,动态图形和交互式视觉表现已成为提升用户体验的重要手段。...此外,本文将深入分析鼠标滚轮和拖动事件处理的缩放与视图移动实现。...通过 zoomView 函数调整视图的缩放,并重新计算圆的半径,以确保其屏幕上的尺寸不受缩放影响。...这利用了 Paper.js 的坐标变换功能,通过当前的缩放级别调整圆的半径。 正弦和余弦曲线的绘制 正弦和余弦曲线的绘制展示了 Paper.js 处理数学函数图形的能力。...最后,实现了鼠标滚轮和拖动事件处理,允许用户通过鼠标操作来缩放和移动视图: // 鼠标滚轮处理缩放 paper.view.element.addEventListener('wheel', function

    12310

    Fabric.js 拖放元素进画布

    本文实现的功能:将元素拖进到画布并生成对应的图形或图片。 效果如下图所示: 思路 要实现以上效果,需要考虑以下几点: 元素有拖拽功能。 能在画布中生成对应的元素。 画布有可能缩放。...canvas.add(rect) // 接下来3个事件监听的主要功能是移动画布,在按住 alt 后鼠标可以拖拽画布 // 按下鼠标事件 canvas.on('mouse...this.setViewportTransform(this.viewportTransform) this.isDragging = false }) // 监听鼠标滚轮缩放事件...按住 alt 后,使用鼠标画布上可以拖拽画布。 画布上滚动鼠标滚轮可以缩放画布。 左侧的元素列表也将 draggable 属性设置为 true,元素具备拖拽功能了。...这里的坐标是指画布页面的位置转换出来的坐标,而且还要计算画布拖拽和缩放过的情况。

    3.2K30

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

    之前写一个图片预览插件的时候,遇到了鼠标滚轮滚动进行图片缩放的需求,现在来回顾一下。...思路 首先整理一下思路,要想实现这一需求都需要哪几部,首先我们肯定要阻止鼠标的默认事件,其次,给图片设置一个默认倍数,然后根据我们鼠标缩放去调整这个倍数,OK,接下来就开干。...方法阻止默认事件,并写入我们自定义的事件。...获取鼠标滚动方向 阻止了鼠标滚动的默认事件之后,我们就要开始进入正题了。获取鼠标滚动的数据进行图片缩放,其实主要就是获取鼠标滚动的方向,向上滚动就放大,向下滚动就缩小。...据搜索得知,事件参数,代表鼠标滚轮滚动方向的参数为e.wheelDelta,我们可以打印一下 scrollFunc(e) { // ...

    2.2K30

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

    Canvas鼠标滚轮缩放以及画布拖动 本文会带大家认识Canvas中常用的坐标变换方法 translate 和 scale,并结合这两个方法,实现鼠标滚轮缩放以及画布拖动功能。...事件坐标系 构造函数添加对 Canvas 的 mousedown 事件监听,记录点击鼠标时相对屏幕的位置 x 和 y。...实现鼠标滚轮缩放 效果 实现原理 鼠标滚轮的放大需要结合上面介绍的 Canvas 的 translate 和 scale 两个方法进行组合变换。...计算放大系数 监听鼠标滚轮的 mousewheel 事件事件的回调函数通过 event.wheelDelta 值的变化来实时计算当前的缩放值,其中 event.wheelDelta > 0 表示放大...this.ctx.scale(this.scale, this.scale); this.draw(); } 总结 本文从基础原理到代码实现,完整给大家讲解了 Canvas 画布绘制中经常会遇到的画布拖动和鼠标滚轮缩放功能

    2.5K10

    jimojianghu

    触控板 要禁止触控板的缩放行为,需要处理鼠标滚轮事件:wheel 。 因为笔记本触摸板双指滑动,将响应该事件,如果对该事件阻止默认行为,就能解决缩放问题了。...用于设置触摸屏用户如何操纵元素的区域,允许你触控时控制滚动操作。 例如,浏览器内置的缩放功能。 这样做的好处还有,它可以允许你自己实现这些手势。...笔记本触摸板双指滑动,将响应滚轮事件,因此可以监听该事件,禁止触摸板手指缩放界面。 但需要注意滚轮默认事件,如会导致子元素滚动失效,这时候就要在子元素上阻止相同事件冒泡。...Chrome,wheel / touch 等事件的 passive 会默认设置为true,但Safari不支持。...添加 passive 参数为true后,touchmove 事件不会阻塞页面的滚动(同样适用于鼠标滚轮事件)。

    3.8K00

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

    一、报错信息 ---- 实现一个需求 , 按键 数字 按键 , 让 Canvas 画布绘制的图像根据按下的数值进行缩放 ; AWT 自定义 Canvas 组件 , 添加按键事件 , 下面定义的...Canvas 画布绘制的背景图像 ( 键盘按键监听 + 绘制超大图像 + 鼠标拖动 + 鼠标滚轮缩放 + 以当前鼠标指针位置为缩放中心 示例 ) ; 二、解决方案 ---- 鼠标事件 , 可以添加到具体的...Component 组件上 , 但是凡是涉及到 键盘 的事件 , 必须添加到顶级组件 , 也就是窗口组件上 , 如 : Frame / JFrame 组件上 , 才能生效 ; 否则就会出现上述情况 ,...组件设置的 KeyAdapter / KeyListener 监听 , 根本不回调相应的回调函数 ; 将 KeyAdapter / KeyListener 监听器 设置到 JFrame 窗口上 , 此时该应用按下对应的按键...} } }); } 调用 JFrame#addKeyListener(new KeyAdapter(){}) 设置的键盘按键监听 , 即可实现想要的功能

    51720

    学习滚动插件iScroll的简单使用

    它包含大多数常用的功能,有很高的性能和很小的体积。 iscroll-lite.js,精简版本。它不支持快速跳跃,滚动条,鼠标滚轮,快捷键绑定。...但如果你所需要的是滚动(特别是移动平台) iScroll 精简版 是又小又快的解决方案(这个能应付大多数场景)。...(我正在做更多的测试,这可能最终常规iscroll.js脚本,请留意)。 iscroll-zoom.js,标准滚动功能上增加缩放功能。...('#wrapper'); 配置参数说明 var myScroll = new IScroll('#wrapper', { mouseWheel: true, //是否监听鼠标滚轮事件...滚动scrollEnd滚动结束flick轻击屏幕左、右zoomStart开始缩放zoomEnd缩放结束 iScroll 可以处理用户进行移动交互的元素:滚动,缩放,平移,无限滚动,视差滚动,旋转等功能

    2.9K30

    Java规模软件开发实训——简单的文本编辑器(代码注释详解)

    支持缩放功能,可以通过鼠标滚轮和Ctrl键进行文本的放大和缩小。 代码编辑区域中输入代码后,可以进行编译操作,将代码保存到文件并执行javac命令进行编译。...缩放文本:支持文本缩放功能。用户可以通过按住 Ctrl 键并滚动鼠标滚轮来放大或缩小代码编辑器的文本内容。...文件操作:通过文件选择器实现打开和保存文件功能。 主题切换:通过菜单栏实现了切换主题的功能,包括亮色和暗色主题。 文本编辑功能:支持撤销和重做操作,支持通过鼠标滚轮和快捷键进行文本缩放。...字体颜色和大小:通过菜单栏实现了设置字体颜色和大小的功能。 其他事件监听:注册了各种事件监听器,包括文本内容变化监听器、撤销操作监听器、鼠标滚轮监听器等。...,我们实现了一个简单的文本编辑器(CodeEditor),该编辑器具有打开、保存、编译、运行代码等功能,并支持撤销、重做、缩放文本等操作。

    16610

    简易Qt图片查看器

    本篇使用Qt来实现一个可以查看任意目录下图片的图片查看器,可以电脑中任意目录下图片的查看,并且可以通过鼠标滚轮以及鼠标移动来实现图片的灵活放大、缩小,此外,在打开一个图片后,若该目录下还有其它图片,通过左右切换...true); m_idx++; m_box->setImage(QPixmap(m_files[m_idx])); } 2.3 图像显示窗口 图像显示窗口,专门写了一个类来实现图片显示,缩放显示等功能...图片的显示还支持鼠标操作,可以实现滚轮的放大缩小,移动显示。...滚动的移动,使用的wheelEvent来获取滚轮事件,当滚轮向前滑动时,增大缩放比例,当滚轮向后滑动时,减小缩放比例,然后调用update函数触发图像重绘。...,使用的mouseMoveEvent来获取鼠标移动事件,并结合mousePressEvent来检查鼠标左键是否按下,当鼠标左键按下且鼠标移动时,才进行图片的移动显示。

    2.3K10

    ArcGIS JS API 4.16控制地图的缩放大小

    3.X的ArcGIS JS API版本我们可以轻松的调用相应的API来实现地图的缩放大小的控制,让实例化后的地图我们设置的范围中进行缩放,但是4.X的版本并没有相应的属性来控制,所以我们采用一种折中的方式来实现...问题描述 WebGIS项目开发过程,有时候我们的数据服务某些级别下是没有数据的,比如一个切片服务,仅仅切了5-12级,所以当我们将地图缩放到0-4级或者12级往后的话,会看不到我们的切片图层。...evt) { evt.stopPropagation(); }); view.on('mouse-wheel', function (evt) { //鼠标滚轮缩小...{ console.info(view.scale); console.info(evt); } }); }); 其实在4版本我们是通过监听地图的鼠标滚动事件来实现的...,鼠标滚动的时候去阻止事件的执行。

    4.7K10

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

    万用滚轮 大家使用PS时,滚轮这个东西实际上并不常用,但一个滚轮加上三功能键却可以完全实现缩放和平移、纵移、调整数值等功能。...①缩放 Alt+滚轮:此法可实现对画布的无比例缩放,滚动时以鼠标所在位置为参照中心进行缩放。(PS:笔者不推荐此法,介绍这条纯粹为了引出第二个…) ?...Alt+Shift+滚轮:等比例缩放画布,滚动时以鼠标所在位置为参照中心进行缩放(注意看动图中视图百分比的数值前后变化),墙裂推荐,我最常使用的快捷键之一,等比例缩放,完美替代Ctrl+”+”、Ctrl...PS:Ctrl+1:100%视图 Ctrl+0:缩放至铺满视图(非比例) ②移动 视图超过一屏的情况下(或者全屏下) 直接鼠标滚轮即可实现纵向移动,每滚一小格是一个屏幕像素; 按住Ctrl...可能大家也发现了,通过Shift可以实现改进许多功能,还记得上次文章说的三功能键的语义吧? 万能选区对齐大法 贴一张动图给大家看看效果先,有木有很神奇? ?

    51130
    领券