From 3c9d4711afc35135376bca2cb22beff843367d3e Mon Sep 17 00:00:00 2001 From: song Date: Wed, 1 Dec 2021 16:19:32 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20=E7=BB=98=E5=88=B6canvas?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- CHANGELOG.md | 1 + .../Evaluated/components/ProcessRestore.vue | 115 +++++++++++++----- 2 files changed, 88 insertions(+), 28 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index fd90087..62d64e3 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -175,6 +175,7 @@ - | 时间轴无任务时时间刻度加载修改 | [4921672](https://dd.tall.wiki/gitea/binbin0314/yanyuan_js/commits/4921672) - | 时间轴滚动位置修改 | [551da63](https://dd.tall.wiki/gitea/binbin0314/yanyuan_js/commits/551da63) - | 时间轴骨架屏修改 | [ca78d02](https://dd.tall.wiki/gitea/binbin0314/yanyuan_js/commits/ca78d02) + - | 添加canvas | [9bc13c7](https://dd.tall.wiki/gitea/binbin0314/yanyuan_js/commits/9bc13c7) - | 监听时间基本点 | [033fca0](https://dd.tall.wiki/gitea/binbin0314/yanyuan_js/commits/033fca0) - | 角色显示状态修改 | [7d3b906](https://dd.tall.wiki/gitea/binbin0314/yanyuan_js/commits/7d3b906) - | 角色栏修改 | [19228d6](https://dd.tall.wiki/gitea/binbin0314/yanyuan_js/commits/19228d6) diff --git a/src/pagesProject/project/components/Evaluated/components/ProcessRestore.vue b/src/pagesProject/project/components/Evaluated/components/ProcessRestore.vue index 89a3ff7..fb986be 100644 --- a/src/pagesProject/project/components/Evaluated/components/ProcessRestore.vue +++ b/src/pagesProject/project/components/Evaluated/components/ProcessRestore.vue @@ -17,32 +17,16 @@ export default { canvas: null, context: null, points: [], + timers: [], }; }, onReady(e) { console.log('e: ', e); - // var context = uni.createCanvasContext('firstCanvas'); - // console.log('context: ', context); - // context.setStrokeStyle('#00ff00'); - // context.setLineWidth(5); - // context.rect(0, 0, 200, 200); - // context.stroke(); - // context.setStrokeStyle('#ff0000'); - // context.setLineWidth(2); - // context.moveTo(160, 100); - // context.arc(100, 100, 60, 0, 2 * Math.PI, true); - // context.moveTo(140, 100); - // context.arc(100, 100, 40, 0, Math.PI, false); - // context.moveTo(85, 80); - // context.arc(80, 80, 5, 0, 2 * Math.PI, true); - // context.moveTo(125, 80); - // context.arc(120, 80, 5, 0, 2 * Math.PI, true); - // context.stroke(); - // context.draw(); + this.initCanvas(); }, - mounted() { + async mounted() { this.initCanvas(); this.drawImage(); }, @@ -51,10 +35,90 @@ export default { // 初始化canvas元素 ctx数据 initCanvas() { this.canvas = this.$refs['reduceCanvas']; - this.context = uni.createCanvasContext('firstCanvas'); + this.context = uni.createCanvasContext('firstCanvas', this); + + const { lines } = this.trainResult; + lines.forEach((item, index) => { + this.drawPath(item.line, index); + }); + }, + + /** + * 绘制每段路径 + * @param {string} str; + */ + drawPath(str, index) { + console.log('index: ', index); + if (!this.trainResult.lines || this.trainResult.lines.length === 0) return; + const data = this.generatePathData(str); + this.timers.push( + setTimeout(() => { + if (!data || data.length === 0) { + return; + } + this.context.beginPath(); + this.context.setLineWidth(10); + this.context.setStrokeStyle('#f00'); + const x = +(data[0][0] / 10); + const y = +(data[0][1] / 10); + console.log('x, y: ', x, y); + this.context.moveTo(x, y); + if (data.length === 1) { + // 如果只有1个点 就画个小圆圈 + this.context.arc(x, y, 2, 0, Math.PI * 2, false); + this.context.fill(); + } + }, +data[0][2]), + ); + + for (let i = 1, len = data.length; i < len; i++) { + this.timers.push( + setTimeout(() => { + if (!this.trainResult.lines || this.trainResult.lines.length === 0) { + return; + } + this.context.lineTo(+data[i][0] / 10, +data[i][1] / 10); + this.context.stroke(); + // if (index === this.trainResult.lines.length - 1 && i === len - 1) { + // this.drawing = false; + // } + }, +data[i][2]), + ); + } + this.drawPoint(+data[0][0] / 10, +data[0][1] / 10); + this.drawPoint(+data[data.length - 1][0] / 10, +data[data.length - 1][1] / 10); + this.context.closePath(); + }, + + /** + * 生成绘制每段路径的数据 + * @param {string} str 每条路径的数据"x,y,time;x,y,time" + * @return {array} result [[x,y,time]] + */ + generatePathData(str) { + if (!str) return; + let result = []; + str.split(';').forEach(point => { + result.push(point.split(',')); + }); + return result; + }, + + // 开始结束点 + drawPoint(x, y) { + const { context } = this; + context.beginPath(); + context.setFillStyle('#CCC'); + context.arc(x, y, 4, 0, Math.PI * 3); + context.fill(); + context.setFillStyle('#CCC'); //颜色 + context.font = 'normal 10px 微软雅黑'; //字体 + context.setTextBaseline('middle'); //竖直对齐 + context.setTextAlign('center'); //水平对齐 + context.fillText(0, x, y, 10); //绘制文专字 }, - // 连线题 绘制图片 + // 绘制图片 drawImage() { const { context } = this; const { cardUrl } = this.trainResult; @@ -62,17 +126,12 @@ export default { uni.downloadFile({ url: cardUrl, success: function (res) { - console.log('res: ', res); - context.save(); - context.beginPath(); - context.arc(96, 96, 48, 0, 2 * Math.PI); - context.clip(); - context.drawImage(res.tempFilePath, 48, 48, 200, 200); + context.drawImage(res.tempFilePath, 0, 0, 300, 500); context.restore(); context.draw(); }, fail(error) { - console.error('连线图片加载失败:', error); + console.error('图片加载失败:', error); }, }); },