Merge branch 'dev_vite' of https://github.com/1627315083/aida into dev_vite
This commit is contained in:
@@ -20,11 +20,10 @@ import { SelectionManager } from "./managers/selection/SelectionManager";
|
|||||||
import { RedGreenModeManager } from "./managers/RedGreenModeManager";
|
import { RedGreenModeManager } from "./managers/RedGreenModeManager";
|
||||||
import texturePresetManager from "./managers/brushes/TexturePresetManager";
|
import texturePresetManager from "./managers/brushes/TexturePresetManager";
|
||||||
import { BrushStore } from "./store/BrushStore";
|
import { BrushStore } from "./store/BrushStore";
|
||||||
import cuowuImg from '@/assets/images/homePage/cuowu.svg'
|
import cuowuImg from "@/assets/images/homePage/cuowu.svg";
|
||||||
import { Https } from "@/tool/https";
|
import { Https } from "@/tool/https";
|
||||||
import SelectImages from '@/component/common/SelectImages.vue'
|
import SelectImages from "@/component/common/SelectImages.vue";
|
||||||
import { UrlToFile } from '@/tool/util'
|
import { UrlToFile } from "@/tool/util";
|
||||||
|
|
||||||
|
|
||||||
// import { MinimapManager } from "./managers/minimap/MinimapManager";
|
// import { MinimapManager } from "./managers/minimap/MinimapManager";
|
||||||
|
|
||||||
@@ -105,14 +104,16 @@ const props = defineProps({
|
|||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: false, // 是否显示固定图层
|
default: false, // 是否显示固定图层
|
||||||
},
|
},
|
||||||
isGeneral: { // 从generalMiniCanvas来的
|
isGeneral: {
|
||||||
|
// 从generalMiniCanvas来的
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
default:false
|
default: false,
|
||||||
},
|
},
|
||||||
isEdit: { // 从design点击喜欢过的图片,再点击顶部的编辑图标
|
isEdit: {
|
||||||
|
// 从design点击喜欢过的图片,再点击顶部的编辑图标
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: false
|
default: false,
|
||||||
}
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
// 引用和状态
|
// 引用和状态
|
||||||
@@ -418,8 +419,7 @@ onMounted(async () => {
|
|||||||
|
|
||||||
// 添加删除按钮
|
// 添加删除按钮
|
||||||
// if(!fabric.Object.prototype.controls.deleteControl)addRemoveBtn(removeLayer)
|
// if(!fabric.Object.prototype.controls.deleteControl)addRemoveBtn(removeLayer)
|
||||||
addRemoveBtn(removeLayer)
|
addRemoveBtn(removeLayer);
|
||||||
|
|
||||||
|
|
||||||
// 触发组件初始化事件
|
// 触发组件初始化事件
|
||||||
nextTick(() => {
|
nextTick(() => {
|
||||||
@@ -541,18 +541,17 @@ function handleWindowResize() {
|
|||||||
function resetZoom() {
|
function resetZoom() {
|
||||||
canvasManager.resetZoom();
|
canvasManager.resetZoom();
|
||||||
}
|
}
|
||||||
|
|
||||||
function setZoom(zoom) {
|
function setZoom(zoom) {
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
if (!canvasManager) return;
|
if (!canvasManager) return;
|
||||||
const newZoom = Math.max(zoom, 0.1); // 减少10%,最小0.1倍
|
const newZoom = Math.max(zoom, 0.1);
|
||||||
// 使用画布中心作为缩放点
|
// 使用画布中心作为缩放点
|
||||||
const centerPoint = {
|
const centerPoint = {
|
||||||
x: canvasManager.canvas.width / 2,
|
x: canvasManager.canvas.width / 2,
|
||||||
y: canvasManager.canvas.height / 2,
|
y: canvasManager.canvas.height / 2,
|
||||||
};
|
};
|
||||||
canvasManager.animateZoom(centerPoint, newZoom);
|
canvasManager.animateZoom(centerPoint, newZoom);
|
||||||
})
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
function zoomIn() {
|
function zoomIn() {
|
||||||
@@ -645,11 +644,12 @@ function moveLayerDown(layerId) {
|
|||||||
layerManager.moveLayer(layerId, "down");
|
layerManager.moveLayer(layerId, "down");
|
||||||
}
|
}
|
||||||
|
|
||||||
function addRemoveBtn(fun){//添加删除按钮
|
function addRemoveBtn(fun) {
|
||||||
const deleteIcon = cuowuImg
|
//添加删除按钮
|
||||||
|
const deleteIcon = cuowuImg;
|
||||||
// 创建删除图片元素
|
// 创建删除图片元素
|
||||||
let deleteImg = document.createElement('img')
|
let deleteImg = document.createElement("img");
|
||||||
deleteImg.src = deleteIcon
|
deleteImg.src = deleteIcon;
|
||||||
function renderIcon(icon) {
|
function renderIcon(icon) {
|
||||||
return function (ctx, left, top, styleOverride, fabricObject) {
|
return function (ctx, left, top, styleOverride, fabricObject) {
|
||||||
var size = this.cornerSize;
|
var size = this.cornerSize;
|
||||||
@@ -658,22 +658,22 @@ function addRemoveBtn(fun){//添加删除按钮
|
|||||||
ctx.rotate(fabric.util.degreesToRadians(fabricObject.angle));
|
ctx.rotate(fabric.util.degreesToRadians(fabricObject.angle));
|
||||||
ctx.drawImage(icon, -size / 3, -size / 3, size / 1.5, size / 1.5);
|
ctx.drawImage(icon, -size / 3, -size / 3, size / 1.5, size / 1.5);
|
||||||
ctx.restore();
|
ctx.restore();
|
||||||
}
|
};
|
||||||
}
|
}
|
||||||
fabric.Object.prototype.controls.deleteControl = new fabric.Control({
|
fabric.Object.prototype.controls.deleteControl = new fabric.Control({
|
||||||
x: 0.5,
|
x: 0.5,
|
||||||
y: -0.5,
|
y: -0.5,
|
||||||
offsetY: -16,
|
offsetY: -16,
|
||||||
offsetX: 16,
|
offsetX: 16,
|
||||||
cursorStyle: 'pointer',
|
cursorStyle: "pointer",
|
||||||
mouseUpHandler: deleteFun,
|
mouseUpHandler: deleteFun,
|
||||||
render: renderIcon(deleteImg),
|
render: renderIcon(deleteImg),
|
||||||
cornerSize: 24
|
cornerSize: 24,
|
||||||
})
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
function deleteFun() {
|
function deleteFun() {
|
||||||
removeLayer(layerManager.activeLayerId.value)
|
removeLayer(layerManager.activeLayerId.value);
|
||||||
}
|
}
|
||||||
|
|
||||||
function removeLayer(layerId) {
|
function removeLayer(layerId) {
|
||||||
@@ -749,13 +749,13 @@ function handleImageUpload(event) {
|
|||||||
const selectImages = ref(null);
|
const selectImages = ref(null);
|
||||||
const handleImageSelect = (data) => {
|
const handleImageSelect = (data) => {
|
||||||
UrlToFile(data.url, data.name).then((file) => {
|
UrlToFile(data.url, data.name).then((file) => {
|
||||||
handleImageUpload({ target: { files: [file] } })
|
handleImageUpload({ target: { files: [file] } });
|
||||||
})
|
});
|
||||||
}
|
};
|
||||||
function triggerLibrary() {
|
function triggerLibrary() {
|
||||||
// console.log('CanvasEditor', '打开收藏')
|
// console.log('CanvasEditor', '打开收藏')
|
||||||
if (props.isGeneral || props.isEdit) {
|
if (props.isGeneral || props.isEdit) {
|
||||||
selectImages.value.init()
|
selectImages.value.init();
|
||||||
} else {
|
} else {
|
||||||
emit("trigger-library");
|
emit("trigger-library");
|
||||||
}
|
}
|
||||||
@@ -865,7 +865,7 @@ const changeCanvas = async (command) => {
|
|||||||
isCropByBg: true,
|
isCropByBg: true,
|
||||||
});
|
});
|
||||||
emit("trigger-red-green-mouseup", imageData);
|
emit("trigger-red-green-mouseup", imageData);
|
||||||
},100)
|
}, 100);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
@@ -1108,7 +1108,10 @@ defineExpose({
|
|||||||
</template>
|
</template>
|
||||||
<!-- 扩展插槽 -->
|
<!-- 扩展插槽 -->
|
||||||
<template #customToolsBottom="{ toolButtonProps }">
|
<template #customToolsBottom="{ toolButtonProps }">
|
||||||
<slot name="customToolsBottom" :tool-button-props="toolButtonProps" />
|
<slot
|
||||||
|
name="customToolsBottom"
|
||||||
|
:tool-button-props="toolButtonProps"
|
||||||
|
/>
|
||||||
</template>
|
</template>
|
||||||
</ToolsSidebar>
|
</ToolsSidebar>
|
||||||
</div>
|
</div>
|
||||||
@@ -1131,14 +1134,14 @@ defineExpose({
|
|||||||
<!-- 文本编辑面板 -->
|
<!-- 文本编辑面板 -->
|
||||||
<TextEditorPanel
|
<TextEditorPanel
|
||||||
v-if="canvasManagerLoaded && !enabledRedGreenMode"
|
v-if="canvasManagerLoaded && !enabledRedGreenMode"
|
||||||
:canvas="canvasManager?.canvas"
|
:canvas="canvasManager && canvasManager.canvas"
|
||||||
:commandManager="commandManager"
|
:commandManager="commandManager"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<!-- 液化编辑面板 -->
|
<!-- 液化编辑面板 -->
|
||||||
<LiquifyPanel
|
<LiquifyPanel
|
||||||
v-if="canvasManagerLoaded && !enabledRedGreenMode"
|
v-if="canvasManagerLoaded && !enabledRedGreenMode"
|
||||||
:canvas="canvasManager?.canvas"
|
:canvas="canvasManager && canvasManager.canvas"
|
||||||
:commandManager="commandManager"
|
:commandManager="commandManager"
|
||||||
:liquifyManager="liquifyManager"
|
:liquifyManager="liquifyManager"
|
||||||
:layerManager="layerManager"
|
:layerManager="layerManager"
|
||||||
@@ -1148,7 +1151,7 @@ defineExpose({
|
|||||||
<!-- 选区面板 -->
|
<!-- 选区面板 -->
|
||||||
<SelectionPanel
|
<SelectionPanel
|
||||||
v-if="canvasManagerLoaded && !enabledRedGreenMode"
|
v-if="canvasManagerLoaded && !enabledRedGreenMode"
|
||||||
:canvas="canvasManager?.canvas"
|
:canvas="canvasManager && canvasManager.canvas"
|
||||||
:commandManager="commandManager"
|
:commandManager="commandManager"
|
||||||
:selectionManager="selectionManager"
|
:selectionManager="selectionManager"
|
||||||
:layerManager="layerManager"
|
:layerManager="layerManager"
|
||||||
@@ -1246,7 +1249,8 @@ defineExpose({
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
/* height: 100vh; */
|
/* height: 100vh; */
|
||||||
background-color: #ffffff;
|
background-color: #ffffff;
|
||||||
font-family: pingfang_medium, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
font-family: pingfang_medium, -apple-system, BlinkMacSystemFont, "Segoe UI",
|
||||||
|
sans-serif;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 0;
|
left: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
|
|||||||
Reference in New Issue
Block a user