调整由鼠标滚轮触发的 Cytoscape.js 中的缩放比例
[英]Adjust the zoom scale in Cytoscape.js trigered by the mouse wheel
问题描述
I am using Cytoscape.js , to draw a Graph.
我正在使用Cytoscape.js来绘制图形。 The problem is I want to adjust the zooming scale that the zoom event receives which the mouse wheel triggers.问题是我想调整鼠标滚轮触发的zoom事件接收到的缩放比例。
Now when I scroll forward or backward the zoom increases or decreases more than expected... resulting in a bad user experience...现在，当我向前或向后滚动时，缩放比预期增加或减少更多……导致糟糕的用户体验……
I couldn't find in the docs how to achieve or set this scale values... I know that the wheel sensitivity is configurable but is not recommended to set.我在文档中找不到如何实现或设置此比例值...我知道滚轮灵敏度是可配置的，但不建议设置。
Is there any way to establish how to scale in each wheel scroll?有什么方法可以确定每个轮子的缩放比例吗？
2 个解决方案
解决方案1
4 已采纳 2020-10-16 07:27:58
The property you're looking for is wheelSensitivity .您正在寻找的属性是wheelSensitivity 。 Adjust his value to change the zooming scale.调整他的值来改变缩放比例。 Be careful with it because it can sometimes affect the render.小心使用它，因为它有时会影响渲染。
I put it at 0.4 in the example below:我在下面的示例中将其设置为 0.4：
<!DOCTYPE> <html> <head> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1"> <script src="https://unpkg.com/cytoscape/dist/cytoscape.min.js"></script> <style> body { font-family: helvetica; font-size: 14px; } #cy { width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 999; } h1 { opacity: 0.5; font-size: 1em; } </style> <script> window.addEventListener('DOMContentLoaded', function(){ var cy = window.cy = cytoscape({ container: document.getElementById('cy'), boxSelectionEnabled: false, autounselectify: true, wheelSensitivity: 0.4, style: [ { selector: 'node', style: { 'background-color': '#11479e' } }, ], elements: { nodes: [ { data: { id: 'n0' } }, { data: { id: 'n1' } }, { data: { id: 'n2' } }, ], edges: [ { data: { source: 'n0', target: 'n1' } }, { data: { source: 'n1', target: 'n2' } }, ] } }); }); </script> </head> <body> <div id="cy"></div> </body> </html>解决方案2
0 2022-11-30 12:46:29
You can use the cy.minZoom() and cy.maxZoom() to set the values.您可以使用 cy.minZoom() 和 cy.maxZoom() 来设置值。 The zoom levels shall be maintained between this range on mouse and touch zoom.缩放级别应保持在鼠标和触摸缩放的此范围之间。 My example below is to set zoom on click event我下面的例子是在点击事件上设置缩放
cy.on("click","node",function(event) {
cy.minZoom(0.5)
cy.maxZoom(2.5)
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.