From 710fbe2b72c9a0a5209d14e623ced31f9f46fc32 Mon Sep 17 00:00:00 2001 From: taiyuan Date: Tue, 24 Aug 2021 14:52:02 +0800 Subject: [PATCH] 直播 --- packageA/pages/liveStream/liveStream.js | 146 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++------------------------------------------------------------------------- packageA/pages/liveStreamDetails/liveStreamDetails.js | 108 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--------------------- packageA/pages/liveStreamDetails/liveStreamDetails.wxml | 3 ++- 3 files changed, 162 insertions(+), 95 deletions(-) diff --git a/packageA/pages/liveStream/liveStream.js b/packageA/pages/liveStream/liveStream.js index 495148e..4027ba0 100644 --- a/packageA/pages/liveStream/liveStream.js +++ b/packageA/pages/liveStream/liveStream.js @@ -44,12 +44,12 @@ Page({ wx.navigateTo({ url: '/packageA/pages/liveStreamDetails/liveStreamDetails?id=' + e.currentTarget.dataset.id + '&live=' + e.currentTarget.dataset.live }) - console.log('options-->'); + // console.log('options-->'); }, // 点击 订阅/观看直播/观看回放 按钮，跳转直播组件 clickLive: function (e) { - console.log('当前房间号roomid：', e.currentTarget.dataset.roomid); + // console.log('当前房间号roomid：', e.currentTarget.dataset.roomid); let roomId = e.currentTarget.dataset.roomid; let customParams = encodeURIComponent(JSON.stringify({ path: 'pages/index/index', @@ -77,74 +77,74 @@ Page({ }); }, - loadLiveList: function (curPage) { - // console.log('---->curPage', curPage); - // var live = {}; - // live.toBegin = []; // 即将开始 - // live.ing = []; // 直播中 - // var liveOver = []; // 已结束 - var that = this; - var storeId = o.stoid; - - // 请求数据 - getApp().request.promiseGet("/api/weshop/wx/livelist/page", { - data: { - storedId: o.stoid, - page: curPage, - live_status: 103 - } - }).then(res => { - if (res.data.code == 0) { - console.log('res------------>', res); - // 计算总页数 - // var total = res.data.data.total; - // console.log("total", total); - // var pageSize = res.data.data.pageSize; - // console.log("pageSize", pageSize); - // var pageNum = that.pageTotal(total, pageSize); - // that.setData({ - // pageNum: that.pageTotal(total, pageSize) - // }); - - // 如果当前请求的是第一页数据，则执行赋值，否则执行合并再赋值 - if (curPage == 1) { - that.setData({ - liveOver: that.data.liveOver.concat(res.data.data.pageData) - }) - } else { - that.setData({ - liveOver: that.data.liveOver.concat(res.data.data.pageData) - }) - }; - - // var list = that.data.list; - // for(var i in list) { - // var liveStatus = list[i].live_status; - // if (liveStatus == '101') { - // live.ing.push(list[i]); - // } else if (liveStatus == '102') { - // live.toBegin.push(list[i]); - // } else if (liveStatus == '103') { - // live.over.push(list[i]); - // } - // } - - // that.setData({ - // liveOver: list - // }); - - curPage++; - that.setData({ - curPage - }); - - console.log('上拉已经触发，当前page------------------------->',that.data.curPage); - - } else { - console.error('请求失败！！！！！'); - } - }) - }, + // loadLiveList: function (curPage) { + // // console.log('---->curPage', curPage); + // // var live = {}; + // // live.toBegin = []; // 即将开始 + // // live.ing = []; // 直播中 + // // var liveOver = []; // 已结束 + // var that = this; + // var storeId = o.stoid; + + // // 请求数据 + // getApp().request.promiseGet("/api/weshop/wx/livelist/page", { + // data: { + // storedId: o.stoid, + // page: curPage, + // live_status: 103 + // } + // }).then(res => { + // if (res.data.code == 0) { + // // console.log('res------------>', res); + // // 计算总页数 + // // var total = res.data.data.total; + // // console.log("total", total); + // // var pageSize = res.data.data.pageSize; + // // console.log("pageSize", pageSize); + // // var pageNum = that.pageTotal(total, pageSize); + // // that.setData({ + // // pageNum: that.pageTotal(total, pageSize) + // // }); + + // // 如果当前请求的是第一页数据，则执行赋值，否则执行合并再赋值 + // if (curPage == 1) { + // that.setData({ + // liveOver: that.data.liveOver.concat(res.data.data.pageData) + // }) + // } else { + // that.setData({ + // liveOver: that.data.liveOver.concat(res.data.data.pageData) + // }) + // }; + + // // var list = that.data.list; + // // for(var i in list) { + // // var liveStatus = list[i].live_status; + // // if (liveStatus == '101') { + // // live.ing.push(list[i]); + // // } else if (liveStatus == '102') { + // // live.toBegin.push(list[i]); + // // } else if (liveStatus == '103') { + // // live.over.push(list[i]); + // // } + // // } + + // // that.setData({ + // // liveOver: list + // // }); + + // curPage++; + // that.setData({ + // curPage + // }); + + // console.log('上拉已经触发，当前page------------------------->',that.data.curPage); + + // } else { + // console.error('请求失败！！！！！'); + // } + // }) + // }, // pageTotal: function (rowCount, pageSize) { // if (rowCount == null || rowCount == "") { @@ -338,7 +338,7 @@ Page({ // }) // } - console.log('触底啦'); + // console.log('触底啦'); this.scrollToLower('/api/weshop/wx/livelist/page', { storedId: o.stoid, live_status: 103 @@ -351,7 +351,7 @@ Page({ onShareAppMessage: function () { if (res.from === 'button') { // 来自页面内转发按钮 - console.log(res.target) + // console.log(res.target) } return { title: '直播列表' @@ -362,7 +362,7 @@ Page({ onShareTimeline: function (res) { if (res.from === 'button') { // 来自页面内转发按钮 - console.log(res.target) + // console.log(res.target) } return { title: '直播列表' diff --git a/packageA/pages/liveStreamDetails/liveStreamDetails.js b/packageA/pages/liveStreamDetails/liveStreamDetails.js index a62fe51..371509b 100644 --- a/packageA/pages/liveStreamDetails/liveStreamDetails.js +++ b/packageA/pages/liveStreamDetails/liveStreamDetails.js @@ -79,14 +79,18 @@ Page({ //生成海报 createPlaybill: function () { // 1.提示 “正在生成海报...” + wx.showLoading({ + title: '正在生成海报...' + }); - // 2.生成海报，如果生成完毕,关闭提示 - this.drawPlaybill(); // 3.展示生成的海报 this.setData({ showActionSheet: 'false', - showPlaybill: !this.data.showPlaybill + // showPlaybill: !this.data.showPlaybill }); + + // 2.生成海报，如果生成完毕,关闭提示 + this.drawPlaybill(); }, @@ -103,8 +107,8 @@ Page({ }) } }); - console.log('宽度',this.data.windowWidth); - console.log('高度',this.data.windowHeight); + // console.log('宽度',this.data.windowWidth); + // console.log('高度',this.data.windowHeight); }, //文本换行 参数：1、canvas对象，2、文本 3、距离左侧的距离 4、距离顶部的距离 5、6、文本的宽度 @@ -140,9 +144,9 @@ drawText: function(ctx, str, leftWidth, initHeight, titleHeight, canvasWidth, un // 生成海报 drawPlaybill: function () { - wx.showLoading({ - title: '正在生成海报...' - }); + // wx.showLoading({ + // title: '正在生成海报...' + // }); // 数据准备 const title = this.data.details.name; @@ -196,26 +200,52 @@ drawText: function(ctx, str, leftWidth, initHeight, titleHeight, canvasWidth, un ctx.fillText(this.data.nickName, 106, 60); // 绘制主图 - ctx.drawImage(this.data.coverImg, 0, 104, 480, 382); - // ctx.draw(true); + ctx.setFillStyle('#f8f8f8'); + ctx.fillRect(0, 104, 480, 380); + + // var w = this.data.coverImgWidth; + // var h = this.data.coverImgHeight; + var w = this.data.coverImgSize.imageWidth; + var h = this.data.coverImgSize.imageHeight; + // var dw = 480/w //canvas与图片的宽高比 + // var dh = 380/h + // var ratio + // // 裁剪图片中间部分 + // if(w > 480 && h > 380 || w < 480 && h < 380){ + // if (dw > dh) { + // ctx.drawImage(this.data.coverImg, 0, (h - 380/dw)/2, w, 380/dw, 0, 104, 480, 380); + // } else { + // ctx.drawImage(this.data.coverImg, (w - 480/dh)/2, 0, 480/dh, h, 0, 104, 480, 380); + // }; + // } + // // 拉伸图片 + // else{ + // if(w < 300){ + // ctx.drawImage(this.data.coverImg, 0, (h - 380/dw)/2, w, 380/dw, 0, 104, 480, 380); + // }else { + // ctx.drawImage(this.data.coverImg, (w - 480/dh)/2, 0, 480/dh, h, 0, 104, 480, 380); + // } + // }; + ctx.drawImage(this.data.coverImg, (480-w)/2, (380-h)/2+104, w, h); + // 绘制文字 ctx.setFontSize(24); ctx.setFillStyle('#1E1E1E'); - this.drawText(ctx, title, 51, 563, 300, 360, 2); + this.drawText(ctx, title, 30, 600, 200, 460, 2); // 绘制小程序码 - ctx.drawImage(this.data.ewm, 310, 525, 132, 132); - // ctx.draw(true); + ctx.drawImage(this.data.ewm, 310, 540, 132, 132); + //绘制文字：长按识别 ctx.setFontSize(20); ctx.setFillStyle('#1E1E1E'); - ctx.fillText('长按识别小程序', 309, 675); + ctx.fillText('长按识别小程序', 309, 710); ctx.draw(true, function() { setTimeout(function() { - console.log("我进来了~~~~~"); + // console.log("我进来了~~~~~"); wx.canvasToTempFilePath({ x: 0, y: 0, @@ -228,10 +258,12 @@ drawText: function(ctx, str, leftWidth, initHeight, titleHeight, canvasWidth, un success: function(res) { wx.hideLoading(); that.setData({ - canvasToImgPath: res.tempFilePath + canvasToImgPath: res.tempFilePath, + showPlaybill: !that.data.showPlaybill }); + // console.log('生成海报陈宫啦', that.data.canvasToImgPath); // that.saveImageToPhotosAlbum(res.tempFilePath); - console.log('截图陈宫：', that.data.canvasToImgPath); + // console.log('截图陈宫：', that.data.canvasToImgPath); // wx.previewImage({ // //将图片预览出来 // urls: [that.data.canvasToImgPath] @@ -446,9 +478,13 @@ drawText: function(ctx, str, leftWidth, initHeight, titleHeight, canvasWidth, un // 请求主图 that.getImageInfo(that.data.details['share_img']).then(res => { that.setData({ - coverImg: res.path + coverImg: res.path, + coverImgWidth: res.width, + coverImgHeight: res.height, + coverImgSize: that.imageResize(res.width, res.height), + // coverImgHeight: res.height, }); - console.log('主图加载成功~') + // console.log('主图加载成功~', that.data.coverImgSize); }); // 请求头像 @@ -568,7 +604,7 @@ drawText: function(ctx, str, leftWidth, initHeight, titleHeight, canvasWidth, un /** * 用户点击右上角分享 */ - onShareAppMessage: function () { + onShareAppMessage: function (res) { this.setData({ showActionSheet: 'false' }) @@ -597,6 +633,36 @@ drawText: function(ctx, str, leftWidth, initHeight, titleHeight, canvasWidth, un title: this.data.details.name // path: '/page/user?id=123' } - } + }, + + + imageResize(imgWidth, imgHeight) { + var imageSize = {}; + var originalWidth = imgWidth;//图片原始宽 + var originalHeight = imgHeight;//图片原始高 + var originalScale = originalHeight/originalWidth;//图片高宽比 + // console.log('originalWidth: ' + originalWidth) + // console.log('originalHeight: ' + originalHeight) + + //获取屏幕宽高 + var winWidth = 480; + var winHeight = 380; + var winScale = winHeight/winWidth;//屏幕高宽比 + // console.log('windowWidth: ' + winWidth) + // console.log('windowHeight: ' + winHeight) + if(originalScale < winScale){//图片高宽比小于屏幕高宽比 + //图片缩放后的宽为屏幕宽 + imageSize.imageWidth = winWidth; + imageSize.imageHeight = (winWidth * originalHeight) / originalWidth; + }else{//图片高宽比大于屏幕高宽比 + //图片缩放后的高为屏幕高 + imageSize.imageHeight = winHeight; + imageSize.imageWidth = (winHeight * originalWidth) / originalHeight; + } + console.log('缩放后的宽: ' + imageSize.imageWidth) + console.log('缩放后的高: ' + imageSize.imageHeight) + return imageSize; + }, + }) diff --git a/packageA/pages/liveStreamDetails/liveStreamDetails.wxml b/packageA/pages/liveStreamDetails/liveStreamDetails.wxml index 8923187..a09fa35 100644 --- a/packageA/pages/liveStreamDetails/liveStreamDetails.wxml +++ b/packageA/pages/liveStreamDetails/liveStreamDetails.wxml @@ -75,7 +75,6 @@ @@ -88,5 +87,7 @@ + + -- libgit2 0.21.4