Question

我正在努力达到默认分辨率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来升级画布对象的原生缩放。

有什么想法吗？谢谢:)）

Answer 1

在我试图帮助解决的另一个问题上，用户他/她自己（用户848039）想出了一个处理鼠标位置和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会返回适合您比例的坐标。

KineticJS - 缩放到视口的阶段

1 个答案: