fix: avator ,pve

pages/avatar/index.vue

@@ -18,6 +18,10 @@
           class="decor-img"
           :src="selectedDecor"
           mode="aspectFit"
+          :style="decorStyle"
+          @touchstart.stop="onTouchStart"
+          @touchmove.stop="onTouchMove"
+          @touchend.stop="onTouchEnd"
         />
       </view>
       <text class="preview-tip">实时预览效果</text>
@@ -135,6 +139,81 @@ const selectedFrame = ref("");
 const selectedDecor = ref("");
 const activeTab = ref("frame");
 
+// 挂饰状态
+const decorState = ref({
+  x: 300, // 初始中心 X (rpx)
+  y: 80, // 初始中心 Y (rpx)
+  scale: 1,
+  rotate: 0,
+});
+
+const decorStyle = computed(() => {
+  return {
+    transform: `translate(${decorState.value.x - 120}rpx, ${
+      decorState.value.y - 120
+    }rpx) rotate(${decorState.value.rotate}deg) scale(${
+      decorState.value.scale
+    })`,
+  };
+});
+
+// 触摸状态
+let startTouches = [];
+let initialDecorState = {};
+
+const getDistance = (p1, p2) => {
+  const x = p1.clientX - p2.clientX;
+  const y = p1.clientY - p2.clientY;
+  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 onTouchStart = (e) => {
+  startTouches = e.touches;
+  initialDecorState = { ...decorState.value };
+};
+
+const onTouchMove = (e) => {
+  if (e.touches.length === 1 && startTouches.length === 1) {
+    // 单指移动
+    const dx = e.touches[0].clientX - startTouches[0].clientX;
+    const dy = e.touches[0].clientY - startTouches[0].clientY;
+
+    // px 转 rpx
+    const systemInfo = uni.getSystemInfoSync();
+    const ratio = 750 / systemInfo.windowWidth;
+
+    decorState.value.x = initialDecorState.x + dx * ratio;
+    decorState.value.y = initialDecorState.y + dy * ratio;
+  } else if (e.touches.length === 2 && startTouches.length === 2) {
+    // 双指缩放/旋转
+    const p1 = e.touches[0];
+    const p2 = e.touches[1];
+    const startP1 = startTouches[0];
+    const startP2 = startTouches[1];
+
+    const currentDist = getDistance(p1, p2);
+    const startDist = getDistance(startP1, startP2);
+
+    const currentAngle = getAngle(p1, p2);
+    const startAngle = getAngle(startP1, startP2);
+
+    decorState.value.scale =
+      initialDecorState.scale * (currentDist / startDist);
+    decorState.value.rotate =
+      initialDecorState.rotate + (currentAngle - startAngle);
+  }
+};
+
+const onTouchEnd = () => {
+  // 可以在这里做边界检查等
+};
+
 const handleLogind = async () => {
   // Logic after successful login if needed
 };
@@ -163,7 +242,21 @@ const saveAndUse = async () => {
   }
   if (selectedDecor.value) {
     const decorPath = await loadImage(selectedDecor.value);
-    ctx.drawImage(decorPath, 0, 0, size, size);
+    ctx.save();
+    // 映射 rpx 坐标到 Canvas 坐标 (假设 1rpx = 1 unit for 600x600 canvas logic)
+    // Canvas size is 600, Preview is 600rpx. Ratio is 1:1 in logical space.
+    ctx.translate(decorState.value.x, decorState.value.y);
+    ctx.rotate((decorState.value.rotate * Math.PI) / 180);
+    const scale = decorState.value.scale;
+    // 绘制图片，宽高 240
+    ctx.drawImage(
+      decorPath,
+      -120 * scale,
+      -120 * scale,
+      240 * scale,
+      240 * scale,
+    );
+    ctx.restore();
   }
   ctx.draw(false, () => {
     uni.canvasToTempFilePath({
@@ -245,11 +338,11 @@ const loadImage = (url) => {
 }
 .decor-img {
   position: absolute;
-  top: -40rpx;
-  left: 50%;
-  transform: translateX(-50%);
+  top: 0;
+  left: 0;
   width: 240rpx;
   height: 240rpx;
+  /* 移除原有的 transform 和 center positioning，改为由 inline style 控制 */
 }
 .preview-tip {
   display: block;