解决画布打开图片导出图片分辨率不值一问题

This commit is contained in:
李志鹏
2025-09-25 13:07:25 +08:00
parent 6a1075b5d4
commit b649717e0d
6 changed files with 101 additions and 26 deletions

View File

@@ -457,6 +457,14 @@ onMounted(async () => {
// 使用window的resize事件代替ResizeObserver
// 只有当窗口大小变化时才更新画布尺寸
// window.addEventListener("resize", handleWindowResize);
if(props.config.initZoom) {
const width = canvasManager.width;
const height = canvasManager.height;
const cwidth = props.config.width;
const cheight = props.config.height;
setZoom(Math.min(width/cwidth,height/cheight)); // 设置画布缩放
}
});
watchEffect(() => {
@@ -521,7 +529,20 @@ function handleWindowResize() {
function resetZoom() {
canvasManager.resetZoom();
}
function setZoom(zoom) {
setTimeout(()=>{
if (!canvasManager) return;
const newZoom = Math.max(zoom / 1.1, 0.1); // 减少10%最小0.1倍
// 使用画布中心作为缩放点
const centerPoint = {
x: canvasManager.canvas.width / 2,
y: canvasManager.canvas.height / 2,
};
canvasManager.animateZoom(centerPoint, newZoom);
})
}
function zoomIn() {
if (!canvasManager) return;
@@ -889,6 +910,7 @@ defineExpose({
layerId = "", // 导出具体图层ID
layerIdArray = [], // 导出多个图层ID数组
expPicType = "png", // 导出图片类型 JPG 或 PNG ,SVG
isEnhanceImg, // 是否是增强图片
} = {}) => {
return canvasManager.exportImage({
isContainBg,
@@ -897,6 +919,7 @@ defineExpose({
layerId,
layerIdArray,
expPicType,
isEnhanceImg,
});
},
/**