2

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

有任何想法吗？谢谢 ：）

4

1 回答 1

3

在我试图帮助解决的另一个问题上，用户他/她自己 (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.xmousePos.y

于 2013-07-04T14:14:33.600 回答