diff --git a/pages/make/index.vue b/pages/make/index.vue index 4aa2c13..6275c9f 100644 --- a/pages/make/index.vue +++ b/pages/make/index.vue @@ -425,12 +425,11 @@ const titleState = ref({ offsetX: 0, offsetY: 0, scale: 1, - rotate: 0, }); const titleStyle = computed(() => { return { - transform: `translate(${titleState.value.offsetX}rpx, ${titleState.value.offsetY}rpx) scale(${titleState.value.scale}) rotate(${titleState.value.rotate}deg)`, + transform: `translate(${titleState.value.offsetX}rpx, ${titleState.value.offsetY}rpx) scale(${titleState.value.scale})`, top: '40rpx', pointerEvents: 'auto', transition: 'none' @@ -447,7 +446,6 @@ let initialTitleState = { offsetX: 0, offsetY: 0, scale: 1, - rotate: 0, }; const getDistance = (p1, p2) => { @@ -456,12 +454,6 @@ const getDistance = (p1, p2) => { return Math.sqrt(x * x + y * y); }; -const getAngle = (p1, p2) => { - const x = p1.clientX - p2.clientX; - const y = p1.clientY - p2.clientY; - return (Math.atan2(y, x) * 180) / Math.PI; -}; - const handleTitleTouchStart = (e) => { if (!currentTitle.value) return; startTouches = e.touches; @@ -483,7 +475,7 @@ const handleTitleTouchMove = (e) => { titleState.value.offsetX = initialTitleState.offsetX + moveX * pxToRpx; titleState.value.offsetY = initialTitleState.offsetY + moveY * pxToRpx; } else if (e.touches.length === 2 && startTouches.length === 2) { - // 双指缩放+平移+旋转 + // 双指缩放+平移 const p1 = e.touches[0]; const p2 = e.touches[1]; const startP1 = startTouches[0]; @@ -497,11 +489,6 @@ const handleTitleTouchMove = (e) => { titleState.value.scale = Math.min(Math.max(scale, 0.2), 3.0); } - // 旋转 - const currentAngle = getAngle(p1, p2); - const startAngle = getAngle(startP1, startP2); - titleState.value.rotate = initialTitleState.rotate + (currentAngle - startAngle); - // 平移 const currentCenterX = (p1.clientX + p2.clientX) / 2; const currentCenterY = (p1.clientY + p2.clientY) / 2; @@ -846,7 +833,6 @@ const selectTitle = (title) => { offsetX: 0, offsetY: 0, scale: 1, - rotate: 0, }; closePanel(); } @@ -985,23 +971,11 @@ const saveByCanvas = async (save = true) => { const drawWidth = r2p(previewBaseWidth) * titleState.value.scale; const drawHeight = (titleImg.height / titleImg.width) * drawWidth; - ctx.save(); - // 计算中心点:容器中点 + 偏移量 - const centerX = W / 2 + r2p(titleState.value.offsetX); - const centerY = r2p(40) + drawHeight / 2 + r2p(titleState.value.offsetY); + // 计算绘制起点:居中 + 偏移量 + const titleX = (W - drawWidth) / 2 + r2p(titleState.value.offsetX); + const titleY = r2p(40) + r2p(titleState.value.offsetY); - ctx.translate(centerX, centerY); - ctx.rotate((titleState.value.rotate * Math.PI) / 180); - - // 绘制图片,使图片中心位于 translate 后的 (0,0) - ctx.drawImage( - titleImg, - -drawWidth / 2, - -drawHeight / 2, - drawWidth, - drawHeight - ); - ctx.restore(); + ctx.drawImage(titleImg, titleX, titleY, drawWidth, drawHeight); } // 4️⃣ 祝福语气泡