收藏
回答

小游戏开放数据域加载本地图片失败(开发者工具)

框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
小游戏 Bug 开放数据域 工具 0.0.0 2.8.3

开放数据域画一张本地的图片加载onerror,在开发者工具里面的,没试过真机,原先图片的位置fillRect画纯色没问题。

var bgImage = wx.createImage();

bgImage.onload = function () {

image.width = width;

image.height = height;

context.drawImage(image, left, top, width, height);

}

bgImage.onerror = function (error) {

console.log("error", error);

}

bgImage.src = "image/di.png";





开放数据域完整代码:

var friendsData = [];
var sharedCanvas = wx.getSharedCanvas();
var sharedWidth = sharedCanvas.width;
var sharedHeight = sharedCanvas.height;
var context = sharedCanvas.getContext('2d');
 
var topOffset = 0;// offset按理来说应该都是负数
var minOffset = 0;
 
var lastTouchedY = 0;
 
function roundRect(ctx, image, x, y, w, h, r) {
    var min_size = Math.min(w, h);
    if (r > min_size / 2) r = min_size / 2;
    ctx.beginPath();
    ctx.moveTo(x + r, y);
    ctx.arcTo(x + w, y, x + w, y + h, r);
    ctx.arcTo(x + w, y + h, x, y + h, r);
    ctx.arcTo(x, y + h, x, y, r);
    ctx.arcTo(x, y, x + w, y, r);
    ctx.closePath();
}
 
 
function initFriendsData() {
    // wx.setUserCloudStorage({
    //     KVDataList: [{ key: "rank-score", value: "10" }]
    // });
    wx.getFriendCloudStorage({
        keyList: ["rank-score"],
        success: function (res) {
            friendsData = [];
            for (var index = 0; index < res.data.length; ++index) {
                var user = res.data[index];
                user.avatarUrl;
                user.nickname;
                user.openid;
 
                var userData = {};
                userData.avatarUrl = user.avatarUrl;
                userData.nickname = user.nickname;
                for (var dataIndex = 0; dataIndex < user.KVDataList.length; ++dataIndex) {
                    var data = user.KVDataList[dataIndex];
                    userData.key = data.key;
                    userData.value = data.value;
                }
                friendsData.push(userData);
            }
            friendsData = friendsData.sort(function(a, b) {
                return parseInt(a.value) > parseInt(b.value);
            });
            drawSharedCanvas(true);
            addTouchEvent();
        }
    });
}
 
function addTouchEvent() {
    wx.offTouchStart();
    wx.offTouchMove();
    wx.onTouchStart(function(event) {
        lastTouchedY = event.changedTouches[0].pageY;
    });
    wx.onTouchMove(function(event) {
        var touchedY = event.changedTouches[0].pageY;
 
        var changed = touchedY - lastTouchedY;
        lastTouchedY = touchedY;
        topOffset = topOffset + changed;
        if (topOffset >= 0) {
            topOffset = 0;
        }
        if (topOffset < minOffset) {
            topOffset = minOffset;
        }
        drawSharedCanvas(false);
    });
}
 
function drawSharedCanvas(isInit) {
    context.clearRect(0, 0, sharedWidth, sharedHeight);
 
    // 背景可以不画,这样背景就是透明的,由lua来画背景就可以了
    context.fillStyle = "red";
    context.fillRect(0, 0, sharedWidth, sharedHeight);
 
    for (var i = 0; i < friendsData.length; ++i) {
        (function (i, user, isInit) {
            var user = friendsData[i];
            var index = parseInt(i);
            var top = (70 * index) + ((index + 1) * 10) + topOffset;
            var left = sharedWidth * 0.1;
            var width = sharedWidth * 0.8;
            var height = 70;
 
            // context.fillStyle = "green";
            // context.fillRect(left, top, width, height);
            var bgImage = wx.createImage();
            bgImage.onload = function () {
                console.log("==================================================================");
                console.log("onload");
                bgImage.width = width;
                bgImage.height = height;
                context.drawImage(bgImage, left, top, width, height);
            }
            bgImage.onerror = function (error) {
                console.log("==================================================================");
                console.log("error", error);
            }
            bgImage.src = "image/di.png";
 
            // 画头像
            var image = wx.createImage();
            image.onload = function () {
                image.width = 50;
                image.height = 50;
                context.save();
                roundRect(context, image, left + 10, top + 10, 50, 50, 10);
                context.clip();
                context.drawImage(image, left + 10, top + 10, 50, 50);
            }
            image.src = user.avatarUrl;
 
            // 画昵称
            context.fillStyle = "yellow";
            context.font = "25px '微软雅黑'";
            context.textBaseline = "middle";
            context.fillText(user.nickname, left + 70, top + 37.5);
 
            // 画分数
            context.fillStyle = "blue";
            context.fillText("得分: " + user.value, width - 100, top + 37.5);
 
            if (isInit) {
                minOffset = (top + 80 - sharedHeight) * (-1);
                if (minOffset > 0) {
                    minOffset = 0;
                }
                if (minOffset < minOffset) {
                    minOffset = minOffset;
                }
            }
        })(i, friendsData[i], isInit);
    }
}
 
wx.onMessage(function(data) {
    if (data.command === 'init') {
        sharedWidth = sharedCanvas.width;
        sharedHeight = sharedCanvas.height;
        initFriendsData();
    }
});


最后一次编辑于  2019-10-18
回答关注问题邀请回答
收藏

3 个回答

  • 小游戏运营专员-宏
    小游戏运营专员-宏
    2019-10-17

    建议先检查一下路径?

    2019-10-17
    有用
    回复 1
    • 李
      2019-10-17
      问题描述的路径很清楚了吧- -图片路径填的是从项目根目录开始的
      2019-10-17
      回复
  • 李
    2019-10-18

    找到问题了, drawImage写错了

    2019-10-18
    有用
    回复
  • 黄力钧
    黄力钧
    2019-10-17

    开放数据域里的canvas和context要重新创建过的,不能跟主域共用;没看到你完整的代码,但我猜测是context的原因。


    2019-10-17
    有用
    回复 7
    • 李
      2019-10-18
      context是sharedCanvas的
      2019-10-18
      回复
    • 黄力钧
      黄力钧
      2019-10-18回复
      你把开发数据域的这块完整代码分享出来看一下吧
      2019-10-18
      回复
    • 李
      2019-10-18
      2019-10-18
      回复
    • 李
      2019-10-18回复黄力钧
      好像发不全,稍等
      2019-10-18
      回复
    • 李
      2019-10-18回复黄力钧
      追加了一段代码在问题里面
      2019-10-18
      回复
    查看更多(2)
登录 后发表内容
问题标签