27

我的 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 中进行缩放吗？

4

2 回答 2

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/

于 2014-04-08T14:58:48.520 回答
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. 在 Canvas 原型初始化中添加：

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

这对我有用。现在我要做的是计算画布的正确纵横比并让 CocoonJS 为我缩放它。希望这对其他人和我一样有用！

于 2014-08-25T09:52:23.663 回答