合并画布代码

This commit is contained in:
X1627315083
2025-06-18 11:05:23 +08:00
parent 903c0ebdf5
commit 9c7fae36eb
118 changed files with 23633 additions and 8201 deletions

View File

@@ -1,7 +1,6 @@
<script setup>
import { ref, inject, computed, onMounted, onUnmounted } from "vue";
import { OperationType } from "../utils/layerHelper";
import SvgIcon from "@/component/Canvas/SvgIcon/index.vue";
const props = defineProps({
activeTool: String,
@@ -156,7 +155,7 @@ const redGreenToolsList = ref([
{
id: OperationType.RED_BRUSH,
title: "Red Brush (R)",
action: () => selectTool(OperationType.RED_BRUSH),
action: () => selectTool(OperationType.RED_BRUSH, true),
icon: { name: "CBrush", size: "24" },
class: "red-brush-btn",
style: { color: "#FF0000" },
@@ -164,7 +163,7 @@ const redGreenToolsList = ref([
{
id: OperationType.GREEN_BRUSH,
title: "Green Brush (G)",
action: () => selectTool(OperationType.GREEN_BRUSH),
action: () => selectTool(OperationType.GREEN_BRUSH, true),
icon: { name: "CBrush", size: "24" },
class: "green-brush-btn",
style: { color: "#00AA00" },
@@ -172,7 +171,7 @@ const redGreenToolsList = ref([
{
id: OperationType.ERASER,
title: "Eraser (E)",
action: () => selectTool(OperationType.ERASER),
action: () => selectTool(OperationType.ERASER, true),
icon: { name: "CEraser", size: "22" },
class: "eraser-btn",
},
@@ -197,8 +196,8 @@ const toolsList = computed(() => {
return props.isRedGreenMode ? redGreenToolsList.value : normalToolsList.value;
});
function selectTool(tool) {
emit("tool-selected", tool);
function selectTool(tool, isRedGreenMode = false) {
emit("tool-selected", tool, isRedGreenMode);
}
function triggerImageUpload() {
@@ -261,15 +260,15 @@ function handleKeyDown(event) {
switch (key) {
case "R":
selectTool(OperationType.RED_BRUSH);
selectTool(OperationType.RED_BRUSH, true);
event.preventDefault();
break;
case "G":
selectTool(OperationType.GREEN_BRUSH);
selectTool(OperationType.GREEN_BRUSH, true);
event.preventDefault();
break;
case "E":
selectTool(OperationType.ERASER);
selectTool(OperationType.ERASER, true);
event.preventDefault();
break;
}
@@ -323,6 +322,8 @@ onUnmounted(() => {
border-right: 1px solid #e0e0e0;
background-color: #ffffff;
user-select: none;
min-width: 58px;
height: 100%;
}
.tool-btn {