aidlab/aida_front
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 优化图片数据结构，调整画布初始化逻辑，修复样式细节

Browse Source
This commit is contained in:
bighuixiang
2025-08-02 00:07:51 +08:00
parent 6bc19bbc2e
commit 336a982bbf
1 changed files with 14 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
src/component/Canvas/canvasExample.vue
View File

@@ -17,7 +17,10 @@ const imageData = [
name: "风景照片", name: "风景照片",
type: "风景", type: "风景",
imgList: [ imgList: [
{ url: "https://www.minio-api.aida.com.hk/aida-users/83/printboard/7a0cccfc-1e3c-4c38-af65-d6179f21a267.png?response-content-type=image%2Fpng&response-content-disposition=inline&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20250723%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20250723T025046Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=3612d6c168207bebdae2fa7c7c2c86ea0f48358b99b8b41dec9e2ff15e197e15", name: "山景" }, {
url: "https://www.minio-api.aida.com.hk/aida-users/83/printboard/7a0cccfc-1e3c-4c38-af65-d6179f21a267.png?response-content-type=image%2Fpng&response-content-disposition=inline&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20250723%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20250723T025046Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=3612d6c168207bebdae2fa7c7c2c86ea0f48358b99b8b41dec9e2ff15e197e15",
name: "山景",
},
{ url: "/src/assets/work/2.PNG", name: "海景" }, { url: "/src/assets/work/2.PNG", name: "海景" },
], ],
}, },
@@ -168,9 +171,9 @@ const changeFixedImage = () => {
const canvasInit = () => { const canvasInit = () => {
console.log("画布初始化完成"); console.log("画布初始化完成");
// 可以在这里执行一些初始化逻辑 // 可以在这里执行一些初始化逻辑
canvasEditor.value.changeFixedImage(clothingImageUrlInit, { // canvasEditor.value.changeFixedImage(clothingImageUrlInit, {
imageMode: "contains", // 设置底图包含在画布内 // imageMode: "contains", // 设置底图包含在画布内
}); // });
}; };
const isShowLeft = ref(true); const isShowLeft = ref(true);
@@ -276,7 +279,7 @@ body {
.app-container { .app-container {
height: 100%; height: 100%;
// height: 100vh; // height: 100vh;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
@@ -357,7 +360,7 @@ body {
.custom-tool-btn { .custom-tool-btn {
position: relative; position: relative;
width: 3.5rem; width: 3.5rem;
height: 3.5rem; height: 3.5rem;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@@ -386,9 +389,9 @@ height: 3.5rem;
transform: translateY(-50%); transform: translateY(-50%);
background-color: rgba(0, 0, 0, 0.7); background-color: rgba(0, 0, 0, 0.7);
color: white; color: white;
padding: .4rem .8rem; padding: 0.4rem 0.8rem;
border-radius: .4rem; border-radius: 0.4rem;
margin-left: .8rem; margin-left: 0.8rem;
white-space: nowrap; white-space: nowrap;
font-size: 1.2rem; font-size: 1.2rem;
z-index: 10; z-index: 10;
@@ -399,8 +402,8 @@ height: 3.5rem;
position: absolute; position: absolute;
top: 50%; top: 50%;
right: 100%; right: 100%;
margin-top: -.5rem; margin-top: -0.5rem;
border-width: .5rem; border-width: 0.5rem;
border-style: solid; border-style: solid;
border-color: transparent rgba(0, 0, 0, 0.7) transparent transparent; border-color: transparent rgba(0, 0, 0, 0.7) transparent transparent;
} }