平移到特定的 X 和 Y 坐标并居中图像 svg-pan-zoom

2023-12-03

我正在使用 ariutta svg-pan-zoom 库(https://github.com/ariutta/svg-pan-zoom).

当用户单击按钮时,我尝试平移到 (x:1000, y:20) 处的特定形状。我还希望图像此时居中。

我面临的问题是我试图平移并居中的点超出了屏幕。

我目前正在使用:

panZoom.pan({x:1000, y:20});

但这不起作用。

请参阅 jsFiddle 了解更多信息:http://jsfiddle.net/arjSharma/n6r55dp1/2/

有人可以帮助解决我的问题吗?

Thanks


我设法回答我的问题: 我首先使用以下方法平移到点 0,0:

panZoom.pan({x:0,y:0});

然后我通过以下方式获得“真实缩放”值:

var realZoom= panZoom.getSizes().realZoom;

要在特定 x 和 y 处平移并居中,请使用 pan() 方法并传递 x 和 y 坐标,如下例所示:

panZoom.pan
({  
x: -(755*realZoom)+(panZoom.getSizes().width/2),
y: -(240*realZoom)+(panZoom.getSizes().height/2)
}); 

'+(panZoom.getSizes().width/2)' 和 '+(panZoom.getSizes().height/2)' 负责将偏移量添加到 x 和 y 坐标,以确保图像居中。

如果对我的回答有任何进一步的问题,请随时提出。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

平移到特定的 X 和 Y 坐标并居中图像 svg-pan-zoom 的相关文章

随机推荐

  • 如何在 pyGTK 中搜索 gtk.ListStore 并删除元素?

    我有以下代码 其中 store 是gtk ListStore效价是gtk TreeIter 文档说如果没有下一行 iter next 将返回None 因此找到时中断 它应该通过搜索ListStore of int str 并删除其中的一项i
  • 每行对齐 2 个 DIV,高度相同

    我们遇到一个问题 我们需要一个包含动态内容的 div 列表 每行始终有 2 个 div 这两个元素应该具有相同的高度 目前我们有一个使用 JavaScript 设置框高度的解决方案 但它的性能不是很好 因为它会在每次调整大小时重新计算尺寸
  • 按结构中的变量对结构向量进行排序? [复制]

    这个问题在这里已经有答案了 我有一个数据结构 例如 struct Data string firstname string lastname string age 我已将每个结构放置在一个向量 VectorOfData 中 是否可以循环遍历
  • 如何在自定义引导程序应用程序中设置或获取所有日志

    在我的自定义 Burn 托管引导程序应用程序中 我希望有一种方法来设置安装程序的默认日志目录 以便客户可以轻松找到安装日志 如果无法做到这一点 我想要一种合适的方法来在安装后复制日志文件 我尝试在我的安装项目 即 Bundle wxs 和我
  • 添加构建后事件而不覆盖现有事件

    我有一个 Powershell 脚本 由我的 NuGet 包运行 它将生成后事件添加到用户的 Visual Studio 项目中 project Properties where Name eq PostBuildEvent foreach
  • PHP PDO bindParam() 和 MySQL BIT

    我正在尝试更新其中包含 BIT 类型值的表中的数据 如下所示 show contact is either 1 or 0 query gt bindValue scontact show contact PDO PARAM INT 问题是
  • 测试固件

    这遵循几个other 问题 但我认为我已经更好地完善了我的问题 我想在安装设备之前测试我的固件代码 我意识到很多人编写代码 上传 测试等 但我真的想在上传之前编写和测试 主要是因为我想自动化许多场景 那么 最好的方法是什么 如果我正在编写纯
  • JavaScript 过滤图像颜色

    嘿 我正在寻找一种拍摄黑白照片的方法img元素 并使用 JavaScript 指定 RGB 值 以便图像变成该颜色 有什么想法 除了图书馆 我也尝试只用 IE 来做到这一点 我只在 IE 中这样做的原因是因为我正在制作一个小的侧边栏小工具
  • 使用 Three.js 创建凹半球

    我是一名具有良好 JavaScript 经验的 Web 开发人员 目前正在探索Three js的可能性 然而 我对 3D 形状和词汇不是很熟悉 我不知道如何构建我需要的形状 我想创建一个半球体 并且能够投影视频inside这个球体 我有一个
  • 移动太慢时 jquery mouseleave 问题

    我正在使用 jQuery mouseenter 和 mouseleave 事件来上下滑动 div 除了 mouseleave 之外 一切都运行良好 只有当鼠标从 div 上移开的速度相当慢时 它才不会触发 如果我以相对正常或较快的速度移动鼠
  • 如何在 ctypes 中使用 typedef

    我正在尝试使用 ctypes 库在 Python 中包装 C 库 我这样包装结构 file c typedef struct int x int y Point file py import ctypes class Point ctype
  • 当跨度是锚点的子级时,不显示标题工具提示

    例如 考虑以下 DOM 结构 a href title The Anchor img src http www adiumxtras com images thumbs dango status icon set 7 19047 6248
  • 制作每日重置的InfluxDB/Grafana累积函数(锯齿图)

    我将能源使用数据记录为计数器 我希望将其显示为每天重置的累积图表 类似地在这里问 我可以按如下方式生成累积值 SELECT mean value FROM energy WHERE timeFilter GROUP BY time inte
  • 解决方案资源管理器中文件上的蓝色问号

    当通过 P4VS 打开绑定到 Perforce 的解决方案时 我的 VS2012 解决方案资源管理器中的文件上经常出现蓝色问号 看起来有些东西无法与仓库 工作区 诸如此类的东西 同步 点击 刷新视图 总是能解决问题 但我每天都这样做已经厌倦
  • 使用 PyArray_SimpleNew 创建 PyArrayObject 时出现分段错误

    我正在为 numpy 创建一个 C 扩展 该函数应该返回一个数组 因此我决定使用 PyArray SimpleNew 创建一个尺寸为 50x10 的 PyArrayObject 然后用一些值填充它 这是代码 PyArrayObject a
  • npm install 没有安装依赖项的依赖项

    When I npm install我的节点应用程序 我的包列表dependencies我的财产package json已安装 但是 由于某种原因 其中一些依赖项没有安装它们的子依赖项 换句话说 我的依赖项的依赖项没有node module
  • 无法让 CKEditor 插件在 django 中工作

    我正在尝试让 CKEditor 插件 codenippet 在 django 管理中工作 但无法做到 如果我没有在 settings py 中定义任何 CKEDIT CONFIGS CKEditor 就可以工作 如果取出 extraPlug
  • iText - 如何设置 PdfAnnotationInk 的描边宽度和不透明度

    绘制墨迹类型注释时 应该调用哪些函数来设置笔划宽度和不透明度 我已经浏览过 PdfAnnotation 和 PDFStamp 的类 API 但似乎没有直接设置宽度和不透明度的函数 有什么建议么 谢谢 我的示例程序 final String
  • 无法使用solr4配置Tika1.2

    我正在尝试使用 TikaEntityProcessor 来索引 html 文件内容 不知怎的 我无法正确地得到它 我检查了错误日志并收到以下错误 SEVERE Full Import failed java lang RuntimeExce
  • 平移到特定的 X 和 Y 坐标并居中图像 svg-pan-zoom

    我正在使用 ariutta svg pan zoom 库 https github com ariutta svg pan zoom 当用户单击按钮时 我尝试平移到 x 1000 y 20 处的特定形状 我还希望图像此时居中 我面临的问题是