程序员经验分享-hwhale

如何只允许在原始 SVG 的范围内平移

2024-03-26

Question:

我想限制 SVG 的平移，这样当没有应用缩放时，就不可能进行平移，但是当您放大时，您可以在 SVG 的边界内平移。

视觉示例：在下图中，中心的缩放视口可以平移到 SVG 的边缘，但不能进一步平移。

然而这与泛示例 http://ariutta.github.io/svg-pan-zoom/demo/limit-pan.html给定的情况下，我无法研究如何改变它以使其表现得如此。你会怎么做？ （我是否还缺少一种简单的内置方法来做到这一点）？

我在尝试解决此问题时遇到的问题

  1. 每个限制都设置了正确方向上允许的像素移动。即，bottomLimit = 200 允许您向上移动 200 像素。因此，在默认缩放下，我需要将所有限制设置为 0，但是我无法弄清楚如何识别默认缩放，因为 realZoom 根据浏览器窗口大小而变化。
  2. 在视觉示例中，如果我们想设置 BottomLimit 来正确绑定 SVG，它需要等于 x，但我不知道如何计算 x。 （topLimit 需要等于 y 等）

基于https://jsfiddle.net/930j458h/3/ https://jsfiddle.net/930j458h/3/例子：

  1. 检查值panZoom.getSizes()
  2. 弄清楚getSizes().width是整个 SVG 块的宽度，并且getSizes().viewBox.width是viewBox的大小。我们对 viewBox 感兴趣。
  3. Replace getSizes().width with getSizes().viewBox.width一切都神奇地运作

https://jsfiddle.net/930j458h/4/ https://jsfiddle.net/930j458h/4/

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

svgpanzoom

如何只允许在原始 SVG 的范围内平移 的相关文章

  • ATrackingManager.AuthorizationStatus 始终返回 notDetermined

    我不知道我是否可以在 iOS 上的 UI 测试中使用此功能 但我尝试了一下 但遇到了问题 在我的 UI 测试中 我可以选择允许跟踪我的应用程序 也可以拒绝跟踪 但在完成所有这些操作后 我希望通过以下方式查看状态 IDFAATTracking

  • karma-typescript：使用 Async 关键字导入 JS 文件

    我正在使用 karma typescript 和这个 karma 配置文件 karmaTypescriptConfig compilerOptions target es5 lib dom es2015 es2017 bundlerOpti

  • 如何使用正则表达式分割字符串？

    我想使用正则表达式分割字符串 我浏览过 Hackage 上的各种正则表达式模块 但我无法理解它们 我注意到了Data List Split 但它似乎也没有提供我需要的东西 这可能会帮助您 ghci gt import Text Regex

  • 在 SQL Server 2008 中处理来自 C# 的多个数据库更新

    我喜欢找到一种方法来处理对 sql 数据库的多次更新 一次单数据库往返 我读到了 SQL Server 2008 中的表值参数http www codeproject com KB database TableValueParameters

  • 像 goo.gl 或 jsfiddle 这样的网站如何生成 URL 代码？

    我想生成一个类似的代码goo gl http goo gl UEhtg and jsfiddle http jsfiddle net XzKvP 网站 http jsfiddle net XzKvP 我尝试了不同的东西 这些东西给了我太大的

  • Golang - GORM 如何为现有表创建模型？

    根据此链接的来源 https gorm io docs index html https gorm io docs index html 为了声明模型 我们这样做 type User struct ID uint Name string E

  • pandas 中的 dtype('O') 是什么？

    我在 pandas 中有一个数据框 我试图弄清楚它的值的类型是什么 我不确定列的类型是什么 Test 然而 当我跑步时myFrame Test dtype I get dtype O 这是什么意思 它的意思是 O Python object

  • 具有完全相同 pod 标签的两个 Kubernetes 部署

    假设我有两个部署 除了部署名称之外 它们完全相同 apiVersion apps v1 kind Deployment metadata name nginx d spec replicas 3 selector matchLabels a

  • Paintcode 和 Snap SVG

    我正在尝试桥接示例油漆代码 https www youtube com watch v 9SE2tmgYbCU and Snap SVG http snapsvg io docs Here http yepher com svgGearEx

  • Xamarin - 在 XAML 中将集合设置为自定义可绑定属性

    我有一个习惯ContentView具有定义的可绑定属性 public IEnumerable

  • SQL Server 2008 无法删除约束

    我正在尝试使用以下命令从表中删除主键约束 ALTER TABLE SchemaName LabourGrade DROP CONSTRAINT Labour Grade pk 并得到错误Labour Grade pk is not a co

  • Clojure/Scala 互操作？

    我正在尝试与这个简单的 scala 代码进行互操作 但遇到了一些麻烦 package indicators class DoubleRingBuffer val capacity Int 1000 var elements new Arra

  • 故事板的多个入口点

    我需要在启动时在 AppDelegate 中做出一系列决定 根据这些决定的结果 我需要转到故事板的特定部分 所以我的问题是 在不使用任何导航或选项卡控制器的情况下 我如何转到故事板的特定部分 OR 唯一受支持的选项是否具有多个故事板 对于每

  • 如何根据搜索到的字符串过滤列表框中的项目

    我有一个 Windows 窗体应用程序 C 其中包含一个列表框 我在其中添加了一些项目 我没有使用数据源 我想过滤 ListBox 中的项目以仅显示包含我正在搜索的字符串的项目 我通过保留原始项目的列表并在每次搜索字符串更改时从该列表中选择

  • 使用 URL::action() 时如何更改域

    我正在尝试复制 Laravel 3 中可用的内容 我希望能够为路由指定备用域名 例如 我有一条使用此代码生成以下内容的路线 URL action DashboardController something Produces http som

  • 无法转换“AppDelegate Proxy”类型的值

    我已经集成了 Localtyics iOS SDK 之后我收到如下错误 无法转换 LLAppDelegateProxy 类型的值 这意味着我无法获取应用程序委托对象的引用 我现在遇到麻烦了 因为我想要 Localytics 并且还想要 Ap

  • 批处理脚本在文件夹中查找空文件

    我需要识别文件夹中的零 KB 文件并将输出写入文本文件 下面是我使用批处理脚本找到的代码 我想根据我的以下要求进行自定义 echo off set out found txt for r c myfolderfilestosearch F

  • CS0234：System.Web 命名空间中不存在 Mvc

    我根据 Scott Hanselmen Phil Haack 和 Rob Conery 出版的 Professional ASP NET 3 5 MVC 第 13 章 将 ASP net 4 webform 项目转换为 Asp net MV

随机推荐

  • Angular JS：ng-click 范围集在 ng-if 中不起作用

    今天 我看到了 angularjs 中的一个错误 当您尝试直接在 ng click 中设置范围值时 当您的 ng click 位于测试相同范围值的 ng if 中时 它不起作用 gt http jsfiddle net 9j2TL 26 h

  • Android Management API - 使用密码退出 kiosk 模式

    我有问题 我有完全托管的设备并使用 Android Management API https developers google com android management https developers google com andr

  • Jquery 对象选择器作为字符串

    有没有办法获取 jquery 对象的选择器 例如 在 Firefox 中 我看到一个 jquery 对象为 p basket 但 jquery 中似乎没有办法获得这个选择器 有什么办法吗 Phil 如果 jQuery 对象是使用选择器字符串

  • 在 IL 中对空引用调用实例方法

    在 IL 中可以对空引用调用实例方法是否正确 有没有例子可以证明这一点 是的 这是可能的 只要该方法不使用this因为 CLR 不会对以下内容进行空检查call指示 You would have to modify the IL by ha

  • 如何检查我的应用程序是否在 android 中运行（不是作为服务）？

    Problem 我必须检查我的应用程序是否正在运行 当服务已经在后台运行时 基于它 我应该启动特定的活动或应用程序 我尝试或想出但失败的事情我尝试检查当前正在运行的进程 并根据它尝试确定应用程序是否正在运行 失败原因 获取应用程序运行状态一

  • 如何使用 CGImageRef 图像在 NSView 中显示图像

    我想在 NSview 或 NSImageView 中显示图像 在我的头文件中我有 interface FVView NSView NSImageView imageView end 这是我在实现文件中尝试做的事情 void drawRect

  • 将日期时间转换为时间戳并再次转换回来

    我在 Python 中的日期时间方面遇到了一些问题 我尝试将日期时间转换为时间戳 然后再转换回来 无论我如何尝试 最终结果都不一样 我总是以 datetime 2014 1 30 23 59 40 1998 的日期时间结束 import d

  • 使用 REST 是否必须使用适当的方法类型（POST、PUT、GET、DELETE）？

    我们在项目中使用 REST 调用 Web 服务来处理从用户界面进行的所有调用 目前 对于每个方法 签名都是以这种方式配置的 public class SaveNewAddressLabelService GET Consumes appli

  • XSLT 删除任意重复的同级元素

    答案here https stackoverflow com a 16715399 288341正在做我想要的事情 除了我不想只删除特定元素的重复同级元素 我想删除所有元素的重复同级元素 此外 出于我的目的 重复 元素将具有与其同级元素相同

  • Array.map 的 Javascript 性能

    刚刚在 jsperf 中编写了一些测试用例来测试使用时命名函数和匿名函数之间的区别Array map和其他替代方案 http jsperf com map reduce named functions http jsperf com map

  • Flask_migrate 可以在数据库初始化文件中与 sqlAlchemy create_engine 一起运行吗？

    如果我有一个init py 文件如下所示 from sqlalchemy import create engine import os from sqlalchemy orm import sessionmaker scoped sessi

  • CSS3 Internet Explorer 缩放背景过滤器：

    我正在尝试拉伸背景图像 使其始终填充窗口 使用 CSS3 我已经在 mozilla 和 chrome 中管理它 但是在 IE 中却遇到了困难 我以前在 IE 中管理过这个 但这次不起作用 这是我的 HTML 和 CSS HTML5

  • 如何从序列中提取升序子集？

    我有一些数据 id serial 1 1 2 2 3 3 4 1 5 3 6 2 7 1 8 2 9 3 10 1 11 2 12 1 13 2 14 3 我想按 串行 列进行分组 其中组规则是 任何升序子集 像这样 1 gt 2 gt 3

  • 编写 xml 并读回 c#

    好的 我现在使用文档方法而不是 XmlWriter 来编写 XML 我已经用 编写了我的 XML 文件 userNode xmlDoc CreateElement user attribute xmlDoc CreateAttribute

  • Rails + Android 中的 Authenticity_token

    我正在开发一个与 Rails 服务器通信的 Android 应用程序 我不想忽略authenticity token 但我也不认为询问它是正确的答案 如何保护我的 POST 请求 当您使用 API 时 像 Android 应用程序那样需要真

  • 计算 R 中具有不同权重的组的一系列加权平均值

    我有以下数据集 实际数据的简单版本 data 并且想分别使用权重 w1 和 w2 计算变量 x1 和 x2 的加权平均值 分为两组 由变量 n 确定的组 data lt data frame n c 1 1 1 2 2 2 x1 c 4 5

  • 合并重复行

    我有一个数据框 其中一列是物种名称 第二列是丰度值 由于采样程序的原因 某些物种出现多次 即 其中有不止一排物种 X 我想合并这些条目并总结它们的丰富性 例如 给定这个数据框 set seed 6 df data frame x c sp1

  • Python 回文程序无法运行

    我用 python 编写了一个简单的程序 它检查句子是否是回文 但我不明白为什么它不起作用 结果始终为 False 有谁知道出了什么问题吗 def isPalindrome word Removes all spaces and lower

  • PhoneGap Hello World 更改方向

    这很愚蠢 但如果我运行phonegap创建一些App 然后编辑config xml文件

  • 如何只允许在原始 SVG 的范围内平移

    Question 我想限制 SVG 的平移 这样当没有应用缩放时 就不可能进行平移 但是当您放大时 您可以在 SVG 的边界内平移 视觉示例 在下图中 中心的缩放视口可以平移到 SVG 的边缘 但不能进一步平移 然而这与泛示例 http a

热门标签