fix: font
This commit is contained in:
@@ -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️⃣ 祝福语气泡
|
||||
|
||||
Reference in New Issue
Block a user