KineticJS - 缩放阶段到视口 [英] KineticJS - Scaling stage to viewport

问题描述

我正在努力达到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'; 
} 
  

我知道这不是一个完美的解决方案，

$ b

我目前正在使用以下项目：

  stage.setWidth（window.innerWidth）; 
 stage.setHeight（window.innerHeight）; 
 stage.setScale（window.innerWidth / 1366）
  

m：

• 鼠标/触摸动作未按比例缩放。

不是使用GPU来缩放画布对象的原生缩放

---

有什么想法吗？感谢：）

解决方案

在一个单独的问题，我试图帮助解决，用户他/她处理鼠标位置和KineticJS缩放的解决方案。

这是一个问题： kineticjs stage.getAbsoluteMousePosition（）？。

积分转向他，但这里是他的公式，我修改以满足更常见的KineticJS setup：

  var mousePos = stage.getMousePosition（）; 
 
 mousePos.x = mousePos.x / stage.getScale（）。x-stage.getAbsolutePosition（）。x / stage.getScale（）。x + stage.getOffset（）。 
 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 会为您的缩放比例返回正确的坐标。

I'm working towards a default resolution of 1366x756.

I would to scale this up and down depending on the viewport. Similar to the example shown here: 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

I'm kind of confused how I would get this to work in KineticJS as it abstracts away the canvas elements used.

---

What I would like to achieve is basically:

window.addEventListener("resize", OnResizeCalled, false);

function OnResizeCalled() {
    canvas.style.width = window.innerWidth + 'px';
    canvas.style.height = window.innerHeight + 'px';
}

I know that this isn't the perfect solution as this would stretch the canvas and not keep aspect ratio.

---

I'm currently using the following:

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

It's more or less what I'm looking for, but:

• mouse/touch actions aren't scaled to the new proportions.

• not the native scaling which uses the GPU to upscale the canvas object.

---

Any ideas? Thanks :)

解决方案

On a separate problem I was trying to help solve, the user him/herself (user848039) figured out a solution that dealt with mouse position and KineticJS scaling.

This was the question: kineticjs stage.getAbsoluteMousePosition()?.

Credits go to him, but here was his formula that I modified to meet a more common KineticJS setup:

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;

Perhaps jsFiddle isn't the best example for this, since you want the stage to be innerWidth and innerHeight. Those measurements seem to play a bit weird in the jsFiddle frame, but if you look at the code, you'll see that I set the stage exactly the same as you mentioned above. With the new calculations for mousePos the mousePos.x and mousePos.y are returning the proper coordinates for your scale.

这篇关于KineticJS - 缩放阶段到视口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！