|
|
@@ -3,7 +3,7 @@ import { useEffect, useState } from "react";
|
|
|
import { View, Canvas } from "@tarojs/components";
|
|
|
import Taro, { useDidShow } from "@tarojs/taro";
|
|
|
|
|
|
-export default function MomentDetailShare(props: { user: any,canvas_id?:string, cover?: string, btnColor?: string }) {
|
|
|
+export default function MomentDetailShare(props: { user: any, canvas_id?: string, cover?: string, btnColor?: string }) {
|
|
|
const user = props.user;
|
|
|
|
|
|
const info = Taro.getWindowInfo ? Taro.getWindowInfo() : Taro.getSystemInfoSync()
|
|
|
@@ -18,7 +18,6 @@ export default function MomentDetailShare(props: { user: any,canvas_id?:string,
|
|
|
|
|
|
|
|
|
async function downCover() {
|
|
|
- console.log('a')
|
|
|
var urls: any = []
|
|
|
if (props.cover) {
|
|
|
urls = [props.cover, user.avatar]
|
|
|
@@ -40,7 +39,25 @@ export default function MomentDetailShare(props: { user: any,canvas_id?:string,
|
|
|
url,
|
|
|
success: (res) => {
|
|
|
if (res.statusCode === 200) {
|
|
|
- resolve(res.tempFilePath);
|
|
|
+ console.log(res)
|
|
|
+ Taro.getImageInfo({
|
|
|
+ src: res.tempFilePath,
|
|
|
+ success(result) {
|
|
|
+ resolve({
|
|
|
+ path: res.tempFilePath,
|
|
|
+ width: result.width,
|
|
|
+ height: result.height
|
|
|
+ })
|
|
|
+ },
|
|
|
+ fail(e) {
|
|
|
+ resolve({
|
|
|
+ path: res.tempFilePath,
|
|
|
+ width: 200,
|
|
|
+ height: 200
|
|
|
+ })
|
|
|
+ },
|
|
|
+ })
|
|
|
+ // resolve(res.tempFilePath);
|
|
|
} else {
|
|
|
reject(new Error('图片下载失败'));
|
|
|
}
|
|
|
@@ -52,7 +69,7 @@ export default function MomentDetailShare(props: { user: any,canvas_id?:string,
|
|
|
});
|
|
|
}
|
|
|
|
|
|
- function beginDraw(imagePaths) {
|
|
|
+ function beginDraw(images) {
|
|
|
|
|
|
const query = Taro.createSelectorQuery();
|
|
|
query.select(`#${canvasId()}`).fields({ node: true, size: true });
|
|
|
@@ -64,34 +81,94 @@ export default function MomentDetailShare(props: { user: any,canvas_id?:string,
|
|
|
global.canvas2 = _canvas
|
|
|
|
|
|
if (props.cover) {
|
|
|
- drawDetail(ctx, imagePaths, _canvas)
|
|
|
+ drawDetail(ctx, images, _canvas)
|
|
|
}
|
|
|
else {
|
|
|
- drawDetail2(ctx, imagePaths, _canvas)
|
|
|
+ drawDetail2(ctx, images, _canvas)
|
|
|
}
|
|
|
|
|
|
});
|
|
|
}
|
|
|
|
|
|
- function drawDetail(ctx, imagePaths, canvas) {
|
|
|
+ function drawDetail(ctx, images, canvas) {
|
|
|
const img = canvas.createImage(); // 创建图像对象
|
|
|
- img.src = imagePaths[0]
|
|
|
+ img.src = images[0].path
|
|
|
img.onload = () => {
|
|
|
- ctx.drawImage(img, 0, 0, 420 * dpr, 336 * dpr);
|
|
|
+ const imgWidth = images[0].width;
|
|
|
+ const imgHeight = images[0].height;
|
|
|
+ var offsetX, offsetY, newWidth, newHeight;
|
|
|
+ if (imgWidth / imgHeight > 430 / 336) {
|
|
|
+ newWidth = imgHeight * 430 / 336;
|
|
|
+ newHeight = imgHeight;
|
|
|
+ offsetX = (imgWidth - newWidth) / 2.0
|
|
|
+ offsetY = 0
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ newWidth = imgWidth;
|
|
|
+ newHeight = imgWidth * 336 / 430;
|
|
|
+ offsetX = 0
|
|
|
+ offsetY = (imgHeight - newHeight) / 2.0
|
|
|
+ }
|
|
|
+
|
|
|
+ ctx.drawImage(img, offsetX, offsetY, newWidth, newHeight, 0, 0, 420 * dpr, 336 * dpr);
|
|
|
ctx.stroke();
|
|
|
+
|
|
|
+ ctx.fillStyle = 'rgba(0,0,0,0.5)'
|
|
|
+ ctx.fillRect(0, 0, 420 * dpr, 336 * dpr);
|
|
|
const img1 = canvas.createImage(); // 创建图像对象
|
|
|
- img1.src = imagePaths[1]
|
|
|
+ img1.src = images[1].path
|
|
|
img1.onload = () => {
|
|
|
+ const x = 64 * dpr; // 矩形左上角 x 坐标
|
|
|
+ const y = 212 * dpr; // 矩形左上角 y 坐标
|
|
|
+ const width = 292 * dpr; // 矩形宽度
|
|
|
+ const height = 72 * dpr; // 矩形高度
|
|
|
+ const radius = 18 * dpr; // 圆角半径
|
|
|
+
|
|
|
+ // 绘制带圆角的矩形
|
|
|
+
|
|
|
+ ctx.beginPath();
|
|
|
+ ctx.moveTo(x + radius, y); // 移动到左上角的圆角位置
|
|
|
+ ctx.arcTo(x + width, y, x + width, y + height, radius); // 右上角
|
|
|
+ ctx.arcTo(x + width, y + height, x, y + height, radius); // 右下角
|
|
|
+ ctx.arcTo(x, y + height, x, y, radius); // 左下角
|
|
|
+ ctx.arcTo(x, y, x + width, y, radius); // 左上角
|
|
|
+ ctx.closePath();
|
|
|
+ ctx.fillStyle = props.btnColor ? props.btnColor : '#ff0000'; // 设置填充颜色为红色
|
|
|
+ ctx.fill(); // 填充矩形
|
|
|
+
|
|
|
+ ctx.font = `bold ${26 * dpr}px sans-serif`
|
|
|
+ ctx.fillStyle = '#ffffff'
|
|
|
+ ctx.textAlign = 'center'
|
|
|
+ ctx.fillText('立即跟卡', x + width / 2.0, y + height / 2.0 + 10 * dpr);
|
|
|
+
|
|
|
+
|
|
|
ctx.font = `bold ${24 * dpr}px sans-serif`
|
|
|
- ctx.fillStyle = '#E0B152'
|
|
|
+ ctx.fillStyle = '#ffffff'
|
|
|
ctx.textAlign = 'center'
|
|
|
var name = user.nickname.length > 8 ? user.nickname.substring(0, 8) + '...' : user.nickname
|
|
|
- ctx.fillText(name, 210 * dpr, 182 * dpr);
|
|
|
+ ctx.fillText(name, 210 * dpr, 178 * dpr);
|
|
|
+
|
|
|
+
|
|
|
+ const imgWidth = images[1].width;
|
|
|
+ const imgHeight = images[1].height;
|
|
|
+ var offsetX, offsetY, newWidth, newHeight;
|
|
|
+ if (imgWidth > imgHeight) {
|
|
|
+ newWidth = imgHeight;
|
|
|
+ newHeight = imgHeight;
|
|
|
+ offsetX = (imgWidth - imgHeight) / 2.0
|
|
|
+ offsetY = 0
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ newWidth = imgWidth;
|
|
|
+ newHeight = imgWidth;
|
|
|
+ offsetX = 0
|
|
|
+ offsetY = (imgHeight - imgWidth) / 2.0
|
|
|
+ }
|
|
|
|
|
|
ctx.beginPath()
|
|
|
- ctx.arc(210 * dpr, 82 * dpr, 70 * dpr, 0, Math.PI * 2)
|
|
|
+ ctx.arc(210 * dpr, 90 * dpr, 50 * dpr, 0, Math.PI * 2)
|
|
|
ctx.clip()
|
|
|
- ctx.drawImage(img1, 140 * dpr, 12 * dpr, 140 * dpr, 140 * dpr);
|
|
|
+ ctx.drawImage(img1, offsetX, offsetY, newWidth, newHeight, 160 * dpr, 40 * dpr, 100 * dpr, 100 * dpr);
|
|
|
ctx.restore()
|
|
|
ctx.stroke();
|
|
|
|
|
|
@@ -111,11 +188,11 @@ export default function MomentDetailShare(props: { user: any,canvas_id?:string,
|
|
|
|
|
|
}
|
|
|
|
|
|
- function drawDetail2(ctx, imagePaths, canvas) {
|
|
|
+ function drawDetail2(ctx, images, canvas) {
|
|
|
ctx.fillStyle = '#f5f5f5'
|
|
|
ctx.fillRect(0, 0, 420 * dpr, 336 * dpr);
|
|
|
const img1 = canvas.createImage(); // 创建图像对象
|
|
|
- img1.src = imagePaths[0]
|
|
|
+ img1.src = images[0].path
|
|
|
img1.onload = () => {
|
|
|
const x = 64 * dpr; // 矩形左上角 x 坐标
|
|
|
const y = 212 * dpr; // 矩形左上角 y 坐标
|
|
|
@@ -147,10 +224,38 @@ export default function MomentDetailShare(props: { user: any,canvas_id?:string,
|
|
|
var name = user.nickname.length > 8 ? user.nickname.substring(0, 8) + '...' : user.nickname
|
|
|
ctx.fillText(name, 210 * dpr, 178 * dpr);
|
|
|
|
|
|
+
|
|
|
+ const imgWidth = images[0].width;
|
|
|
+ const imgHeight = images[0].height;
|
|
|
+ var offsetX, offsetY, newWidth, newHeight;
|
|
|
+ if (imgWidth > imgHeight) {
|
|
|
+ newWidth = imgHeight;
|
|
|
+ newHeight = imgHeight;
|
|
|
+ offsetX = (imgWidth - imgHeight) / 2.0
|
|
|
+ offsetY = 0
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ newWidth = imgWidth;
|
|
|
+ newHeight = imgWidth;
|
|
|
+ offsetX = 0
|
|
|
+ offsetY = (imgHeight - imgWidth) / 2.0
|
|
|
+ }
|
|
|
+ // const avatarWidth = 100 * dpr;
|
|
|
+ // const avatarHeight = 100 * dpr;
|
|
|
+ // // 计算缩放比例
|
|
|
+ // const scale = Math.max(avatarWidth / imgWidth, avatarHeight / imgHeight);
|
|
|
+ // const newWidth = imgWidth * scale;
|
|
|
+ // const newHeight = imgHeight * scale;
|
|
|
+
|
|
|
+ // // 计算绘制的起始坐标,确保居中裁剪
|
|
|
+ // const offsetX = (newWidth - avatarWidth) / 2;
|
|
|
+ // const offsetY = (newHeight - avatarHeight) / 2;
|
|
|
+ // debugger
|
|
|
+
|
|
|
ctx.beginPath()
|
|
|
ctx.arc(210 * dpr, 90 * dpr, 50 * dpr, 0, Math.PI * 2)
|
|
|
ctx.clip()
|
|
|
- ctx.drawImage(img1, 160 * dpr, 40 * dpr, 100 * dpr, 100 * dpr);
|
|
|
+ ctx.drawImage(img1, offsetX, offsetY, newWidth, newHeight, 160 * dpr, 40 * dpr, 100 * dpr, 100 * dpr);
|
|
|
ctx.restore()
|
|
|
ctx.stroke();
|
|
|
|
|
|
@@ -169,8 +274,8 @@ export default function MomentDetailShare(props: { user: any,canvas_id?:string,
|
|
|
|
|
|
}
|
|
|
|
|
|
- function canvasId(){
|
|
|
- return props.canvas_id??'momentdetail_share'
|
|
|
+ function canvasId() {
|
|
|
+ return props.canvas_id ?? 'momentdetail_share'
|
|
|
}
|
|
|
|
|
|
return <View style={{ position: 'absolute', left: 0, top: -500, width: 420, height: 336, zIndex: 10000 }}>
|