用KineticJS idtkscale缩放KineticJS画布

Question

除了缩放画布之外，我的KineticJS游戏在CocoonJS中运行得很好。我有1024x768画布，这是伟大的iPad 2。但对于iPad 4，由于视网膜屏幕，游戏只需要屏幕的1/4。

CocoonJS说这是关于缩放的：

CocoonJS automatically scales your main canvas to fill the whole screen while you still 
continue working on your application coordinates. There are 3 different ways to specify how
the scaling should be done:

idtkScale
 'ScaleToFill' // Default
 'ScaleAspectFit'
 'ScaleAspectFill'

 canvas.style.cssText="idtkscale:SCALE_TYPE;"; // The SCALE_TYPE can be any of 
 the ones listed above.

我尝试过这样做，并补充如下：

layer.getCanvas()._canvas.style.cssText='idtkScale:ScaleAspectFit;';

但这是行不通的。知道如何使KineticJS创作的画布在CocoonJS中进行缩放吗？

Answer 1

好吧，我自己找到了这个问题的答案，因为有这么多的选票，我想和大家分享解决方案。

解决方案是在KineticJS中注释一些代码，然后将CocoonJS缩放添加到画布创建中。

1. 评论这些行(并不是全部在一个地方)：

在_resizeDOM内部：

this.content.style.width = width + PX;
this.content.style.height = height + PX;

画布内部setWidth：

this._canvas.style.width = width + 'px';

画布内部setHeight：

this._canvas.style.height = height + 'px';

1. 添加此内部画布原型init： this._canvas.style.idtkscale = "ScaleAspectFill"；

这对我来说很管用。现在我要做的是为画布计算正确的纵横比，让CocoonJS为我缩放它。希望这对别人和我一样有用！

Answer 2

当处理使一个帆布对象全屏，如果在移动。在CocoonJS中，这个特性是现成的。所以我们修补了要设置的代码

document.body.style.width

和

document.body.style.height

它们与DOM相关，不受支持(在全屏模式下也不需要)。另外，与画布样式和位置相关的代码也进行了修补，因为它并不需要。

目前，获得屏幕大小的正确方法是

window.innerWidth

和

window.innerHeight

若要使画布对象全屏，请设置

canvas.width= window.innerWidth; canvas.height= window.innerHeight

关于CocoonJS，您必须了解的一件事是，您不必更改画布大小才能使它全屏运行。CocoonJS将向上/向下缩放您的画布，并有正确的触摸坐标发送。您可以选择如何缩放您的画布，或者保持长宽比，如果您希望没有模糊过滤器应用到缩放操作中，这对于依赖像素艺术的游戏来说是很方便的。请参阅官方的CocoonJS Wiki页面，以了解如何控制缩放操作。

参考

http://blog.ludei.com/cocoonjs-a-survival-guide/