选择工具开发一半, 修改新建图层顺序名称
This commit is contained in:
李志鹏
609
src/component/Canvas/CanvasEditor/components/SelectMenuPanel.vue
Normal file
609
src/component/Canvas/CanvasEditor/components/SelectMenuPanel.vue
Normal 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>
|
||||
23
src/component/Canvas/CanvasEditor/fabric-canvas-events.text
Normal file
23
src/component/Canvas/CanvasEditor/fabric-canvas-events.text
Normal 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：键盘按键释放时触发。
|
||||
@@ -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">
|
||||
|
||||
@@ -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，默认使用当前活动图层
|
||||
|
||||
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user