KineticJS-缩放舞台到视口

KineticJS - Scaling stage to viewport

本文关键字：视口 舞台 缩放 KineticJS-      更新时间：2023-09-26

我正在努力实现1366x756的默认分辨率。

我会根据视口来放大和缩小它。类似于此处显示的示例：http://blogs.msdn.com/b/davrous/archive/2012/04/06/modernizing-your-html5-canvas-games-with-offline-apis-file-apis-css3-amp-hardware-scaling.aspx

我有点困惑如何在KineticJS中实现这一点，因为它抽象掉了使用的画布元素。

我想实现的基本上是：

window.addEventListener("resize", OnResizeCalled, false);
function OnResizeCalled() {
    canvas.style.width = window.innerWidth + 'px';
    canvas.style.height = window.innerHeight + 'px';
}

我知道这不是一个完美的解决方案，因为这会拉伸画布，无法保持纵横比。

我目前正在使用以下内容：

stage.setWidth(window.innerWidth);
stage.setHeight(window.innerHeight);
stage.setScale(window.innerWidth / 1366)

这或多或少是我想要的，但是：

  • 鼠标/触摸操作不会缩放到新的比例。

  • 而不是使用GPU来升级画布对象的本机缩放。

有什么想法吗？感谢：）

在我试图帮助解决的另一个问题上，用户自己（user848039）找到了一个解决方案，可以处理鼠标位置和KineticJS缩放。

这就是问题所在：kinetijs stage.getAbsoluteMousePosition（）？。

功劳归他所有，但我修改了他的公式，以满足更常见的KineticJS设置：

var mousePos = stage.getMousePosition();
mousePos.x = mousePos.x/stage.getScale().x-stage.getAbsolutePosition().x/stage.getScale().x+stage.getOffset().x;
mousePos.y = mousePos.y/stage.getScale().y-stage.getAbsolutePosition().y/stage.getScale().y+stage.getOffset().y;

也许jsFiddle不是最好的例子，因为您希望舞台是innerWidth和innerHeight。在jsFiddle框架中，这些测量似乎有点奇怪，但如果你查看代码，你会发现我设置的阶段与你上面提到的完全相同。使用mousePos的新计算，mousePos.x和mousePos.y将为您的比例返回正确的坐标。

相关文章：