问题标签 [jquery.panzoom]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
jquery - 将 click 绑定到 panzoom 容器中的元素
我正在使用 jquery.panzoom 来包含一个表。
每个表格单元格都采用这种形式:
该表是动态创建的,因此我使用它来尝试捕获事件:
我已经尝试删除 div,并直接捕获 td 上的点击,但这也不起作用。
当我捕捉到任何 div 的点击时,我看到表格的容器正在捕捉点击,但点击永远不会到达表格本身(而不是它的单元格)。
如何在 td(甚至 td)内的单个 div 上捕获点击事件?
jquery - 将背景图像附加到嵌套的 SVG 元素
我正在尝试将 PNG 或 JPG 背景图像附加到 SVG。目前,在尝试了多种不同的附加方法后,背景图像没有显示出来。
我正在使用jQuery.panzoom和jquery.svg(仅当我需要解决这个问题时)。
缩放和平移功能适用于<g>
元素,然后将其中的所有多边形和文本元素一起移动。我想要的是一个基本上附加到<g>
(or <svg>
) 的背景图像,以便在我移动 the<g>
及其子项时它会移动。(我知道您不能将背景图像附加到<g>
元素)。
基本 SVG 标记
我的 SVG 元素的基本分组如下所示...
我试过的...
我尝试使用图案填充来附加背景图像。jsFiddle
我还尝试使用jquery.svg附加背景图像jsFiddle:
如果有帮助,这也是我的平移和缩放代码(使用 jquery.panzoom):
最后的想法
如果使用插件是实现这一目标的最佳方式,那么我使用它没有问题。我只需要在<svg id="shapes">
那个或<g>
元素的内部或内部有一个背景图像。
javascript - jQuery PanZoom:如何限制平移某个百分比?
有没有办法将平移限制为图像的 50%。例如,在平移图像时,如果 50% 的图像超出屏幕/平移区域,则停止该方向的平移。
检查此演示以了解我正在寻找的行为。
javascript - 在 panzoom.js 中设置元素适合容器
我想使用 panzoom.js。我的图像大小大于容器。我需要让它在默认视图下适合容器。
这里是jsfiddle
http://jsfiddle.net/Vipin/qam85n47/
请帮我得到它。
我尝试过使用“startTransform”值。但我需要它动态。
它应该是动态计算的。
图像和容器大小可能会更改
javascript - asp.net中panzoom库和window.print()的问题
我有一个按钮栏,其中三个用于图像缩放和滚动,第四个是发送打印图像,通过库完成 panzoom 缩放和滚动,但是如果命令打印(发送成功)。现在如果我返回站点并且想要缩放,不要,我应该怎么做才能让我继续处理图像??
panzoom 的部分是
javascript - jQuery Panzoom 插件在右侧定位图像,包含:'invert'
我正在尝试使用jQuery Panzoom插件,它大部分都很好,除了......
我希望最初缩放大图像以适合容器,并已contain: 'invert'
启用。我已经对这个示例进行了调整,以便在首次加载图像时对其进行缩放和定位。
这很好用,图像位于(窗口大小)容器的中心。但如果我contain: 'invert'
用作 Panzoom 选项,图像位于右侧。我不知道为什么。
你可以在这里看到它的实际效果:https ://jsfiddle.net/7ugm9z51/2/
这是 HTML/CSS:
和 JavaScript:
javascript - jquery panzoom js有问题,调用destroy时增量值不会被破坏
我的要求是单击一个按钮以允许对图像进行多次缩放。我有一个缩放按钮的原因是,我也有一个平移按钮,所以我必须点击它们,在鼠标滚轮上我必须相应地处理平移或缩放。
我的问题是,即使在调用destroy()
method 之后, increment 参数也会增加current + previous
increment ,这使得缩放增加超过 0.1,尽管每次都设置了该参数。
它增加如下:
再次单击缩放按钮后,
再次单击缩放按钮后,
我知道最直接的问题是我为什么要一次又一次地点击它们?答案将是因为我需要对图像进行一些其他操作,例如添加矩形或圆形等。
我的代码:
jquery - Jquery 可通过 panzoom 拖动
我正在处理一个页面,它的所有内容都使用 panzoom 进行缩放。问题是当我在页面中拖动某些东西时,拖动项目的位置不好。
javascript - 平移和缩放后鼠标单击转换为 svg
我使用 snap.svg 和 snap.svg.zpd 库。如果我使用 snap.svg 和 jQuery panzoom 库组合,我也会遇到同样的问题。
您可以在此处找到代码示例。
问题是...如果您单击初始 svg,它会将矩形添加到鼠标位置。如果您平移/缩放图像,然后添加矩形,它将被移动。
看起来问题出在方法 mySvg.getScreenCTM().inverse() 中。返回的矩阵总是相同的,平移和缩放不会改变它。它总是使用最初渲染的 svg 中的矩阵。但是,如果我检查 svg 元素,我可以看到 pann/zoom 直接在元素上更改变换矩阵(下图)。
有谁知道如何解决这个问题。我的要求是能够在任何缩放比例或平移上下文中将 svg 之外的元素拖放到 svg 中,因此我需要从鼠标单击点转换为 svg 偏移坐标。如果您知道可以做到这一点的任何其他方法或任何其他库组合,那对我来说没问题。
提前致谢。