Panzoom: 功能:能够设置平移限制或填充限制

创建于 2020-06-23  ·  4评论  ·  资料来源: timmywil/panzoom

这个功能解决了什么问题?

描述您想要的解决方案
能够为正在平移的对象设置平移限制
IE:
边界比率垂直={0.8}
边界比率水平={0.8}

描述您考虑过的替代方案
contain: 'inside'值具有类似的样式,但我需要能够在保持填充比率限制的同时在缩放级别之间切换

feature votes needed

最有用的评论

谢谢你这么快回复我。

也许我不完全理解contain: inside 。 据我了解它的实现:panzoom 节点将不再能够放大超过其父级的矩形框,但我确实希望用户能够放大, contain: inside不允许我的对象放大视口。

我的用例:我有一个大分辨率的历史地图 - 我希望用户能够平移,它太大而无法查看整个对象,但我不希望用户通过将其推得太远而“丢失地图”一方面,这听起来像contain: outside但我希望它们具有完整的缩放控制,可以完全缩小,但可以通过放大来探索更多内容。

我认为问题是我遇到insideoutside

  • inside假设图像足够小以适应视口,否则会产生一些奇怪的效果
  • outside假设图像应该至少占据整个视口

我可以想象contain: 'bounds'可以让图像缩放和平移,当图像大于视口并且您到达边缘或角落时,它会平移回相应的边缘

所有4条评论

感谢您打开一个问题。 如果我误解了该功能,请原谅我,但这不能通过添加包装元素并使用contain: 'inside'吗?

谢谢你这么快回复我。

也许我不完全理解contain: inside 。 据我了解它的实现:panzoom 节点将不再能够放大超过其父级的矩形框,但我确实希望用户能够放大, contain: inside不允许我的对象放大视口。

我的用例:我有一个大分辨率的历史地图 - 我希望用户能够平移,它太大而无法查看整个对象,但我不希望用户通过将其推得太远而“丢失地图”一方面,这听起来像contain: outside但我希望它们具有完整的缩放控制,可以完全缩小,但可以通过放大来探索更多内容。

我认为问题是我遇到insideoutside

  • inside假设图像足够小以适应视口,否则会产生一些奇怪的效果
  • outside假设图像应该至少占据整个视口

我可以想象contain: 'bounds'可以让图像缩放和平移,当图像大于视口并且您到达边缘或角落时,它会平移回相应的边缘

这听起来像是独特的行为,我不确定如何将其构建到库中。 我认为您可以绑定到panzoomzoom事件并在达到边界时将包含选项更改为“外部”。 我曾经有一个contain的“自动”选项,它会根据元素相对于容器的大小在insideoutside之间交替。 当小于容器时,它会被设置为'inside' ,当更大时,它会被设置为'outside' 。 这将确保图像可缩放但始终在视图中。 无论哪种方式,我都会暂时将其保留在投票标签中。

@timmywil在过去的两天里我偶然遇到了这个想法,在insideoutside之间切换,但这似乎没有按预期工作,从{contain: outside}{contain: inside}似乎将图像锁定在一个位置,并且似乎zoomIn()zoomOut与包含设置相关联,所以我什zoomOut无法触发

我想这就是说contain: auto很多词,这似乎正是我要找的,哈哈

如果有对自动功能的投票,我很乐意支持:)

此页面是否有帮助?
0 / 5 - 0 等级