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;