From 4fd284658ff47b548bc9c98307cde60b057713e0 Mon Sep 17 00:00:00 2001 From: yvan.ni Date: Fri, 11 Mar 2022 14:56:51 +0800 Subject: [PATCH] 测肤分享的图片优化 --- packageD/pages/AI-test-skin/success_result/success_result.js | 47 ++++++++++++++++++++++++----------------------- packageD/pages/AI-test-skin/success_result/success_result.wxml | 6 +++--- packageD/pages/AI-test-skin/success_result/success_result.wxss | 10 +++++----- 3 files changed, 32 insertions(+), 31 deletions(-) diff --git a/packageD/pages/AI-test-skin/success_result/success_result.js b/packageD/pages/AI-test-skin/success_result/success_result.js index 2f46bd7..46ab5df 100644 --- a/packageD/pages/AI-test-skin/success_result/success_result.js +++ b/packageD/pages/AI-test-skin/success_result/success_result.js @@ -302,6 +302,7 @@ Page({ //-- 获取一下分享要用的图片 -- th.set_share_img(); acne.get_goods(th, setting.stoid); + // let { heightRecord, tab } = th.data; // tab.forEach(item => { // console.log(2); @@ -779,7 +780,7 @@ Page({ ///二微码 var path3 = setting.url + "/api/wx/open/app/user/getWeAppEwm/" + setting.stoid + "?sceneValue=" + scene + "&pageValue=packageD/pages/AI-test-skin/success_result/success_result"; - + // 读取文件成功则OK-- wx.getImageInfo({ src: path3, @@ -793,21 +794,21 @@ Page({ context.fillStyle = '#ebf6f8'; // 灰色实心矩形 // 1. 语法： x坐标, y坐标, 宽度, 高度 - context.fillRect(0, 0, 750 * rpx, 1338 * rpx); + context.fillRect(0, 0, 750 * rpx, 1320 * rpx); context.setFontSize(20 * rpx) context.setFillStyle("#00d8e9") - context.fillText("官方检测认证", 28 * b * rpx, 80 * b * rpx); + context.fillText("官方检测认证", 32 * b * rpx, 80 * b * rpx); //两个底部颜色 context.fillStyle = '#a7ecf5'; - context.fillRect(28 * b * rpx, 136 * b * rpx, 262 * b * rpx, 18 * b * rpx); - context.fillRect(28 * b * rpx, 194 * b * rpx, 262 * b * rpx, 18 * b * rpx); + context.fillRect(32 * b * rpx, 136 * b * rpx, 262 * b * rpx, 18 * b * rpx); + context.fillRect(32 * b * rpx, 194 * b * rpx, 262 * b * rpx, 18 * b * rpx); context.setFontSize(42 * b * rpx) context.setFillStyle("#070609") - context.fillText("我的肌底强韧", 30 * b * rpx, 140 * b * rpx); - context.fillText("肌肤鲜活润泽", 30 * b * rpx, 196 * b * rpx); + context.fillText("我的肌底强韧", 32 * b * rpx, 140 * b * rpx); + context.fillText("肌肤鲜活润泽", 32 * b * rpx, 196 * b * rpx); //先画一个圆形 th.circle(context, 110 * b * rpx, 280 * b * rpx, 140 * b * rpx, "#e7f3f8"); @@ -816,35 +817,35 @@ Page({ context.drawImage(th.data.share_head, 132 * b * rpx, 310 * b * rpx, 230 * b * rpx, 230 * b * rpx); //左右俩个框并填充文字 - th.darwRoundRect(38 * b * rpx, 340 * b * rpx, 140 * b * rpx, 40 * b * rpx, 20 * b * rpx, context); - th.darwRoundRect(324 * b * rpx, 340 * b * rpx, 140 * b * rpx, 40 * b * rpx, 20 * b * rpx, context); - context.setFontSize(20 * b * rpx) + th.darwRoundRect(38 * b * rpx, 340 * b * rpx, 120 * b * rpx, 34 * b * rpx, 17 * b * rpx, context); + th.darwRoundRect(324 * b * rpx, 340 * b * rpx, 120 * b * rpx, 34 * b * rpx, 17 * b * rpx, context); + context.setFontSize(18 * b * rpx) context.setFillStyle("black") - context.fillText("黑眼圈 重度", 50 * b * rpx, 368 * b * rpx); - context.fillText("毛孔 " + th.data.pore_num, 336 * b * rpx, 368 * b * rpx); + context.fillText("黑眼圈 重度", 50 * b * rpx, 363 * b * rpx); + context.fillText("毛孔 " + th.data.pore_num, 340 * b * rpx, 363 * b * rpx); //左右俩个框并填充文字 - th.darwRoundRect(40 * b * rpx, 412 * b * rpx, 116 * b * rpx, 40 * b * rpx, 20 * b * rpx, context); - th.darwRoundRect(348 * b * rpx, 412 * b * rpx, 116 * b * rpx, 40 * b * rpx, 20 * b * rpx, context); + th.darwRoundRect(40 * b * rpx, 412 * b * rpx, 116 * b * rpx, 34 * b * rpx, 17 * b * rpx, context); + th.darwRoundRect(348 * b * rpx, 412 * b * rpx, 116 * b * rpx, 34 * b * rpx, 17 * b * rpx, context); context.setFillStyle("black") - context.fillText("黑头 " + th.data.blackhead_num, 52 * b * rpx, 440 * b * rpx); - context.fillText("色斑 " + th.data.speckle_num, 354 * b * rpx, 440 * b * rpx); + context.fillText("黑头 " + th.data.blackhead_num, 60 * b * rpx, 434 * b * rpx); + context.fillText("色斑 " + th.data.speckle_num, 362 * b * rpx, 434 * b * rpx); //左右俩个框并填充文字 - th.darwRoundRect(60 * b * rpx, 484 * b * rpx, 116 * b * rpx, 40 * b * rpx, 20 * b * rpx, context); - th.darwRoundRect(328 * b * rpx, 484 * b * rpx, 116 * b * rpx, 40 * b * rpx, 20 * b * rpx, context); + th.darwRoundRect(60 * b * rpx, 484 * b * rpx, 116 * b * rpx, 34 * b * rpx, 17 * b * rpx, context); + th.darwRoundRect(328 * b * rpx, 484 * b * rpx, 116 * b * rpx, 34 * b * rpx, 17 * b * rpx, context); context.setFillStyle("black") - context.fillText("皱纹 " + th.data.wrinkle_num, 74 * b * rpx, 510 * b * rpx); - context.fillText("痤疮 " + th.data.acne_num, 344 * b * rpx, 510 * b * rpx); + context.fillText("皱纹 " + th.data.wrinkle_num, 74 * b * rpx, 506 * b * rpx); + context.fillText("痤疮 " + th.data.acne_num, 350 * b * rpx, 506 * b * rpx); //底部的绘制 th.darwRoundRect(38 * b * rpx, 650 * b * rpx, 430 * b * rpx, 160 * b * rpx, 10 * b * rpx, context); //绘制二维码 context.drawImage(vpath, 60 * b * rpx, 672 * b * rpx, 120 * b * rpx, 120 * b * rpx); context.setFillStyle("black") - context.setFontSize(32 * b * rpx) + context.setFontSize(27 * b * rpx) context.fillText("美肤管家AI测肤", 200 * b * rpx, 726 * b * rpx); - context.setFontSize(22 * b * rpx) + context.setFontSize(19 * b * rpx) context.fillText("科学了解皮肤的真实状态", 200 * b * rpx, 766 * b * rpx); //把画板内容绘制成图片，并回调 画板图片路径 @@ -854,7 +855,7 @@ Page({ x: 0, y: 0, width: 750, - height: 1338, + height: 1320, destWidth: 1.4 * 750 * 750 / th.data.screenWidth, destHeight: 1.4 * 750 * 750 / th.data.screenWidth, canvasId: 'share', diff --git a/packageD/pages/AI-test-skin/success_result/success_result.wxml b/packageD/pages/AI-test-skin/success_result/success_result.wxml index a0ab3df..354463c 100644 --- a/packageD/pages/AI-test-skin/success_result/success_result.wxml +++ b/packageD/pages/AI-test-skin/success_result/success_result.wxml @@ -378,12 +378,12 @@ - + @@ -412,7 +412,7 @@ - + diff --git a/packageD/pages/AI-test-skin/success_result/success_result.wxss b/packageD/pages/AI-test-skin/success_result/success_result.wxss index 24be046..4b40181 100644 --- a/packageD/pages/AI-test-skin/success_result/success_result.wxss +++ b/packageD/pages/AI-test-skin/success_result/success_result.wxss @@ -727,7 +727,7 @@ page { z-index: 999999; top: 50%; left: 50%; - width: 70%; + width: 75%; transform: translate(-50%, -50%); } @@ -742,10 +742,10 @@ page { .sh_close { position: absolute; - right: 20rpx; - top: 20rpx; - width: 70rpx; - height: 70rpx; + right: 34rpx; + top: 36rpx; + width: 65rpx; + height: 65rpx; display: flex; justify-content: center; align-items: center; -- libgit2 0.21.4