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 - 縮放舞臺到視口

回答

相關問題