使用CocoonJS idtkscale缩放KineticJS画布

Question

我成功地将我的KineticJS游戏嵌入到CocoonJS中，但缩放画布的问题还未解决。我的画布大小为1024x768，在iPad 2上效果很好。但是在iPad 4上，由于Retina屏幕的缘故，游戏只占据了屏幕的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中进行缩放吗？

- pillar15

---

我对CocoonJS不是很熟悉，但当我构建我的游戏时，我只是将舞台的高度和宽度设置为窗口的大小。你能否也这样做呢？例如通过执行getStage().setHeight(document.innerHeight)这样的操作？ - SoluableNonagon

我不熟悉Cocoon，但也许Cocoon会改变你的Kinetic Canvas的宽度和高度，同时保持比例不变。可以尝试使用Stage的scale方法：Stage.scale({scalefactor, scalefactor}); - ElChiniNet

我不会碰Cocoon JS缩放。我会尝试使用Kinetic进行匹配，因为Kinetic随后将呈现您的场景/角色等，而Cocoon只是接受您的<canvas>标记并对其进行缩放。它不进行任何渲染。 - Dnaso

有人能否创建一个最简单的示例，以便在具有https://itunes.apple.com/es/app/cocoonjs-by-ludei/id519623307?mt=8的设备上进行测试？ - lavrton

你试过其他类型了吗？'ScaleToFill'或'ScaleAspectFill'？它们似乎更有意义。 - Jonas

Answer 1

好的，我发现了这个问题的答案，由于有很多赞，我想分享解决方案。

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

1. 注释以下行（不要全部在同一个位置）：

在_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';

1. 在Canvas原型init函数中添加以下内容：

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

这对我很有帮助。现在我会计算画布的正确宽高比，并让CocoonJS为我进行缩放。希望这对他人像我一样有用！

- pillar15

Answer 2

当处理移动设备上的全屏画布对象时，在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/

- BenEgan1991

---

虽然这个链接可能回答了问题，但最好包括答案的必要部分在此处，并提供参考链接。仅有链接的答案如果链接页面发生更改，可能会变得无效。 - bummi

谢谢，我会记住这个，下次会注意的。 - BenEgan1991