KineticJS - 缩放舞台到视口

我正在努力达到默认分辨率1366x756。KineticJS - 缩放舞台到视口

我会根据视口来调整它的大小。与此处显示的示例类似：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升级画布对象的本地缩放比例。

任何想法？谢谢:)

来源

2013-07-04 RadiantHex

在我试图帮助解决的一个单独的问题上，用户他/她（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正在为您的比例返回适当的坐标。

来源

2013-07-04 14:14:33 projeqht

非常感谢，非常有趣！我会试试这个，希望能够答复答案。 :) – RadiantHex

只是想知道，它为你工作？ – projeqht

还没有尝试过，整理了我拥有的数千行代码。我会打勾你的答案。我稍后可能会对我的进展发表评论。谢谢:) – RadiantHex

KineticJS - 缩放舞台到视口

回答

相关问题