KineticJS - 将舞台缩放到视口

Posted 2023-03-05

【中文标题】KineticJS - 将舞台缩放到视口

【英文标题】：KineticJS - Scaling stage to viewport

【发布时间】：2013-07-02 08:02:06

【问题描述】：

我正在努力实现 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 放大画布对象的原生缩放。

---

有什么想法吗？谢谢:)

【参考方案1】：

在我试图帮助解决的另一个问题上，用户他/她自己 (user848039) 想出了一个处理鼠标位置和 KineticJS 缩放的解决方案。

这是问题：kineticjs 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 将返回适合您比例的坐标。

【讨论】：

非常感谢，非常有趣！我会试试这个，并希望勾选答案。 :)

还没试过，整理一下自己手上的几千行代码。我会勾选你的答案。稍后我可能会就我的进展发表评论。谢谢:)

别担心，告诉我进展如何！祝你好运！ :)