Cocos2.0微信小游戏排行榜图片高度获取

为了好友数据不泄露,微信排行榜采取了开放数据域的办法。

简而言之,就是在一个开放域canvas上讲排行榜数据绘制好,然后主域再将其整个拿过来显示。

坑:

  1. 开放域尺寸只能在主域设置
  2. 主域也无法知道排行榜数据长度来动态设置高度

现在的流程基本是设置好一个固定的尺寸,如:600x1200,不管有多少排行数据,shareCanvas都只能是600x1200。

图片空白,就想给裁剪掉,不然scrollView滑到下面啥都没有很难看。

cc.Sprite有个trim属性,我们用的图片资源的时候,这个属性是管用的。勾选上就会自动帮我们把透明区域裁剪了,sizeMode选为RAW或TRIMMED还能自动适配大小。

upload successful
但是这个方式对shareCanvas的纹理不起作用,找了好久也没找到sprite手动裁剪的办法。

绕个远

直接判断图片指定位置的像素点,看RGBA值,如果Alpha=0,则判断下面没有了,以此来决定scrollView的内容高度。

代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
.....
this.totalSharedTexture = new cc.RenderTexture();
this.totalSharedTexture.initWithSize(550, 4000);//必须操作,否则readPixels返回null,且高度超过4096 ios崩溃
var openDataContext = wx.getOpenDataContext();
openDataContext.canvas.width = 550;
openDataContext.canvas.height = 4000;
//发送开放域消息
Platform.postMessage({
action: "Total"
});
this.totalRenderSchedule = () => {
//复制Canvas到纹理
var openDataContext = wx.getOpenDataContext();
var sharedCanvas = openDataContext.canvas;
this.totalSharedTexture.initWithElement(sharedCanvas);
this.spriteTotal.spriteFrame = new cc.SpriteFrame(this.totalSharedTexture);
//计算高度
let rowNum = 0;
let data = this.totalSharedTexture.readPixels();//像素点数据
//每个像素点32位,即4个byte,依次为为RGBA值
//我的排行榜数据宽550高100为一条数据,所以一条数据所用的字节量为
let rowDataBytes = 4 * 550 * 100;
//大体估计下头像的坐标,找一个点,这个点刚好位于头像上,Alpha值必定不为0的
let firstPixelIndex = 4 * 550 * 70 + 150 * 4;
for (var i = 0; i <= parseInt(data.length / rowDataBytes); i++) {
rowNum = i;
//读取RGBA的Alpha值
let a = data[firstPixelIndex + i * rowDataBytes + 3];
if (a == 0) {
break;
}
}
//重置高度this.content是scrollView中的Content节点
this.content.setContentSize(cc.size(550, 100 * rowNum));
};
//为防止接口调用慢,1秒后读取开放域,执行三次。
this.schedule(this.totalRenderSchedule, 1, 3);
.....

需要注意的点都在注释里了,这样就不会有莫名其妙的空白滚动出现了~~

开放域中的绘制方法就不写了,我用的微信的Api,一点点画的,比较省代码。