diff --git a/pages/make/index.vue b/pages/make/index.vue index 6275c9f..0aeac17 100644 --- a/pages/make/index.vue +++ b/pages/make/index.vue @@ -61,7 +61,13 @@ >{{ targetName + "\n " + blessingText.content }} - + + + + 点击标题或个人信息可拖动,双指可缩放标题 + 分享或保存即可去除水印 @@ -125,41 +135,6 @@ 没有更多了 - - - 标题位置 (上下) - - - - 标题位置 (左右) - - - - 标题缩放 - - - @@ -334,8 +309,8 @@ 个人信息 (上下) 个人信息 (左右) { startTouches = []; }; +// 个人信息触摸交互相关 +let startUserTouches = []; +let initialUserState = { + offsetX: 0, + offsetY: 0, +}; + +const handleUserTouchStart = (e) => { + startUserTouches = e.touches; + initialUserState = { + offsetX: userOffsetX.value, + offsetY: userOffsetY.value, + }; +}; + +const handleUserTouchEnd = () => { + startUserTouches = []; +}; + +const handleUserTouchMove = (e) => { + if (!startUserTouches.length) return; + + if (e.touches.length === 1 && startUserTouches.length === 1) { + // 单指拖拽 + const moveX = e.touches[0].clientX - startUserTouches[0].clientX; + const moveY = e.touches[0].clientY - startUserTouches[0].clientY; + + userOffsetX.value = initialUserState.offsetX + moveX * pxToRpx; + userOffsetY.value = initialUserState.offsetY + moveY * pxToRpx; + } +}; + const handleTitleTouchMove = (e) => { if (!currentTitle.value || !startTouches.length) return; @@ -1242,6 +1249,20 @@ function drawRoundRect(ctx, x, y, w, h, r, color) { margin-bottom: 140rpx; /* 为底部固定按钮留出空间 */ } +.interaction-tip { + display: flex; + align-items: center; + justify-content: center; + gap: 8rpx; + color: #ff3b30; + font-size: 24rpx; + font-weight: 500; + margin-bottom: 12rpx; + background: rgba(255, 59, 48, 0.05); + padding: 8rpx 0; + border-radius: 8rpx; +} + /* 卡片预览 */ .card-preview { margin: 30rpx auto 20rpx;