diff --git a/pages/make/index.vue b/pages/make/index.vue index 0fcda02..6cd83cd 100644 --- a/pages/make/index.vue +++ b/pages/make/index.vue @@ -17,9 +17,14 @@ @tap="activeTool = 'text'" :style="{ marginTop: 80 + bubbleOffsetY + 'rpx' }" > - {{ - targetName + "\n " + blessingText - }} + {{ targetName + "\n " + blessingText }} @@ -150,6 +155,26 @@ + + + 字体样式 + + + + {{ + font.name + }} + + + + + 文字颜色 @@ -240,6 +265,49 @@ const blessingText = ref(""); const textColors = ["#ffffff", "#ff3b30", "#F5A623", "#8B572A", "#000000"]; const selectedColor = ref("#ffffff"); +const fontList = [ + { name: "默认", family: "PingFang SC", url: "" }, + { + name: "毛笔", + family: "MaoBi", + url: "https://file.lihailezzc.com/MaShanZheng-Regular.ttf", // 示例地址 + }, + { + name: "手写", + family: "ShouXie", + url: "https://file.lihailezzc.com/resource/font/shouxie.ttf", // 示例地址 + }, + { + name: "可爱", + family: "KeAi", + url: "https://file.lihailezzc.com/resource/font/keai.ttf", // 示例地址 + }, +]; +const selectedFont = ref(fontList[0]); + +const changeFont = (font) => { + if (font.url) { + uni.showLoading({ title: "加载字体中" }); + uni.loadFontFace({ + family: font.family, + source: `url("${font.url}")`, + success: () => { + selectedFont.value = font; + uni.hideLoading(); + }, + fail: (err) => { + console.error(err); + uni.hideLoading(); + // 如果加载失败,可以尝试直接设置(有些情况可能已经缓存或本地支持) + // 或者提示用户 + uni.showToast({ title: "字体加载失败", icon: "none" }); + }, + }); + } else { + selectedFont.value = font; + } +}; + const greetingLib = ref([]); const greetingIndex = ref(0); @@ -468,6 +536,7 @@ const saveByCanvas = async (save = true) => { lineHeight: 46, backgroundColor: "rgba(255,255,255,0.85)", textColor: selectedColor.value, + fontFamily: selectedFont.value.family, }); drawUserBubble(ctx, { @@ -955,8 +1024,8 @@ function drawRoundRect(ctx, x, y, w, h, r, color) { box-sizing: border-box; } .greeting-card.active { + background: #fff5f5; border-color: #ff3b30; - background: #fff6f5; } .greeting-text { font-size: 24rpx; @@ -994,9 +1063,34 @@ function drawRoundRect(ctx, x, y, w, h, r, color) { transform: translateY(-50%); color: #999; } +.font-scroll { + white-space: nowrap; + width: 100%; +} + +.font-list { + display: flex; + padding: 4rpx; +} + +.font-item { + padding: 12rpx 24rpx; + background: #f5f5f5; + border-radius: 8rpx; + margin-right: 16rpx; + border: 2rpx solid transparent; + transition: all 0.3s; +} + +.font-item.active { + background: #fff5f5; + border-color: #ff3b30; + color: #ff3b30; +} + .color-list { display: flex; - gap: 24rpx; + gap: 20rpx; } .color-item { width: 64rpx;