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中创建Canvases吗？

Answer 1

如果在移动设备上处理将画布对象全屏制作时。在CocoonJS中，此功能是开箱即用的。所以我们修补了代码来设置

document.body.style.width

和

document.body.style.height

这些是DOM相关且不受支持（全屏模式下也不需要）。此外，还修补了与画布样式和位置相关的代码，因为它不需要。

目前，获取屏幕尺寸的正确方法是

window.innerWidth

和

window.innerHeight

要使Canvas对象全屏显示，请设置

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

您必须了解的关于CocoonJS的一件事是您不必更改画布大小以使其全屏运行。 CocoonJS将向上/向下缩放画布并发送正确的触摸坐标。您可以选择缩放画布的方式，或者保持宽高比，也可以选择是否要在缩放操作中应用模糊滤镜，这对于依赖像素艺术的游戏来说非常方便。请参阅官方CocoonJS Wiki页面，了解如何控制规模操作。

<强>参考

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

Answer 2

好的，我自己找到了这个问题的答案，因为有很多投票，我想分享解决方案。

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

评论这些行（不是全部在一个地方）：

在_resizeDOM中：

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

在Canvas的setWidth中：

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

在Canvas的setHeight中：

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

在Canvas原型init中添加它：

 this._canvas.style.idtkscale = "ScaleAspectFill";

这对我有用。现在我要做的是为帆布计算正确的宽高比，让CocoonJS为我量身定做。希望这对我来说和其他人一样有用！

使用CocoonJS idtkscale缩放KineticJS画布

2 个答案: