关于微信小游戏关系链排行榜绘制问题

Creator 2.x
#1

目前在研究微信小游戏的排行榜绘制，现在已经可以绘制图片以及图形到屏幕上。
我把方法分享给大家：
第一步：按照微信小游戏的文档配置开放数据域
第二步：在开放数据域的index.js中编写如下代码：
wx.onMessage(data => {
drawRect();
})

function drawRect(){
console.log(“call drawRect”);

let sharedCanvas = wx.getSharedCanvas()
let context = sharedCanvas.getContext(‘2d’)
context.fillStyle = ‘red’
context.fillRect(0, 0, 2000, 2000)
}

第三步：在creator中创建一个脚本test，定义一个图片变量，赋值，比如命名为testSprite
第四步：在test脚本中向开放数据域发送数据请求，代码如下：
try {
var openDataContext = wx.getOpenDataContext();
openDataContext.postMessage({
funcName: “openRank”
});
} catch (e) {}

第五步：在test脚本的update中添加如下代码即可：
update: function update(dt) {
if(this.isDrwa == true){
var openDataContext = wx.getOpenDataContext();
var sharedCanvas = openDataContext.canvas;
var texture = new cc.Texture2D(); //这里不用每次new，onload时new一个后面重复用即可
texture.initWithElement(sharedCanvas);
texture.handleLoadedTexture();
this.spriteNode.spriteFrame = new cc.SpriteFrame(texture);
}

  }
3赞
#2

在update里这么操作内存会爆增吧？

#3

看需求了，如果是静态图片不用update，如果是排行榜这种的有滑动操作的就得update一直更新了，其实就是每一帧换一张图片

#4

你可以监听滑动啊

#5

对，这个update确实内存会飞起来~滑动监听是一个方案，不过也不确定会不会低效，这个可以翻页，就不会起飞了

#6

怎样根据返回的数据长度动态设置shareCanvas的宽高？

#7

请问下楼主，这个界面的开关怎么设置

#8

var sharedCanvas = openDataContext.canvas;
sharedCanvas.width = 1000;
sharedCanvas.height = 1000;

主域里写这个

#9

这个界面留出一个画布位置即可，其余的还是creator的ui逻辑，关闭的话自己加个按钮就可以了

#10

用drawImage把sharedCanvas画到主域canvas上不行吗，为啥每次都要生成一个cc.Texture2D？

#11

我按这个方法做的绘制，但是微信开发工具上会把子域的图像进行缩放，但是真机跑的时候又都是正常的。

#12

主域和开放数据域只能通过消息传递，这个好像没有办法直接绘制过去

#13

var sharedCanvas = openDataContext.canvas;
sharedCanvas.width = 1000;
sharedCanvas.height = 1000;

在主域里设置一下画布大小，跟你的精灵设置一样大小就不会有缩放了

#14

如果我赋值的话，会警告。而且整个排行榜消失了。

#15

可以加你qq，像你请假下排行榜问题吗

#16

开放数据域中使用到的资源怎么使用

#17

兄台，我这边使用这种方法，没有报错，也没有显示子域的内容，不知道是什么问题，有这个警告，是这个导致的么

#18

是的。只能在主域代码中给sharedCanvas设置宽高，而且这一操作需要在将sharedCanvas绘制到主域之前

#19

开放数据域里不能设置画布的大小，只能在主域先设置好

#20

那么主域上怎么知道画布要设置多大？