合并画布代码
This commit is contained in:
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user