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

画布开发合并：选择状态消失，填充背景实时更新，图层层级关系，新增画布名字递增

Browse Source
This commit is contained in:
李志鹏
2025-11-07 16:52:42 +08:00
parent 2899f4d6fe
commit a10f07a772
13 changed files with 850 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/component/Canvas/CanvasEditor/commands/LayerCommands.js
View File

@@ -2058,7 +2058,7 @@ export class LayerObjectsToGroupCommand extends Command {
}
try {
await optimizeCanvasRendering(this.canvas, () => {
await optimizeCanvasRendering(this.canvas, async () => {
if (existingGroup) {
// 向现有组添加对象
this._addObjectsToExistingGroup(existingGroup, newObjectsToAdd);
@@ -2069,8 +2069,8 @@ export class LayerObjectsToGroupCommand extends Command {
this._createNewGroupWithAllObjects(newObjectsToAdd);
this.groupObjectId = this.newGroupId;
this.wasGroupCreated = true;
await this.layerManager?.layerSort?.rearrangeObjects();
}
// 更新交互性
this.layerManager?.updateLayersObjectsInteractivity?.(false).then(()=>{
// 更新缩略图

242
src/component/Canvas/CanvasEditor/commands/LiquifyCommands.js
View File

@@ -1,5 +1,7 @@
import { Command, FunctionCommand } from "./Command";
import { getLiquifyReferenceManager } from "../managers/LiquifyReferenceManager";
import { optimizeCanvasRendering } from "../utils/helper";
import { fabric } from "fabric-with-all";
/**
* 液化命令基类
@@ -59,9 +61,7 @@ export class LiquifyCommand extends Command {
// 更新画布上的对象
await this._updateObjectWithResult();
// 刷新Canvas
this.canvas.renderAll();
// 注意：_updateObjectWithResult 内部已使用 optimizeCanvasRendering，会自动渲染
return this.resultData;
}
@@ -130,6 +130,7 @@ export class LiquifyCommand extends Command {
/**
* 使用变形结果更新对象
* 优化：直接使用 setElement 更新现有对象，避免创建新对象和替换操作
* @private
*/
async _updateObjectWithResult() {
@@ -142,48 +143,103 @@ export class LiquifyCommand extends Command {
const tempCtx = tempCanvas.getContext("2d");
tempCtx.putImageData(this.resultData, 0, 0);
console.log("临时Canvas创建成功 _updateObjectWithResult", this.resultData);
// 更新Fabric图像
await new Promise((resolve) => {
fabric.Image.fromURL(tempCanvas.toDataURL(), (img) => {
// 保留原对象的属性
img.set({
left: this.targetObject.left,
top: this.targetObject.top,
scaleX: this.targetObject.scaleX,
scaleY: this.targetObject.scaleY,
angle: this.targetObject.angle,
flipX: this.targetObject.flipX,
flipY: this.targetObject.flipY,
opacity: this.targetObject.opacity,
});
// 替换Canvas上的对象
const index = this.canvas.getObjects().indexOf(this.targetObject);
if (index !== -1) {
this.canvas.remove(this.targetObject);
this.canvas.insertAt(img, index);
this.targetObject = img;
}
// 确保图层引用更新
const layer = this.layerManager.getLayerById(this.targetLayerId);
if (layer) {
if (layer.type === "background" && layer.fabricObject === this.targetObject) {
layer.fabricObject = img;
} else if (layer.fabricObjects) {
const objIndex = layer.fabricObjects.indexOf(this.targetObject);
if (objIndex !== -1) {
layer.fabricObjects[objIndex] = img;
}
}
}
resolve();
});
// 使用优化渲染工具，避免图层闪烁
await optimizeCanvasRendering(this.canvas, async () => {
// 预加载图像元素，确保完全加载后再更新
await this._updateObjectElementDirectly(tempCanvas.toDataURL());
});
return true;
}
/**
* 直接更新对象的图像元素，避免对象替换造成的图层闪烁
* @param {String} imageDataURL 图像数据的 DataURL
* @private
*/
async _updateObjectElementDirectly(imageDataURL) {
return new Promise((resolve, reject) => {
// 创建 HTMLImageElement 并预加载
const imgElement = new Image();
imgElement.onload = () => {
try {
// 保存当前对象状态（非图像属性）
const currentState = {
left: this.targetObject.left,
top: this.targetObject.top,
scaleX: this.targetObject.scaleX,
scaleY: this.targetObject.scaleY,
angle: this.targetObject.angle,
flipX: this.targetObject.flipX,
flipY: this.targetObject.flipY,
opacity: this.targetObject.opacity,
};
// 直接更新现有对象的图像元素，保持对象引用不变
if (this.targetObject.setElement) {
this.targetObject.setElement(imgElement);
} else if (this.targetObject._element) {
this.targetObject._element = imgElement;
this.targetObject._originalElement = imgElement;
}
// 恢复对象属性（setElement 可能会重置一些属性）
this.targetObject.set(currentState);
// 标记对象需要重新渲染
this.targetObject.dirty = true;
this.targetObject.setCoords();
resolve();
} catch (error) {
console.error("更新对象元素失败:", error);
reject(error);
}
};
imgElement.onerror = () => {
reject(new Error("图像加载失败"));
};
// 开始加载图像
imgElement.src = imageDataURL;
});
}
/**
* 安全地替换对象，避免图层闪烁（保留作为备用方法）
* @param {Object} newImg 新的fabric图像对象
* @private
*/
_replaceObjectSafely(newImg) {
// 保存旧对象引用，用于更新图层引用
const oldObject = this.targetObject;
// 替换Canvas上的对象
const index = this.canvas.getObjects().indexOf(oldObject);
if (index !== -1) {
// 在禁用自动渲染的情况下，先插入新对象，再移除旧对象
// 这样可以避免中间出现空白（因为renderOnAddRemove已被禁用）
this.canvas.insertAt(newImg, index);
this.canvas.remove(oldObject);
this.targetObject = newImg;
}
// 确保图层引用更新
const layer = this.layerManager.getLayerById(this.targetLayerId);
if (layer) {
if (layer.type === "background" && layer.fabricObject === oldObject) {
layer.fabricObject = newImg;
} else if (layer.fabricObjects) {
const objIndex = layer.fabricObjects.indexOf(oldObject);
if (objIndex !== -1) {
layer.fabricObjects[objIndex] = newImg;
}
}
}
}
}
/**
@@ -271,8 +327,8 @@ export class LiquifyDeformCommand extends LiquifyCommand {
// 应用变形结果
await this._updateObjectWithImageData(this.afterData);
// 注意：_updateObjectWithImageData 内部已使用 optimizeCanvasRendering，会自动渲染
this.canvas.renderAll();
return this.afterData;
}
@@ -283,70 +339,70 @@ export class LiquifyDeformCommand extends LiquifyCommand {
// 恢复到变形前的状态
await this._updateObjectWithImageData(this.beforeData);
// 注意：_updateObjectWithImageData 内部已使用 optimizeCanvasRendering，会自动渲染
this.canvas.renderAll();
return true;
}
/**
* 使用图像数据更新对象
* 优化：直接使用 setElement 更新现有对象，避免创建新对象和替换操作
* @param {ImageData} imageData 图像数据
* @private
*/
async _updateObjectWithImageData(imageData) {
return new Promise((resolve) => {
// 创建临时canvas
const tempCanvas = document.createElement("canvas");
tempCanvas.width = imageData.width;
tempCanvas.height = imageData.height;
const tempCtx = tempCanvas.getContext("2d");
tempCtx.putImageData(imageData, 0, 0);
// 创建临时canvas
const tempCanvas = document.createElement("canvas");
tempCanvas.width = imageData.width;
tempCanvas.height = imageData.height;
const tempCtx = tempCanvas.getContext("2d");
tempCtx.putImageData(imageData, 0, 0);
// 从canvas创建新的fabric图像
fabric.Image.fromURL(tempCanvas.toDataURL(), (img) => {
// 保留原对象的变换属性
img.set({
left: this.targetObject.left,
top: this.targetObject.top,
scaleX: this.targetObject.scaleX,
scaleY: this.targetObject.scaleY,
angle: this.targetObject.angle,
flipX: this.targetObject.flipX,
flipY: this.targetObject.flipY,
opacity: this.targetObject.opacity,
});
// 替换canvas上的对象
const index = this.canvas.getObjects().indexOf(this.targetObject);
if (index !== -1) {
this.canvas.remove(this.targetObject);
this.canvas.insertAt(img, index);
this.targetObject = img;
// 更新图层引用
const layer = this.layerManager.getLayerById(this.targetLayerId);
if (layer) {
if (
layer.type === "background" &&
(layer.fabricObject === this.savedState?.originalObject ||
layer.fabricObject === this.targetObject)
) {
layer.fabricObject = img;
} else if (layer.fabricObjects) {
const objIndex = layer.fabricObjects.findIndex(
(obj) => obj === this.savedState?.originalObject || obj === this.targetObject
);
if (objIndex !== -1) {
layer.fabricObjects[objIndex] = img;
}
}
}
}
resolve();
});
// 使用优化渲染工具，避免图层闪烁
await optimizeCanvasRendering(this.canvas, async () => {
// 直接更新对象元素，避免对象替换
await this._updateObjectElementDirectly(tempCanvas.toDataURL());
});
}
/**
* 安全地替换变形对象，避免图层闪烁（保留作为备用方法）
* @param {Object} newImg 新的fabric图像对象
* @private
*/
_replaceDeformObjectSafely(newImg) {
// 保存旧对象引用，用于更新图层引用
const oldObject = this.targetObject;
// 替换Canvas上的对象
const index = this.canvas.getObjects().indexOf(oldObject);
if (index !== -1) {
// 在禁用自动渲染的情况下，先插入新对象，再移除旧对象
// 这样可以避免中间出现空白
this.canvas.insertAt(newImg, index);
this.canvas.remove(oldObject);
this.targetObject = newImg;
}
// 更新图层引用
const layer = this.layerManager.getLayerById(this.targetLayerId);
if (layer) {
if (
layer.type === "background" &&
(layer.fabricObject === this.savedState?.originalObject ||
layer.fabricObject === oldObject)
) {
layer.fabricObject = newImg;
} else if (layer.fabricObjects) {
const objIndex = layer.fabricObjects.findIndex(
(obj) => obj === this.savedState?.originalObject || obj === oldObject
);
if (objIndex !== -1) {
layer.fabricObjects[objIndex] = newImg;
}
}
}
}
}
/**

2
src/component/Canvas/CanvasEditor/commands/ObjectLayerCommands.js
View File

@@ -255,6 +255,8 @@ export class AddObjectToLayerCommand extends Command {
);
// 标记为非首次执行
this.isFirstExecution = false;
// 重新排序图层对象
await this.layerManager?.layerSort?.rearrangeObjects();
console.log(
`✅ 对象已添加到图层 "${layer.name}"，位置: (${this.fabricObject.left}, ${this.fabricObject.top})`
);

3
src/component/Canvas/CanvasEditor/commands/RasterizeLayerCommand.js
View File

@@ -359,7 +359,8 @@ export class RasterizeLayerCommand extends Command {
// 设置为活动图层
this.activeLayerId.value = this.rasterizedLayerId;
// 重新排序图层对象
await this.layerManager?.layerSort?.rearrangeObjects();
await this.layerManager?.updateLayersObjectsInteractivity(false);
console.log(`🎨 组合图层 ${this.rasterizedLayer.name} 创建完成`);

3
src/component/Canvas/CanvasEditor/commands/TextCommands.js
View File

@@ -409,6 +409,9 @@ export class CreateTextCommand extends Command {
// 现在可以安全地设置为活动图层
this.layerManager.setActiveLayer(this.layerId);
// 重新排序图层对象
await this.layerManager?.layerSort?.rearrangeObjects();
// 更新对象交互性
await this.layerManager?.updateLayersObjectsInteractivity?.(false);

4
src/component/Canvas/CanvasEditor/components/LayersPanel/LayersPanel.vue
View File

@@ -589,11 +589,11 @@ function handleLayerClick(layer, event) {
layerManager?.setAllActiveGroupLayerCanvasObject?.(layer);
setActiveLayer(layer.children[0].id, { parentId: layer.id });
} else {
// 选中画布中的图层对象
layerManager?.selectLayerObjects(layer.id);
// 否则直接设置当前图层为活动图层
setActiveLayer(layer.id);
layerManager?.updateLayersObjectsInteractivity();
// 选中画布中的图层对象
layerManager?.selectLayerObjects(layer.id);
}
}
lastSelectedIndex.value = sortableRootLayers.value.findIndex((l) => l.id === layer.id);

609
src/component/Canvas/CanvasEditor/components/SelectMenuPanel.vue Normal file
View File

@@ -0,0 +1,609 @@
<template>
<transition name="fade">
<div
class="select-menu-panel"
v-if="visible"
:class="{ active: !closePanel }"
>
<div class="btn" @click="setClosePanel">
<i class="fi fi-br-angle-left"></i>
</div>
<!-- 变换工具顶部 -->
<div class="panel-select">
<!-- <div class="panel-header">
<div class="header-title">变换工具</div>
</div> -->
<!-- 分割线 -->
<!-- <div class="panel-divider"></div> -->
<!-- 变换工具内容 -->
<div class="tool-content">
<div
class="object-item"
v-for="v in activeObjects"
:key="v.id"
>
<div class="title">图层1</div>
<div class="list">
<div>
<span class="label">W</span>
<input
type="number"
:value="v.width"
disabled
/>
</div>
<div>
<span class="label">H</span>
<input
type="number"
:value="v.height"
disabled
/>
</div>
<!-- <div>
<span class="label">X</span>
<input type="number" :value="v.left" disabled />
</div>
<div>
<span class="label">Y</span>
<input type="number" :value="v.top" disabled />
</div> -->
<div>
<span class="label iconfont icon-angle"></span>
<input
type="number"
:value="v.angle"
disabled
/>
</div>
<div class="btn" @click="clickflipHorizontal">
<i class="iconfont icon-flip-horizontal"></i>
<p class="tip">水平翻转</p>
</div>
<div class="btn" @click="clickflipVertical">
<i class="iconfont icon-flip-vertical"></i>
<p class="tip">垂直翻转</p>
</div>
</div>
</div>
</div>
</div>
</div>
</transition>
</template>
<script setup>
import { ref, onMounted, watch, onUnmounted } from "vue";
import { useI18n } from "vue-i18n";
import { ToolCommand } from "../commands/ToolCommands";
import { OperationType } from "../utils/layerHelper";
const props = defineProps({
canvas: {
type: Object,
required: true,
},
commandManager: {
type: Object,
required: true,
},
selectManager: {
type: Object,
required: true,
},
layerManager: {
type: Object,
required: true,
},
toolManager: {
type: Object,
required: true,
},
activeTool: {
type: String,
required: false,
default: null,
},
});
// 响应式数据
const visible = ref(false);
//打开隐藏操作面板
const closePanel = ref(false);
const setClosePanel = () => {
closePanel.value = !closePanel.value;
};
// 国际化
const { t } = useI18n();
onMounted(() => {
setupCanvasListeners();
});
onUnmounted(() => {
removeCanvasListeners();
});
// 监听 activeTool 变化
watch(
() => props.activeTool,
(newTool) => {
if (newTool === OperationType.SELECT) {
show();
} else {
close();
}
},
{ immediate: true }
);
/**
* 显示面板
*/
function show() {
if(activeObjects.value.length === 0) return;
visible.value = true;
closePanel.value = true;
}
/**
* 关闭面板
*/
function close() {
visible.value = false;
}
// 获取当前选中的对象
const activeObjects = ref([]);
const getActiveObject = (e) => {
console.log("==========切换激活对象", e);
activeObjects.value = e.selected.map((v) => v.toObject());
if (activeObjects.value.length === 0) {
close();
} else {
show(false);
}
};
const clickflipHorizontal = () => {
console.log("水平翻转");
};
const clickflipVertical = () => {
console.log("垂直翻转");
};
/**
* 设置画布事件监听
*/
function setupCanvasListeners() {
if (!props.canvas) return;
// 鼠标事件
props.canvas.on("selection:created", getActiveObject);
props.canvas.on("selection:updated", getActiveObject);
// props.canvas.on("selection:cleared", () => console.log("selection:cleared"));
props.canvas.on("selection:cleared", close);
}
/**
* 移除画布事件监听
*/
function removeCanvasListeners() {
if (!props.canvas) return;
// 移除鼠标事件
props.canvas.off("selection:created", getActiveObject);
props.canvas.off("selection:updated", getActiveObject);
// props.canvas.off("selection:cleared");
}
</script>
<style scoped lang="less">
.select-menu-panel {
position: absolute;
bottom: 22px;
left: 20px;
right: 20px;
max-width: min(90vw, 640px);
margin: 0 auto;
background-color: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);
border-radius: 8px;
box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
z-index: 1000;
color: #333;
border: 1px solid rgba(0, 0, 0, 0.05);
user-select: none;
&.active {
transform: translateY(100%);
> .btn {
> i {
transform: rotate(90deg);
}
}
}
> .btn {
width: 100%;
height: 22px;
text-align: center;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
> i {
font-size: 1.4rem;
transform: rotate(270deg);
}
}
}
/* 平板和手机适配 */
@media screen and (max-width: 768px) {
.select-menu-panel {
bottom: 15px;
left: 15px;
right: 15px;
max-width: calc(100vw - 30px);
border-radius: 6px;
}
}
@media screen and (max-width: 480px) {
.select-menu-panel {
bottom: 10px;
left: 10px;
right: 10px;
max-width: calc(100vw - 20px);
}
}
.select-menu-panel.is-active {
transform: translateY(0);
}
.panel-header {
padding: 8px 15px;
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
background-color: rgba(255, 255, 255, 0.8);
border-radius: 8px 8px 0 0;
}
.header-title {
font-size: 13px;
font-weight: 500;
color: #333;
text-align: left;
}
.panel-select {
// padding: 0 0 10px;
}
/* 平板适配 */
@media screen and (max-width: 768px) {
.panel-header {
padding: 6px 12px;
border-radius: 6px 6px 0 0;
}
}
/* 手机适配 */
@media screen and (max-width: 480px) {
.panel-header {
padding: 5px 10px;
}
.header-title {
font-size: 12px;
}
}
.tool-btn {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: rgba(0, 0, 0, 0.05);
border: none;
border-radius: 6px;
padding: 6px;
color: #333;
cursor: pointer;
transition: all 0.2s;
}
.tool-btn span {
margin-top: 0;
font-size: 12px;
}
.tool-btn svg {
width: 24px;
height: 24px;
}
.tool-btn:hover {
background-color: rgba(0, 0, 0, 0.08);
}
.tool-btn.active {
background-color: #007aff;
color: white;
}
.panel-divider {
height: 1px;
background-color: rgba(0, 0, 0, 0.05);
margin: 0 10px 5px 10px;
}
.tool-content {
overflow-y: auto;
max-height: 220px;
margin-top: 10px;
padding: 0 10px;
> .object-item {
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
padding: 10px 0;
&:last-child {
border-bottom: none;
}
> .title {
text-align: left;
margin-bottom: 5px;
}
> .list {
display: flex;
> div {
margin-right: 15px;
font-size: 14px;
color: #474747;
> .label {
margin-right: 5px;
}
> input {
width: 65px;
}
.iconfont {
font-size: 14px;
}
}
> div.btn {
position: relative;
min-width: 24px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
border-radius: 2px;
transition: background-color 0.2s;
background-color: rgba(0, 0, 0, 0);
> .tip {
position: absolute;
top: -5px;
left: 50%;
transform: translate(-50%, -100%);
background-color: rgba(0, 0, 0, 0.7);
color: white;
padding: 0.4rem 0.8rem;
border-radius: 0.4rem;
margin-left: 0.8rem;
font-size: 1.2rem;
white-space: nowrap;
pointer-events: none;
display: none;
&::after {
content: "";
position: absolute;
top: 97%;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid rgba(0, 0, 0, 0.8);
}
}
&:hover {
background-color: rgba(0, 0, 0, 0.08);
> .tip {
display: block;
}
}
}
}
}
}
/* 平板适配 - 每行4个按钮 */
@media screen and (max-width: 768px) {
.tool-content {
grid-template-columns: repeat(3, 1fr);
gap: 8px 6px;
padding: 0 8px;
}
}
/* 手机适配 - 每行3个按钮 */
@media screen and (max-width: 480px) {
.tool-content {
grid-template-columns: repeat(3, 1fr);
gap: 6px 4px;
padding: 0 6px;
}
.header-btn {
font-size: 11px;
padding: 2px 4px;
min-width: 28px;
}
}
.action-btn {
display: flex;
// flex-direction: column;
flex-direction: row;
align-items: center;
justify-content: center;
background: none;
border: none;
color: #333;
cursor: pointer;
padding: 0;
gap: 4px;
.c-svg {
width: auto;
}
}
.action-btn svg {
width: 22px;
height: 22px;
margin-bottom: 8px;
}
.btn-text {
display: block;
font-size: 12px;
text-align: center;
}
.action-btn:hover {
color: #007aff;
}
.action-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
/* 对话框样式 */
.dialog-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
display: flex;
align-items: center;
justify-content: center;
z-index: 2000;
}
.dialog-container {
background-color: #ffffff;
border-radius: 12px;
width: 280px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
overflow: hidden;
border: 1px solid rgba(0, 0, 0, 0.05);
}
.dialog-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 15px;
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
.dialog-header h3 {
margin: 0;
font-size: 15px;
color: #333;
font-weight: 500;
}
.close-dialog-btn {
background: none;
border: none;
color: #666;
font-size: 18px;
cursor: pointer;
padding: 0;
line-height: 1;
}
.dialog-content {
padding: 15px;
}
.feather-control {
display: flex;
align-items: center;
margin-bottom: 20px;
}
.slider-control {
flex: 1;
height: 4px;
background: rgba(0, 0, 0, 0.1);
border-radius: 2px;
-webkit-appearance: none;
appearance: none;
margin-right: 10px;
}
.slider-control::-webkit-slider-thumb {
-webkit-appearance: none;
width: 12px;
height: 12px;
border-radius: 50%;
background: #007aff;
cursor: pointer;
}
.feather-value {
font-size: 14px;
color: #333;
min-width: 40px;
text-align: right;
}
.dialog-buttons {
display: flex;
justify-content: flex-end;
gap: 10px;
margin-top: 15px;
}
.cancel-btn,
.confirm-btn {
padding: 8px 16px;
border-radius: 6px;
font-size: 14px;
cursor: pointer;
border: none;
}
.cancel-btn {
background-color: rgba(0, 0, 0, 0.05);
color: #333;
}
.confirm-btn {
background-color: #007aff;
color: white;
}
.color-picker {
width: 100%;
height: 40px;
border: none;
border-radius: 6px;
cursor: pointer;
}
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.3s, transform 0.3s;
}
.fade-enter-from,
.fade-leave-to {
opacity: 0;
transform: translateY(30px);
}
</style>

9
src/component/Canvas/CanvasEditor/components/ToolsSidebar.vue
View File

@@ -327,11 +327,14 @@ function handleKeyDown(event) {
}
}
const fillInputTimeout = ref(null);
// 填充颜色选择器
function fillColorChange() {
layerManager.fillLayerBackground(lastSelectLayerId.value, fillColor.value, true);
clearTimeout(fillInputTimeout.value);
fillInputTimeout.value = setTimeout(() => {
layerManager.fillLayerBackground(lastSelectLayerId.value, fillColor.value, true);
}, 100);
}
onMounted(() => {
// 添加键盘事件监听
window.addEventListener("keydown", handleKeyDown);
@@ -355,7 +358,7 @@ const handleToolClick = (tool) => {
v-model="fillColor"
ref="fillColorRef"
type="color"
@change="fillColorChange"
@input="fillColorChange"
style="width: 0; height: 0; opacity: 0"
/>
<div class="tools-list">

23
src/component/Canvas/CanvasEditor/fabric-canvas-events.text Normal file
View File

@@ -0,0 +1,23 @@
1. 初始化事件
object:added：当新对象被添加到画布上时触发。
object:removed：当对象从画布上移除时触发。
selection:created：当选择对象时触发。
selection:updated：当选择的对象被更新时触发。
selection:cleared：当所有对象都被取消选择时触发。
2. 鼠标事件
mouse:down：鼠标按下时触发。
mouse:move：鼠标移动时触发。
mouse:up：鼠标释放时触发。
mouse:over：鼠标移到画布上时触发。
mouse:out：鼠标移出画布时触发。
mouse:wheel：鼠标滚轮滚动时触发。
3. 触摸事件（在触摸屏设备上）
touch:start：触摸开始时触发。
touch:move：触摸移动时触发。
touch:end：触摸结束时触发。
4. 键盘事件
key:down：键盘按键按下时触发。
key:up：键盘按键释放时触发。

28
src/component/Canvas/CanvasEditor/index.vue
View File

@@ -34,6 +34,7 @@ import LayersPanel from "./components/LayersPanel/LayersPanel.vue";
import BrushControlPanel from "./components/BrushControlPanel.vue";
import TextEditorPanel from "./components/TextEditorPanel.vue"; // 引入文本编辑面板
import LiquifyPanel from "./components/LiquifyPanel.vue"; // 引入液化编辑面板
import SelectMenuPanel from "./components/SelectMenuPanel.vue"; // 引入选择工具菜单组件
import SelectionPanel from "./components/SelectionPanel.vue"; // 引入选区面板
import { LayerType, OperationType } from "./utils/layerHelper.js";
import { ToolManager } from "./managers/ToolManager.js";
@@ -619,12 +620,22 @@ function updateCanvasSize() {
function updateCanvasColor() {
canvasManager.setCanvasColor(canvasColor.value);
}
function createLayerName(){
const layer = t("Canvas.layer")
// 检查图层名称是否已存在
let layerIndex = 1;
let layerName = `${layer + " " + layerIndex}`;
while (layerManager.getLayerByName(layerName)) {
layerIndex++;
layerName = `${layer} ${layerIndex}`;
}
return layerName;
}
async function addLayer() {
await layerManager.createLayer(t("Canvas.EmptyLayer"));
await layerManager.createLayer(createLayerName());
}
async function addTopLayer() {
await layerManager.createLayer(t("Canvas.EmptyLayer"), LayerType.EMPTY, {
await layerManager.createLayer(createLayerName(), LayerType.EMPTY, {
insertTop: true,
});
}
@@ -1173,6 +1184,17 @@ defineExpose({
:activeTool="activeTool"
/>
<!-- 选择工具菜单组件 -->
<!-- <SelectMenuPanel
v-if="canvasManagerLoaded && !enabledRedGreenMode"
:canvas="canvasManager && canvasManager.canvas"
:commandManager="commandManager"
:selectionManager="selectionManager"
:layerManager="layerManager"
:toolManager="toolManager"
:activeTool="activeTool"
/> -->
<div class="zoom-info">
{{ t("Canvas.Scale") }}: {{ currentZoom }}%
<button class="reset-zoom" @click="resetZoom">

4
src/component/Canvas/CanvasEditor/managers/CanvasManager.js
View File

@@ -822,8 +822,8 @@ export class CanvasManager {
try {
// 如果当前有选中对象，先清除选中状态 否则导出有问题
this.canvas.discardActiveObject(); // 清除选中状态
this.canvas.renderAll(); // 重新渲染画布
// this.canvas.discardActiveObject(); // 清除选中状态
// this.canvas.renderAll(); // 重新渲染画布
// 自动设置红绿图模式相关参数
const enhancedOptions = {
...options,

19
src/component/Canvas/CanvasEditor/managers/LayerManager.js
View File

@@ -910,6 +910,17 @@ export class LayerManager {
return layer;
}
/**
* 根据name获取图层
* @param {string} layerName 图层名称
* @returns {Object|null} 图层对象或null
*/
getLayerByName(layerName) {
const layer = this.layers.value.find((layer) => layer.name === layerName);
return layer || null;
}
/**
* 获取当前图层对象的列表
* @param {string} layerId 可选，指定图层ID，默认使用当前活动图层
@@ -946,6 +957,14 @@ export class LayerManager {
return false;
}
// 检查是否是唯一的普通图层
const normalLayers = this.layers.value.filter((l) => !l.isBackground && !l.isFixed);
console.log("普通图层:", normalLayers)
if (normalLayers.length === 1) {
console.warn("不能删除唯一的普通图层");
message.warning("不能删除唯一的普通图层");
return false;
}
// // 如果图层有子图层，提示确认
// if (layer && layer.children && layer.children.length > 0) {
// console.warn("该图层包含子图层，删除将同时删除所有子图层");

7
src/component/Canvas/CanvasEditor/managers/events/CanvasEventManager.js
View File

@@ -181,10 +181,15 @@ export class CanvasEventManager {
setupMouseEvents() {
// 鼠标按下事件
this.canvas.on("mouse:down", (opt) => {
// console.log("==========鼠标按下",opt)
// 平滑停止任何正在进行的惯性动画
this.stopInertiaAnimation(true);
if (
// if (opt.e.which === 3 && this.editorMode === OperationType.SELECT) {
// console.log("==========选择模式鼠标右击画布对象")
// } else
if (
opt.e.altKey ||
opt.e.which === 2 ||
this.editorMode === OperationType.PAN