javascript - 使用 CocoonJS idtkscale 缩放 KineticJS Canvas

Question

我的 KineticJS 游戏在 CocoonJS 中运行得很好，除了缩放 Canvas 。我有 1024x768 Canvas ，这对 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 创建 Canvas 以在 CocoonJS 中扩展吗？

Answer 1

如果在移动设备上处理使 Canvas 对象全屏显示时。在 CocoonJS 中，这个特性是开箱即用的。所以我们修补代码来设置

document.body.style.width

和

document.body.style.height

这些与 DOM 相关且不受支持(在全屏模式下也不需要)。还修补了与 Canvas 样式和位置相关的代码，因为它不需要。

现在，获取屏幕尺寸的正确方法是

window.innerWidth

和

window.innerHeight

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

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

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

引用

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