开放数据域画一张本地的图片加载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(); } }); |
建议先检查一下路径?
找到问题了, drawImage写错了
开放数据域里的canvas和context要重新创建过的,不能跟主域共用;没看到你完整的代码,但我猜测是context的原因。
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();
}
});