zzc/spring-festival-greetings
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: font

Browse Source
This commit is contained in:
zzc
2026-02-01 17:22:54 +08:00
parent 08befebe42
commit 2bb675bc59
1 changed files with 6 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
pages/make/index.vue
View File

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