diff --git a/pages/make/index.vue b/pages/make/index.vue index 49856d3..f6cc54c 100644 --- a/pages/make/index.vue +++ b/pages/make/index.vue @@ -22,6 +22,8 @@ :style="{ color: selectedColor, fontFamily: selectedFont.family, + fontSize: fontSize + 'rpx', + lineHeight: fontSize * 1.5 + 'rpx', }" >{{ targetName + "\n " + blessingText }} @@ -29,8 +31,12 @@ - {{ signatureName }} - 送上祝福 + {{ + signatureName + }} + 送上祝福 @@ -114,6 +120,7 @@ v-model="targetName" placeholder="请输入称呼" placeholder-style="color:#ccc" + maxlength="5" /> @@ -150,6 +157,7 @@ v-model="signatureName" placeholder="请输入署名" placeholder-style="color:#ccc" + maxlength="5" /> @@ -175,9 +183,22 @@ + + + 字体大小 + + + - 文字颜色 + 祝福语颜色 + + + + 署名颜色 + + + + + + @@ -262,9 +299,23 @@ const userAvatar = ref( ); const blessingText = ref(""); +const fontSize = ref(32); -const textColors = ["#ffffff", "#ff3b30", "#F5A623", "#8B572A", "#000000"]; +const textColors = [ + "#ffffff", + "#000000", + "#ff3b30", + "#F5A623", + "#8B572A", + "#D0021B", + "#F8E71C", + "#7ED321", + "#4A90E2", + "#9013FE", + "#FFC0CB", +]; const selectedColor = ref("#ffffff"); +const signatureColor = ref("#ffffff"); const fontList = [ { name: "默认", family: "PingFang SC", url: "" }, @@ -578,8 +629,8 @@ const saveByCanvas = async (save = true) => { x: 70, y: 260 + bubbleOffsetY.value, maxWidth: 400, - fontSize: 32, - lineHeight: 46, + fontSize: fontSize.value, + lineHeight: fontSize.value * 1.5, backgroundColor: "rgba(255,255,255,0.85)", textColor: selectedColor.value, fontFamily: selectedFont.value.family, @@ -591,6 +642,7 @@ const saveByCanvas = async (save = true) => { avatarImg: avatarImg, // 传入 Image 对象 username: signatureName.value, desc: "送上祝福", + textColor: signatureColor.value, }); // 6️⃣ 输出 @@ -1143,6 +1195,7 @@ function drawRoundRect(ctx, x, y, w, h, r, color) { .color-list { display: flex; gap: 20rpx; + flex-wrap: wrap; } .color-item { width: 64rpx;