使用ViewMatrix进行约束平移/缩放
我正在尝试为我为Unveil.js (http://github.com/michael/unveil)实现的缩放和平移行为添加约束边界。启用边界后，您不能在场景边界之外平移，缩放级别(=缩放)不应低于1.0。因此，如果你处于zoomlevel 1.0，你应该根本不能平移。
您可以在stacks示例中看到无约束行为: dejavis.org/stacks。使用鼠标滚轮进行缩放。你可以清除屏幕上的块，或者无限地缩小它们，这是应该避免的。
真正困难的问题是相对于鼠标指针的缩放也会导致视口移出位置。因此，在平移期间检查边界是不够的。当我使用鼠标滚轮时，我必须找到一个聪明的方法来缩放回到100% (而不是做脏的跳转)。Photoshop似乎解决了缩放图片时的这个问题。
我完全不知道该如何解决这个问题。非常令人沮丧。:/
我使用Matrix来存储当前的View转换，该转换被重复操作。下面是缩放和平移行为的实现代码。
http://github.com/michael/unveil/blob/master/src/scene/behaviors.js
谢谢你的点子。:)
干杯,
迈克尔
回答 1
Stack Overflow用户
发布于 2010-08-31 19:17:31
为什么不稍微重新表述一下这个问题(为了简单起见)？将视口存储为矩形，并通过变换该矩形来执行所有缩放/平移操作。当矩形越过边界时，只需将其夹紧到边界即可。
然后根据矩形的大小和位置简单地计算缩放和平移参数。
希望我理解了你所描述的问题。
(不好)编辑：缩小时，你可能不仅仅想要夹住矩形。如果矩形的一条边碰到一个边界，你可以将你正在缩放的“稳定点”(通常是鼠标光标坐标)移到边界上。那么只有相反的边才会缩放得更大。如果两条边相交，那么“稳定点”将在角落中，只有相反的角落将增长。这将使矩形缩放保持一致的速率，即使一个或多个边被约束到边界也是如此。
编辑：实际上最简单的不是“钳制”视口的边，而是简单地平移它，直到边位于边界上。我之前的编辑有点傻:)。这也将保持固定的纵横比，我相信这就是你想要的。如果相对的边接触到边界，则简单地停止缩放。
https://stackoverflow.com/questions/3604190
复制相似问题
腾讯云开发者
