-
-
-
-
-
-
-
-
-
-
- ![]()
-
@@ -106,8 +129,13 @@ import { defineComponent,computed,ref,onMounted,nextTick,watch,toRefs, reactive,
// import setDesignItem from '@/component/Detail/setDesignItem2.vue'
import { useStore } from "vuex";
import { getMousePosition } from "@/tool/mdEvent";
+import { sketchToMask } from "@/tool/util";
+import pingpu from '@/component/Canvas/OverallCanvas/index.vue'
+import RepeatSetting from "./overallSetting/RepeatSetting.vue";
+import { useI18n } from 'vue-i18n'
export default defineComponent({
components:{
+ pingpu,RepeatSetting
},
props: {
type: {
@@ -116,6 +144,7 @@ export default defineComponent({
}
},
setup(props,{emit}) {
+ const { t } = useI18n()
const store = useStore();
const editPrintElementDom = reactive({
imgDom:null as any,
@@ -126,6 +155,15 @@ export default defineComponent({
currentDetailType:computed(()=>store.state.DesignDetail.currentDetailType),
currentPrintElement:computed(()=>store.state.DesignDetail.currentPrintElement),
systemDesignerPercentage:0,
+ overallDetail:{
+ url: '',
+ offsetX: 0, // px
+ offsetY: 0, // px
+ angle: 0, // 角度
+ scale: 100, // %
+ gapX: 0, // px
+ gapY: 0, // px
+ },
printStyleList:{
print:{
single:[],
@@ -215,6 +253,7 @@ export default defineComponent({
path:data.url,
priority:editPrintElementData.printZIndex,
scale,
+ globalCompositeOperation:'',
}
getItemPosition(item)
setItemPosition()
@@ -227,6 +266,7 @@ export default defineComponent({
let scale,location
let style = item.pattern.style
let sketchWH = editPrintElementData.sketchWH.scale
+ let overallDetail = {}
if(item.ifSingle){
scale = [style.width.replace(/px/g,'')/(editPrintElementData.sketchWH.width),(style.height.replace(/px/g,'')/(editPrintElementData.sketchWH.height))]
location = [style.left.replace(/px/g,'')*sketchWH[0],style.top.replace(/px/g,'')*sketchWH[1]]
@@ -237,6 +277,14 @@ export default defineComponent({
scale =[ editPrintElementData.systemDesignerPercentage/100, editPrintElementData.systemDesignerPercentage/100]
// scale = [item.pattern.style.width/item.pattern.style.height,item.pattern.style.height/item.pattern.style.width]
// location = [item.pattern.style.left,item.pattern.style.top]
+ overallDetail = {
+ offsetX: editPrintElementData.overallDetail.offsetX, // px
+ offsetY: editPrintElementData.overallDetail.offsetY, // px
+ angle: editPrintElementData.overallDetail.angle, // 角度
+ scale: editPrintElementData.overallDetail.scale, // %
+ gapX: editPrintElementData.overallDetail.gapX, // px
+ gapY: editPrintElementData.overallDetail.gapY, // px
+ }
}
let value ={
angle : item.pattern.transform.rotateZ,
@@ -249,6 +297,9 @@ export default defineComponent({
path:item.path,
minIOPath:item.minIOPath,
ifSingle:!!item.ifSingle,
+ globalCompositeOperation:'',
+ object:null,
+ // ...overallDetail,
}
return value
}
@@ -316,6 +367,15 @@ export default defineComponent({
editPrintElementData.printStyleList[props.type].single.push(item)
}else{
editPrintElementData.printStyleList[props.type].overall = []
+ editPrintElementData.overallDetail = {
+ url: item.path,
+ offsetX: 0, // px
+ offsetY: 0, // px
+ angle: 0, // 角度
+ scale: 100, // %
+ gapX: 0, // px
+ gapY: 0, // px
+ }
editPrintElementData.printStyleList[props.type].overall.push(item)
}
@@ -337,9 +397,9 @@ export default defineComponent({
if(!editPrintElementData.selectDetail.printObject.prints)return
let state = true
// editPrintElementData.stateOverallSingle = 'single'
- let arr:any = editPrintElementData.selectDetail.printObject.prints
+ let arr:any = editPrintElementData.selectDetail.newDetail?.print || editPrintElementData.selectDetail.printObject.prints
if(props.type == 'element'){
- arr = editPrintElementData.selectDetail.trims.prints
+ arr = editPrintElementData.selectDetail.newDetail?.element || editPrintElementData.selectDetail.trims.prints
}
if(editPrintElementData.selectDetail.newDetail?.[editPrintElementData.currentDetailType]){
arr = editPrintElementData.selectDetail.newDetail[editPrintElementData.currentDetailType]
@@ -384,8 +444,28 @@ export default defineComponent({
single:[],
overall:[],
}
+ if(!editPrintElementData.selectDetail.sketchMask){
+ sketchToMask(newVal).then((res:any)=>{
+ editPrintElementData.selectDetail.sketchMask = res
+ })
+ }
setPosition()
},{immediate: true,})
+ watch(()=>editPrintElementData.stateOverallSingle,(newVal)=>{
+ if(newVal == 'overall'){
+ let overallPrint = editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle]?.[0]
+ if(!overallPrint?.path)return
+ editPrintElementData.overallDetail = {
+ url: overallPrint.path,
+ offsetX: overallPrint.offsetX || 0, // px
+ offsetY: overallPrint.offsetY || 0, // px
+ angle: overallPrint.angle || 0, // 角度
+ scale: overallPrint.scale || 100, // %
+ gapX: overallPrint.gapX || 0, // px
+ gapY: overallPrint.gapY || 0, // px
+ }
+ }
+ })
//设置移动
const itemMoveMousedown = (index:number,event:any)=>{
if (event.target.tagName === 'IMG' || event.target.nodeName === 'IMG')return
@@ -738,6 +818,20 @@ export default defineComponent({
collItemSize.prentWidth = (collItemSize.padding + remValue) * elArr.length + 'px'
moveItem()
}
+ const inputFillAngle = (angle:any)=>{
+ editPrintElementData.overallDetail.angle = angle
+ }
+ const inputFillOffset = (offset:any)=>{
+ editPrintElementData.overallDetail.offsetX = offset.left
+ editPrintElementData.overallDetail.offsetY = offset.top
+ }
+ const inputFillScale = (scale:any)=>{
+ editPrintElementData.overallDetail.scale = scale
+ }
+ const inputFill_Gap = (x:any,y:any)=>{
+ editPrintElementData.overallDetail.gapX = x
+ editPrintElementData.overallDetail.gapY = y
+ }
onMounted(()=>{
if(props.type == 'element'){
editPrintElementData.stateOverallSingle = 'single'
@@ -747,6 +841,7 @@ export default defineComponent({
previewDetailPrintData()
})
return{
+ t,
getMousePosition,
...toRefs(editPrintElementDom),
...toRefs(editPrintElementData),
@@ -760,6 +855,10 @@ export default defineComponent({
clearOverall,
designMousedown,
navDelete,
+ inputFillAngle,
+ inputFillOffset,
+ inputFillScale,
+ inputFill_Gap,
}
},
directives:{
@@ -983,7 +1082,13 @@ export default defineComponent({
// height: 100%;
max-width: 100%;
// width: 100%;
-
+ &.designOpenrtion_sketchMask{
+ position: absolute;
+ z-index: 3;
+ top: 0;
+ left: 0;
+ pointer-events: none;
+ }
}
.designOpenrtion_sketch_mask{
z-index: 2;
@@ -1013,8 +1118,13 @@ export default defineComponent({
}
}
}
+ .designOpenrtion_pingpu{
+ width: 100%;
+ height: 100%;
+ z-index: 2;
+ }
.designOpenrtion_btn{
- z-index: 3;
+ z-index: 99;
>div{
width: 100%;
height: 100%;
diff --git a/src/component/Detail/detailRight/overallSetting/RepeatSetting.vue b/src/component/Detail/detailRight/overallSetting/RepeatSetting.vue
new file mode 100644
index 00000000..b2f4f3c3
--- /dev/null
+++ b/src/component/Detail/detailRight/overallSetting/RepeatSetting.vue
@@ -0,0 +1,124 @@
+
+
+
-->
-
-
+
+
-
-
+
+
+ -
@@ -82,12 +102,15 @@
+
+
+
+
+
+
+
diff --git a/src/component/Detail/detailRight/overallSetting/tools/AngleTool.vue b/src/component/Detail/detailRight/overallSetting/tools/AngleTool.vue
new file mode 100644
index 00000000..c024a38e
--- /dev/null
+++ b/src/component/Detail/detailRight/overallSetting/tools/AngleTool.vue
@@ -0,0 +1,122 @@
+
+
+ {{ t("Canvas.angle") }}
+
+
+
+ {{ t("Canvas.scale") }}
+
+
+
+ Gap X
+
+
+
+ Gap Y
+
+
+
+ {{ t("Canvas.offset") }}
+
+
+
+
+
+
+
+
diff --git a/src/component/Detail/detailRight/overallSetting/tools/MySelect.vue b/src/component/Detail/detailRight/overallSetting/tools/MySelect.vue
new file mode 100644
index 00000000..146a7d8d
--- /dev/null
+++ b/src/component/Detail/detailRight/overallSetting/tools/MySelect.vue
@@ -0,0 +1,66 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/component/Detail/detailRight/overallSetting/tools/Slider.vue b/src/component/Detail/detailRight/overallSetting/tools/Slider.vue
new file mode 100644
index 00000000..d3de2145
--- /dev/null
+++ b/src/component/Detail/detailRight/overallSetting/tools/Slider.vue
@@ -0,0 +1,160 @@
+
+
+
+
+
+
+
diff --git a/src/component/Detail/model/index.vue b/src/component/Detail/model/index.vue
index 79cf2097..585d1ec5 100644
--- a/src/component/Detail/model/index.vue
+++ b/src/component/Detail/model/index.vue
@@ -4,9 +4,9 @@
+
+
+
+
+ x:{{ tofix(data.left) }}% y:{{ tofix(data.top) }}%
+
+
@@ -141,7 +141,11 @@ export default defineComponent({
type: {
type: String,
default: 'print',
- }
+ },
+ sketchSize:{
+ type:Object,
+ default:()=>{}
+ },
},
setup(props,{emit}) {
const { t } = useI18n()
@@ -352,18 +356,9 @@ export default defineComponent({
}
editPrintElementData.printZIndex++
item.pattern = pattern
- function isJSONString(str) {
- try {
- JSON.parse(str);
- return true; // 解析成功，是有效的JSON字符串
- } catch (e) {
- return false; // 解析失败，不是有效的JSON字符串
- }
- }
+
if(item.object){
- if(isJSONString(item.object)){
- item.object = JSON.parse(item.object)
- }
+
}else{
item.object = {
top: 0,
diff --git a/src/component/Detail/detailRight/index.vue b/src/component/Detail/detailRight/index.vue
index 8ce41684..d835f5d8 100644
--- a/src/component/Detail/detailRight/index.vue
+++ b/src/component/Detail/detailRight/index.vue
@@ -6,8 +6,8 @@
@@ -14,7 +14,7 @@
-
+
@@ -51,7 +51,7 @@ export default defineComponent({
components:{
position,modelNav
},
- emits:['detailEdit','canvasReload','addSketch','revocation','oppositeRevocation','modelOnLoad','sketchSysToLibrary','addDetail'],
+ emits:['detailEdit','canvasReload','addSketch','revocation','oppositeRevocation','modelOnLoad','sketchSysToLibrary'],
setup(props,{emit}) {
const {t} = useI18n()
const store = useStore();
@@ -68,36 +68,40 @@ export default defineComponent({
const getDetailListDom = reactive({
libraryList:null as any,
position:null as any,
+ modelindexRight:null as any,
+ modelNav:null as any,
})
const getSubmitData = (value:any,boolean)=>{
return getDetailListDom.position.getSubmitData(value,boolean)
}
const showDesignImgDetail = (str:any)=>{
- new Promise((resolve, reject) => {
- if(
- getDetailListData.isEditPattern.value&&
- detailData?.getCanvasIfEdit?.fun&&detailData?.getCanvasIfEdit?.fun() > 0
- ){
- Modal.confirm({
- title: t('collectionModal.jsContent2'),
- icon: createVNode(ExclamationCircleOutlined),
- okText: 'Yes',
- cancelText: 'No',
- mask:false,
- centered:true,
- onOk() {
- resolve(true)
- emit('detailEdit',str)
- },
- onCancel(){
- resolve(false)
- }
- });
- }else{
- resolve(true)
- emit('detailEdit',str)
- }
- })
+ emit('detailEdit',str)
+
+ // new Promise((resolve, reject) => {
+ // if(
+ // getDetailListData.isEditPattern.value&&
+ // detailData?.getCanvasIfEdit?.fun&&detailData?.getCanvasIfEdit?.fun() > 0
+ // ){
+ // Modal.confirm({
+ // title: t('collectionModal.jsContent2'),
+ // icon: createVNode(ExclamationCircleOutlined),
+ // okText: 'Yes',
+ // cancelText: 'No',
+ // mask:false,
+ // centered:true,
+ // onOk() {
+ // resolve(true)
+ // emit('detailEdit',str)
+ // },
+ // onCancel(){
+ // resolve(false)
+ // }
+ // });
+ // }else{
+ // resolve(true)
+ // emit('detailEdit',str)
+ // }
+ // })
}
const deleteItem = ()=>{
setRevocation()
@@ -117,22 +121,29 @@ export default defineComponent({
}
let time = null as any
- const handleResize = ()=>{
+ const handleResize = ()=>{
clearTimeout(time)
time = setTimeout(()=>{
store.commit('DesignDetail/setDesignDetail',getDetailListData.designDetail)
- getDetailListDom.position.updataPosition()
-
- },1000)
+ getDetailListDom.position?.updataPosition?.()
+ getDetailListDom.modelNav?.setItemPosition?.()
+ getDetailListDom.position?.updateRect?.()
+ },500)
}
const setBack = ()=>{
- emit('detailEdit')
+ showDesignImgDetail(getDetailListData.isEditPattern.value)
}
+ let observers = null as any
onMounted(()=>{
- window.addEventListener('resize', handleResize);
+ observers = new ResizeObserver(entries => {
+ for (let entry of entries) {
+ handleResize()
+ }
+ });
+ observers.observe(getDetailListDom.modelindexRight);
})
onBeforeUnmount(()=>{
- window.removeEventListener('resize', handleResize);
+ observers.disconnect();
})
return{
...toRefs(detailData),
diff --git a/src/component/Detail/model/modelNav.vue b/src/component/Detail/model/modelNav.vue
index 0b94e180..67398f72 100644
--- a/src/component/Detail/model/modelNav.vue
+++ b/src/component/Detail/model/modelNav.vue
@@ -268,17 +268,8 @@ export default defineComponent({
let allPostition = store.state.Workspace.workspaceAllPosition
return allPostition.find(item => item.value === type)?.name
}
- let observers = null as any
- onMounted(()=>{
- observers = new ResizeObserver(entries => {
- for (let entry of entries) {
- setItemPosition()
- }
- });
- observers.observe(detailData.modelNavBox);
- })
+
onBeforeUnmount(()=>{
- observers.disconnect();
})
return{
...toRefs(detailData),
diff --git a/src/component/Detail/model/modelPosition.vue b/src/component/Detail/model/modelPosition.vue
index 4153bae7..05b9a1d9 100644
--- a/src/component/Detail/model/modelPosition.vue
+++ b/src/component/Detail/model/modelPosition.vue
@@ -1,21 +1,17 @@
-->
} 处理后的base64字符串
+*/
+export const resizeImage = async (base64, width, height) => {
+ return new Promise((resolve, reject) => {
+ const img = new Image();
+ img.src = base64;
+ img.onload = () => {
+ const canvas = document.createElement("canvas");
+ canvas.width = width;
+ canvas.height = height;
+ const ctx = canvas.getContext("2d");
+ ctx.drawImage(img, 0, 0, width, height);
+ resolve(canvas.toDataURL());
+ };
+ img.onerror = reject;
+ });
+};
From a720fba84e47a0d81b2f1c734b387a11718d99d4 Mon Sep 17 00:00:00 2001
From: X1627315083 <1627315083@qq.com>
Date: Fri, 16 Jan 2026 13:39:00 +0800
Subject: [PATCH 16/17] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E5=8D=B0=E8=8A=B1?=
=?UTF-8?q?=E7=BA=BF=E7=A8=BF=E5=90=88=E6=88=90=E5=9B=BE=E6=98=BE=E7=A4=BA?=
=?UTF-8?q?=E5=BC=82=E5=B8=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/component/Detail/DesignDetail.vue | 24 +++++-
src/component/Detail/canvas/index.vue | 84 +++++++++++--------
.../Detail/detailRight/editPrintElement.vue | 21 ++---
src/component/Detail/detailRight/index.vue | 10 ++-
src/store/Detail/designDetail.ts | 19 +++++
5 files changed, 106 insertions(+), 52 deletions(-)
diff --git a/src/component/Detail/DesignDetail.vue b/src/component/Detail/DesignDetail.vue
index 7e229bdb..42ffc847 100644
--- a/src/component/Detail/DesignDetail.vue
+++ b/src/component/Detail/DesignDetail.vue
@@ -85,7 +85,7 @@
" alt="">
-
+
![]()
![]()
-
![]()
@@ -40,8 +36,10 @@ import { Https } from "@/tool/https";
import { useStore } from "vuex";
import { useI18n } from 'vue-i18n'
import { getMousePosition } from "@/tool/mdEvent";
-import { Modal,message } from 'ant-design-vue';
-import newFollowVue from '@/component/Account/message/newFollow.vue';
+import Vue3Moveable from 'vue3-moveable';
+import Moveable from 'moveable';
+import { parse } from 'vue/compiler-sfc';
+import { scale } from 'echarts/types/src/scale/helper.js';
export default defineComponent({
components:{
},
@@ -75,10 +73,7 @@ export default defineComponent({
imgDom:null as any,
direction:'',
})
- watch(()=>selectItem.selectDetail,(newValue,oldValue)=>{
- if(!newValue && newValue?.id == oldValue?.id)return
- selectItem.imgDomIndex = detailData.frontBack.front.findIndex((item:any)=>item.id == newValue.id)
- },{immediate: true,})
+
watch(()=>detailData.frontBack?.body?.path,(newVal)=>{
setPrintSize()
})
@@ -99,7 +94,6 @@ export default defineComponent({
if(entries[0].contentRect.width == 0)return
detailData.observerWH.width = Math.floor(entries[0].contentRect.width)
detailData.observerWH.height = Math.floor(entries[0].contentRect.height)
- console.log(detailData.observerWH)
})
detailData.observer.observe(dom)
@@ -131,6 +125,7 @@ export default defineComponent({
}
for (const key in detailData.frontBack.back[index].style) {
if(key == 'zIndex')return
+ if(key == 'transform')return
let value = detailData.frontBack.back[index].style[key]
if(typeof value !== 'number'){
value = value.replace('px','')
@@ -143,6 +138,7 @@ export default defineComponent({
});
setTimeout(() => {
emit('modelOnLoad')
+ initMoveableForSelected()
},500);
};
img.src = detailData.frontBack?.body?.path;
@@ -150,203 +146,280 @@ export default defineComponent({
}
const getDetailListDom = reactive({
libraryList:null as any,
+ moveableContainer:null as any,//控件层
})
-
- //设置尺寸
- const itemSizeMousedown = (direction:any,event:any)=>{
- selectItem.direction = direction
- selectItem.imgDom = document.getElementsByClassName('molepositon')[0].getElementsByClassName("detail_modal_item_front")[selectItem.imgDomIndex]
- detailData.frontBack.front[selectItem.imgDomIndex].designOpenrtionBtn = true
- let imgDomWH = selectItem.imgDom.getBoundingClientRect()
- let li = (document.getElementsByClassName('molepositon')[0].getElementsByClassName("designOpenrtion_btn_top")[0] as any).offsetWidth/2
- if(selectItem.direction == 'right' || selectItem.direction == 'bottom'){
- detailData.frontBack.front[selectItem.imgDomIndex].centers.left = imgDomWH.x+event.offsetX-li
- detailData.frontBack.front[selectItem.imgDomIndex].centers.top = imgDomWH.y+event.offsetY-li
- }else{
- detailData.frontBack.front[selectItem.imgDomIndex].centers.left = imgDomWH.x+event.offsetX+imgDomWH.width-li
- detailData.frontBack.front[selectItem.imgDomIndex].centers.top = imgDomWH.y+event.offsetY+imgDomWH.height-li
+
+ const elementRefs = ref([]) as any;
+ const moveableInstance = ref(null) as any;
+ const setElementRef = (el, index) => {
+ elementRefs.value[index] = el;
+ };
+ const updateRect = ()=>{
+ setTimeout(() => {
+ moveableInstance.value.updateRect()
+ }, 500);
+ }
+ const initMoveableForSelected = () => {
+ // 销毁旧的实例
+ if(selectItem.imgDomIndex == -1)return
+ if (moveableInstance.value) {
+ moveableInstance.value.destroy();
}
- document.addEventListener('mousemove', sizeMouseMove);
- document.addEventListener('touchmove', sizeTouchmove);
- document.addEventListener('mouseup', sizeMouseup);
- document.addEventListener('touchend', sizeMouseup);
- }
- const sizeMouseMove = (event:any)=>{
- let e = getMousePosition(event,false)
- sizeMouseMoveOperation(e)
- }
- const sizeTouchmove = (event:any)=>{
- let e = getMousePosition(event,true)
- sizeMouseMoveOperation(e)
-
- }
- const sizeMouseup = (e:any)=>{
- detailData.frontBack.front[selectItem.imgDomIndex].style={
- right:'auto',
- left:selectItem.imgDom.offsetLeft+'px',
- bottom:'auto',
- top:selectItem.imgDom.offsetTop+'px',
- height:selectItem.imgDom.offsetHeight+'px',
- width:selectItem.imgDom.offsetWidth+'px',
- zIndex:selectItem.imgDom.style.zIndex,
- // zIndex:selectItem.printZIndex
+ const selectedEl = elementRefs.value[selectItem.imgDomIndex];
+ if (!selectedEl) return;
+ if(!selectedEl.style.left)return
+ moveableInstance.value = new Moveable(getDetailListDom.moveableContainer, {
+ target: selectedEl,
+ draggable: true,
+ scalable: true,
+ rotatable: true,
+ keepRatio: false, // 等比缩放
+ snappable: true,
+ snapThreshold: 5,
+ edge: false,
+ });
+ let startPosition = {//记录初始位置
+ left: 0,
+ top: 0,
}
- // detailData.frontBack.back[selectItem.imgDomIndex].style.zIndex = selectItem.printZIndex
- document.removeEventListener('mousemove',sizeMouseMove)
- document.removeEventListener('touchmove',sizeTouchmove)
- document.removeEventListener('mouseup',sizeMouseup)
- document.removeEventListener('touchend',sizeMouseup)
- //鼠标抬起
- setRevocation()
- }
- let isMove = false//表示是否移动，是否需要在鼠标抬起的时候保存数据
+ moveableInstance.value.on('scaleStart', ({ target, direction }) => {
+ const frontStyle = detailData.frontBack.front[selectItem.imgDomIndex];
+ if (!frontStyle.mirror){
+ let scaleX = frontStyle.style.transform.match(/scaleX\(([-\d.]+)\)/);
+ let scaleY = frontStyle.style.transform.match(/scaleY\(([-\d.]+)\)/);
+ frontStyle.mirror = { x: scaleX[1] == '-1' ? true : false, y: scaleY[1] == '-1' ? true : false };
+ }
+ });
+ moveableInstance.value.on('rotateStart', ({ target, direction }) => {
+ const frontStyle = detailData.frontBack.front[selectItem.imgDomIndex];
+ if (!frontStyle.mirror){
+ let scaleX = frontStyle.style.transform.match(/scaleX\(([-\d.]+)\)/);
+ let scaleY = frontStyle.style.transform.match(/scaleY\(([-\d.]+)\)/);
+ frontStyle.mirror = { x: scaleX[1] == '-1' ? true : false, y: scaleY[1] == '-1' ? true : false };
+ }
+ });
+ moveableInstance.value.on('dragStart', ({ target, clientX, clientY }) => {
+ startPosition = {
+ left:parseFloat(selectedEl.style.left.replace('px','')) || 0,
+ top:parseFloat(selectedEl.style.top.replace('px','')) || 0,
+ }
+ });
+ // 拖拽
+ moveableInstance.value.on('drag', ({ target, beforeTranslate }) => {
+ let x = startPosition.left + beforeTranslate[0]
+ let y = startPosition.top + beforeTranslate[1]
+ detailData.frontBack.front[selectItem.imgDomIndex].style.left = x + 'px'
+ detailData.frontBack.front[selectItem.imgDomIndex].style.top = y + 'px'
+ });
+ const updateElementTransform = (element, rotateDeg = null) => {
+
+ const currentTransform = element.style?.transform || '';
+ // 1. 提取当前的所有rotate
+ const currentRotates = (currentTransform.match(/rotate[XYZ]?\([^)]+\)/g) || []);
+ // 2. 获取除镜像和rotate外的其他所有变换
+ let otherTransforms = currentTransform
+ .replace(/scaleX\(-1\)|scaleY\(-1\)/g, '') // 移除镜像
+ .replace(/rotate[XYZ]?\([^)]+\)/g, '') // 移除rotate
+ .replace(/\s+/g, ' ')
+ .trim();
+ // 3. 构建新transform
+ const transforms = [];
+ // 镜像部分
+ if (element.mirror.x) transforms.push('scaleX(-1)');
+ if (element.mirror.y) transforms.push('scaleY(-1)');
+ if (otherTransforms) transforms.push(otherTransforms);
+ if (rotateDeg !== null) {
+ transforms.push(`rotate(${rotateDeg}deg)`);
+ } else if (currentRotates.length > 0) {
+ transforms.push(...currentRotates);
+ }
+ element.style.transform = transforms.join(' ').trim();
+ };
+
+ moveableInstance.value.on('scale', ({ target, delta, direction }) => {
+ const frontStyle = detailData.frontBack.front[selectItem.imgDomIndex];
+ if (!frontStyle.mirror) frontStyle.mirror = { x: false, y: false };
+
+ const width = parseFloat(frontStyle.style.width);
+ const height = parseFloat(frontStyle.style.height);
+ let left = parseFloat(frontStyle.style.left) || 0;
+ let top = parseFloat(frontStyle.style.top) || 0;
+ let rotation = 0;
+ // 获取原始比例
+ const originalRatio = width / height;
+ if (frontStyle.style.transform) {
+ const transform = frontStyle.style.transform;
+ const match = transform.match(/rotate\(([-\d.]+)deg\)/);
+ if (match) {
+ rotation = parseFloat(match[1]);
+ }
+ }
+ // 根据旋转角度重新计算控制点的方向
+ function getAdjustedCorner(originalCorner, rotationAngle) {
+ const angleRad = rotationAngle * (Math.PI / 180);
+ const cosA = Math.cos(angleRad);
+ const sinA = Math.sin(angleRad);
+ const newX = originalCorner.x * cosA - originalCorner.y * sinA;
+ const newY = originalCorner.x * sinA + originalCorner.y * cosA;
+ const threshold = 0.5;
+ return {
+ x: Math.abs(newX) > threshold ? (newX > 0 ? 1 : -1) : 0,
+ y: Math.abs(newY) > threshold ? (newY > 0 ? 1 : -1) : 0
+ };
+ }
+
+ if (rotation !== 0) {
+ direction = getAdjustedCorner({x: direction[0], y: direction[1]}, rotation);
+ direction = [direction.x, direction.y];
+ }
+
+ // 判断是否是对角线方向（需要等比缩放）
+ const isDiagonal = Math.abs(direction[0]) === 1 && Math.abs(direction[1]) === 1;
+
+ // 处理轴缩放，包含镜像翻转逻辑
+ const processAxis = (axis, val, deltaVal, dir, originalPosition, originalSize, keepRatio = false, otherAxisResult = null) => {
+ let newVal = val * deltaVal;
+ const mirrorKey = axis === 'width' ? 'x' : 'y';
+ const isWidth = axis === 'width';
+
+ // 检查是否需要镜像翻转（当值小于等于0时）
+ if (newVal <= 0) {
+ frontStyle.mirror[mirrorKey] = !frontStyle.mirror[mirrorKey];
+ newVal = Math.abs(newVal);
+
+ updateElementTransform(frontStyle);
+
+ // 镜像翻转后，位置需要根据原始锚点调整
+ if (dir === -1) {
+ // 从左上/右上缩放时，位置保持不变
+ return {
+ newVal,
+ adjustPos: originalPosition,
+ shouldFlip: true
+ };
+ } else {
+ // 从左下/右下缩放时，位置需要调整
+ const newPosition = originalPosition + (originalSize - newVal) * (frontStyle.mirror[mirrorKey] ? -1 : 1);
+ return {
+ newVal,
+ adjustPos: newPosition,
+ shouldFlip: true
+ };
+ }
+ }
+ const shouldMove = (!frontStyle.mirror[mirrorKey] && dir === -1) ||
+ (frontStyle.mirror[mirrorKey] && dir === 1);
+ if (keepRatio && otherAxisResult) {
+ newVal = isWidth ?
+ otherAxisResult.newVal * originalRatio :
+ otherAxisResult.newVal / originalRatio;
+ }
+ let adjustPos;
+ if (shouldMove) {
+ adjustPos = originalPosition - (newVal - originalSize);
+ } else {
+ adjustPos = originalPosition;
+ }
+ return {
+ newVal,
+ adjustPos,
+ shouldFlip: false
+ };
+ };
+
+ // 自由缩放
+ const widthResult = processAxis('width', width, delta[0], direction[0], left, width);
+ const heightResult = processAxis('height', height, delta[1], direction[1], top, height);
+
+ frontStyle.style.left = widthResult.adjustPos + 'px';
+ frontStyle.style.top = heightResult.adjustPos + 'px';
+ frontStyle.style.width = widthResult.newVal + 'px';
+ frontStyle.style.height = heightResult.newVal + 'px';
+ // }
+ });
+
+ // 旋转
+ moveableInstance.value.on('rotate', ({ target, beforeRotate }) => {
+ let frontStyle = detailData.frontBack.front[selectItem.imgDomIndex];
+ // 确保镜像状态存在
+ if (!frontStyle.mirror) frontStyle.mirror = { x: false, y: false };
+
+ const { x: isMirroredX, y: isMirroredY } = frontStyle.mirror;
+
+ // 计算实际旋转角度
+ let actualRotate = beforeRotate;
+
+ // 关键逻辑：当镜像状态不同时（一个true一个false），旋转方向反转
+ if (isMirroredX !== isMirroredY) {
+ actualRotate = -beforeRotate;
+ }
+
+ // 确保角度在 0-360 度范围内
+ actualRotate = actualRotate % 360;
+
+ // 如果角度为负数，转换为正数
+ if (actualRotate < 0) {
+ actualRotate += 360;
+ }
+
+ // 确保角度在 [0, 360) 范围内
+ actualRotate = ((actualRotate % 360) + 360) % 360;
+
+ updateElementTransform(frontStyle, actualRotate.toFixed(2));
+ });
+ // 调整大小
+ moveableInstance.value.on('resize', ({ target, width, height }) => {
+ // console.log(width, height)
+ // detailData.frontBack.front[selectItem.imgDomIndex].style.width = width
+ // detailData.frontBack.front[selectItem.imgDomIndex].style.height = height
+ });
+ moveableInstance.value.on('dragEnd', ({ target, clientX, clientY }) => {
+ startPosition = {
+ left:0,
+ top:0,
+ }
+ upDataDetail()
+ });
+ moveableInstance.value.on('scaleEnd', () => {
+ upDataDetail()
+ });
+ moveableInstance.value.on('rotateEnd', () => {
+ upDataDetail()
+ });
+ };
+ watch(()=>selectItem.selectDetail,(newValue,oldValue)=>{
+ if(!newValue && newValue?.id == oldValue?.id)return
+ selectItem.imgDomIndex = detailData.frontBack.front.findIndex((item:any)=>item.id == newValue.id)
+ initMoveableForSelected()
+ },{immediate: true,})
+
const setRevocation = ()=>{
- if(!isMove)return
- isMove = false
let frontBack = JSON.parse(JSON.stringify(detailData.frontBack))
- console.log(frontBack)
let revocation:any = JSON.parse((sessionStorage.getItem("revocation") as any))
revocation.push({designData:null,position:frontBack})
sessionStorage.setItem('revocation', JSON.stringify(revocation));
-
}
- const sizeMouseMoveOperation = (e:any)=> {
- isMove = true
- let imgDomWH = selectItem.imgDom.getBoundingClientRect()
- let parentNode =selectItem.imgDom.parentNode
- let width = imgDomWH.width
- let height = imgDomWH.height
- let w,h
- let num = height/width
- //判断移动四个边
- if(selectItem.direction == 'right'){
- w = (e.clientX - detailData.frontBack.front[selectItem.imgDomIndex].centers.left)
- h = (e.clientX - detailData.frontBack.front[selectItem.imgDomIndex].centers.left)*num
- width = w+'px'
- // height = w*num+'px'
- }else if(selectItem.direction == 'top'){
- num = width/height
- detailData.frontBack.front[selectItem.imgDomIndex].style.top = 'auto'
- // this.printStyleList[selectItem.imgDomIndex].style.left = 'auto'
- detailData.frontBack.front[selectItem.imgDomIndex].style.bottom = parentNode.offsetHeight -imgDomWH.height - selectItem.imgDom.offsetTop+'px'
- w = (e.clientX - detailData.frontBack.front[selectItem.imgDomIndex].centers.left)*num
- h = (detailData.frontBack.front[selectItem.imgDomIndex].centers.top - e.clientY)
-
- height = h+'px'
- // width = h*num+'px'
- }else if(selectItem.direction == 'bottom'){
- num = width/height
- h = (e.clientY - detailData.frontBack.front[selectItem.imgDomIndex].centers.top)
- height = h+'px'
- // width = h*num+'px'
- }else if(selectItem.direction == 'left'){
- detailData.frontBack.front[selectItem.imgDomIndex].style.left = 'auto'
- detailData.frontBack.front[selectItem.imgDomIndex].style.right = parentNode.offsetWidth -imgDomWH.width - selectItem.imgDom.offsetLeft+'px'
- w = (detailData.frontBack.front[selectItem.imgDomIndex].centers.left - e.clientX)
-
- width = w+'px'
- // height = w*num+'px'
- }
- //判断尺寸是否到边
- detailData.frontBack.front[selectItem.imgDomIndex].style.width = width
- detailData.frontBack.front[selectItem.imgDomIndex].style.height = height
- }
- // 设置移动
- const mouseMove = (event:any)=>{
- let e = getMousePosition(event,false)
- mouseMoveOperation(e)
- }
- const touchmove=(event:any)=>{
- let e = getMousePosition(event,true)
- mouseMoveOperation(e)
- }
- const mouseup = (e:any)=> {
- document.removeEventListener('mousemove',mouseMove)
- document.removeEventListener('touchmove',touchmove)
- document.removeEventListener('mouseup',mouseup)
- document.removeEventListener('touchend',mouseup)
- ///鼠标抬起
+ const upDataDetail = async ()=>{
+ //同步到selectDetail数据中，
+ // getDetailListData.designDetail
+ let {scale,offset,priority,transpose,rotate,position,imageSize} = await getSubmitData(selectItem.selectDetail,false)
+ selectItem.selectDetail.layersObject[0].scale = scale
+ selectItem.selectDetail.layersObject[1].scale = scale
+ selectItem.selectDetail.layersObject[0].offset = offset
+ selectItem.selectDetail.layersObject[1].offset = offset
+ selectItem.selectDetail.layersObject[0].priority = priority
+ selectItem.selectDetail.layersObject[1].priority = priority
+ selectItem.selectDetail.layersObject[0].rotate = rotate
+ selectItem.selectDetail.layersObject[1].rotate = rotate
+ selectItem.selectDetail.layersObject[0].transpose = transpose
+ selectItem.selectDetail.layersObject[1].transpose = transpose
+ selectItem.selectDetail.layersObject[0].position = position
+ selectItem.selectDetail.layersObject[1].position = position
+ selectItem.selectDetail.layersObject[0].imageSize = imageSize
+ selectItem.selectDetail.layersObject[1].imageSize = imageSize
setRevocation()
}
- const mouseMoveOperation = (e:any)=>{
- isMove = true
- let imgDomWH = selectItem.imgDom.getBoundingClientRect()
- let parentNode = document.getElementsByClassName('molepositon')[0].getElementsByClassName("designOpenrtion_imgMask")[0].getBoundingClientRect()
- let x = (e.clientX - detailData.frontBack.front[selectItem.imgDomIndex].centers.left)+'px'
- let y = ( e.clientY - detailData.frontBack.front[selectItem.imgDomIndex].centers.top)+'px'
- detailData.frontBack.front[selectItem.imgDomIndex].style.left = x
- detailData.frontBack.front[selectItem.imgDomIndex].style.top = y
- }
- const clothesOpenActive = (index:number)=>{
- // this.designItemDetail.clothes.forEach((item)=>{
- // item.clothesOpenItem = false
- // })
- // if(index != -1){
- // this.designItemDetail.clothes[index].clothesOpenItem = true
- // }
- }
- const itemMoveMousedown = async (index:any,e:any)=>{
- if(detailData.selectDetail.id != detailData.frontBack.front[index].id)return
- let isModal = false
- await new Promise((resolve, reject) => {
- // if(
- // detailData.isEditPattern.value &&
- // selectItem.selectDetail?.id &&
- // (detailData.frontBack.front[index].id != selectItem.selectDetail.id)
- // ){
- // isModal = true
- // Modal.confirm({
- // title: t('collectionModal.jsContent2'),
- // icon: createVNode(ExclamationCircleOutlined),
- // okText: 'Yes',
- // cancelText: 'No',
- // mask:false,
- // centered:true,
- // onOk() {
- // resolve(true)
- // isOpen = true
- // },
- // onCancel(){
- // resolve(false)
- // isOpen = false
- // }
- // });
- // }else{
- // if(detailData.frontBack.front[index].id != selectItem.selectDetail.id){
- // isOpen = true
- // }
- // resolve(true)
- // isModal = false
- // }
- resolve(true)
- }).then((rv)=>{
- })
- // emit('canvasReload')
- // store.commit('DesignDetail/setDesignColthes',detailData.frontBack.front[index].id)
- if(isModal)return
- store.commit('DesignDetail/setDesignColthes',detailData.frontBack.front[index].id)
- selectItem.imgDomIndex = index
- detailData.frontBack.front.forEach((v:any)=>{
- v.designOpenrtionBtn = false
- })
- clothesOpenActive(index)
- let event = e||window.event
- selectItem.imgDom = document.getElementsByClassName('molepositon')[0].getElementsByClassName("detail_modal_item_front")[selectItem.imgDomIndex]
- detailData.frontBack.front[index].designOpenrtionBtn = true
- // detailData.frontBack.front[index].style.zIndex = selectItem.printZIndex++
- // detailData.frontBack.back[index].style.zIndex = selectItem.printZIndex
- let imgDomWH = selectItem.imgDom.getBoundingClientRect()
- let left = Number(detailData.frontBack.front[index].style.left.replace(/px/g,''))
- let top = Number(detailData.frontBack.front[index].style.top.replace(/px/g,''))
- detailData.frontBack.front[index].centers.left = imgDomWH.x+event.offsetX-left
- detailData.frontBack.front[index].centers.top = imgDomWH.y+event.offsetY-top
-
- document.addEventListener('mousemove', mouseMove);
- document.addEventListener('touchmove', touchmove);
- document.addEventListener('mouseup', mouseup);
- document.addEventListener('touchend', mouseup);
- }
const sort = (arr:any)=>{
arr.sort((a:any, b:any) => {
var a_num = a.style.zIndex;
@@ -355,7 +428,7 @@ export default defineComponent({
});
return arr
}
- const getSubmitData = (value:any,isNoComputed)=>{
+ const getSubmitData = async (value:any,isNoComputed)=>{
let parentNode = document.getElementsByClassName('molepositon')[0].getElementsByClassName("designOpenrtion_imgMask")[0].getBoundingClientRect()
if(!detailData.frontBack?.body?.layersObject?.[0]?.imageSize || isNoComputed){
return{
@@ -365,6 +438,17 @@ export default defineComponent({
}
}
let ratio = detailData.frontBack.body.layersObject[0].imageSize[0]/parentNode.width
+
+ let scale = 0
+ let dom:any = document.querySelector('.molepositon .perview_img')
+ const img = new Image();
+ img.src = detailData.frontBack?.body?.path;
+ await new Promise((resolve, reject) => {
+ img.onload = () => {
+ scale = dom.parentNode.offsetWidth / img.width
+ resolve()
+ };
+ })
// let arr:any = sort(detailData.frontBack.front)
let arr:any = sort(JSON.parse(JSON.stringify(detailData.frontBack.front)))
let num = 10
@@ -377,6 +461,8 @@ export default defineComponent({
priority:'',
maskUrl:'',
maskMinioUrl:'',
+ position:null,
+ imageSize:null,
}
let state = false
for (let index = 0; index < arr.length; index++) {
@@ -384,13 +470,27 @@ export default defineComponent({
state = true
let y = ((arr[index]?.style?.top.replace(/px/g,'')*ratio).toFixed(0) as any - arr[index]?.position[0])
let x = ((arr[index]?.style?.left.replace(/px/g,'')*ratio).toFixed(0) as any - arr[index]?.position[1])
+ let positionX = Number((arr[index]?.style?.left.replace(/px/g,'')/scale)).toFixed(2)
+ let positionY = Number((arr[index]?.style?.top.replace(/px/g,'')/scale)).toFixed(2)
+ let imageSizeW = Number((arr[index]?.style?.width.replace(/px/g,'')/scale)).toFixed(2)
+ let imageSizeH = Number((arr[index]?.style?.height.replace(/px/g,'')/scale)).toFixed(2)
+
let scaleWidth = arr[index]?.imageSize?Number(((arr[index]?.style?.width.replace(/px/g,'')*ratio)/(arr[index]?.imageSize[0]/arr[index].scale[0])).toFixed(2)):1
let scaleHeight = arr[index]?.imageSize?Number(((arr[index]?.style?.height.replace(/px/g,'')*ratio)/(arr[index]?.imageSize[1]/arr[index].scale[1])).toFixed(2)):1
// let widthScale = (arr[index].style.width.replace(/px/g,'')/arr[index].style.height.replace(/px/g,'')).toFixed(2)
+
+ let transformStr = arr[index]?.style?.transform
+ let scaleX = transformStr.match(/scaleX\(([-\d.]+)\)/)
+ let scaleY = transformStr.match(/scaleY\(([-\d.]+)\)/)
+ let rotate = transformStr.match(/rotate\(([-\d.]+)deg\)/);
+ data.transpose = [parseFloat(scaleX?.[1] || 1),parseFloat(scaleY?.[1] || 1)]
+ data.rotate = parseFloat(rotate?.[1] || 0)
data.scale = [scaleWidth,scaleHeight]
let top = y == 0 ? value.layersObject[0].offset[1]:y+value.layersObject[0].offset[1]
let left = x == 0 ? value.layersObject[0].offset[0]:x+value.layersObject[0].offset[0]
data.offset = [left?left:0,top?top:0]
+ data.position = [positionY,positionX]
+ data.imageSize = [imageSizeW,imageSizeH]
// data.offset = [left?left:0,top?top:0]
data.maskUrl = arr[index].maskUrl
data.maskMinioUrl = arr[index].maskMinioUrl
@@ -410,15 +510,6 @@ export default defineComponent({
}
const deleteNav = ()=>{
- }
- const setpitch = (item:any,index:any)=>{
- detailData.frontBack.front.forEach((v:any)=>{
- v.designOpenrtionBtn = false
- })
- detailData.frontBack.front[index].designOpenrtionBtn = true
- // detailData.frontBack.front[index].style.zIndex = selectItem.printZIndex++
- // detailData.frontBack.back[index].style.zIndex = selectItem.printZIndex
- clothesOpenActive(index)
}
const updataPosition = ()=>{
let url = detailData.frontBack?.body?.path
@@ -431,10 +522,12 @@ export default defineComponent({
detailData.frontBack.front.forEach((item:any,index:number) => {
for (const key in item.style) {
if(key == 'zIndex')return
+ if(key == 'transform')return
item.style[key] = item.style[key]*sacle+'px'
}
for (const key in detailData.frontBack.back[index].style) {
if(key == 'zIndex')return
+ if(key == 'transform')return
detailData.frontBack.back[index].style[key] = detailData.frontBack.back[index].style[key]*sacle+'px'
}
});
@@ -445,20 +538,22 @@ export default defineComponent({
if (detailData.observer) {
detailData.observer.disconnect()
}
+ if (moveableInstance.value) {
+ moveableInstance.value.destroy();
+ }
})
return{
...toRefs(detailData),
...toRefs(selectItem),
...toRefs(getDetailListDom),
-
+ setElementRef,
+
setPrintSize,
- itemSizeMousedown,
- itemMoveMousedown,
deleteNav,
- setpitch,
getSubmitData,
getMousePosition,
updataPosition,
+ updateRect,
}
},
@@ -541,6 +636,11 @@ export default defineComponent({
}
}
}
+ .moveableContainer{
+ :deep(.moveable-origin){
+ opacity: 0;
+ }
+ }
> .designOpenrtion_imgMask{
width: auto;
height: auto;
@@ -561,10 +661,15 @@ export default defineComponent({
position: absolute;
top: 0;
}
+
.detail_modal_item_front,.designOpenrtion_print{
z-index: 2;
height: 100%;
width: 100%;
+ pointer-events: none;
+ &.active{
+ pointer-events: auto;
+ }
img{
width: 100%;
// height: ;
@@ -583,94 +688,6 @@ export default defineComponent({
.designOpenrtion_print{
z-index: 1 !important;
}
- > .designOpenrtion_btnBox{
- z-index: 99;
- width: 100%;
- height: 100%;
- left: 0;
- ul{
- list-style: none;
- // width: 100%;
- // height: 100%;
- position: absolute;
- top: 0;
- left: 0;
- box-sizing: border-box;
- border: 2px solid rgb(20, 188, 255);
- padding: 0;
- -webkit-user-drag: none;
- user-select:none;
- opacity: 0;
- margin: 0;
-
- li{
- cursor: pointer;
- // border-radius: 50%;
- width: calc(2rem*1.2);
- height: calc(2rem*1.2);
- background-color: rgb(20, 188, 255);
- position: absolute;
- pointer-events: none;
- }
- &.active{
- opacity: 1;
- z-index: 999 !important;
- li{
- pointer-events: auto;
- }
- }
- .designOpenrtion_btn_top,.designOpenrtion_btn_bottom{
- left: 50%;
- transform: translate(-50%,-50%) ;
- cursor: n-resize;
- }
- .designOpenrtion_btn_top{
- top: 0;
- }
- .designOpenrtion_btn_bottom{
- top: 100%;
- }
- .designOpenrtion_btn_left,.designOpenrtion_btn_right{
- top: 50%;
- transform: translate(-50%,-50%) ;
- cursor: e-resize;
- }
- .designOpenrtion_btn_left{
- left: 0;
- }
- .designOpenrtion_btn_right{
- left: 100%;
- }
- .designOpenrtion_rotote{
- top: 50%;
- left: 50%;
- transform: translate(-50%,-50%);
- width: 0;
- height: 0;
- }
- .designOpenrtion_rotote::after{
- position: absolute;
- content: "";
- background-color: #14bcff;
- width: 2px;
- height: 30px;
- left: 50%;
- bottom: 0;
- transform: translateX(-50%);
- }
- .designOpenrtion_rotote::before{
- position: absolute;
- content: "";
- background-color: #14bcff;
- top: calc(50% - 30px);
- left: 50%;
- transform: translate(-50%,-50%) ;
- width: calc(1.5rem*1.2);
- height: calc(1.5rem*1.2);
- border-radius: 50%;
- }
- }
- }
}
}
\ No newline at end of file
diff --git a/src/component/home/design/collection/more.vue b/src/component/home/design/collection/more.vue
index 153b64e9..3dc0a2fb 100644
--- a/src/component/home/design/collection/more.vue
+++ b/src/component/home/design/collection/more.vue
@@ -132,7 +132,25 @@ export default defineComponent({
url:rv.url,
designType:props.item.resData.designType || props.item.designType,
}
- props.list.unshift(rv)
+ rv.type_ = {
+ type1: "material",
+ type2: props.level1Type
+ }
+ if(props.level1Type == 'Printboard'){
+ let list = props.list.filter((v:any)=> v.type_?.type1 == "material")
+ list.unshift(rv)
+ store.commit("setPrintboardMaterialFiles", list);
+ }else if(props.level1Type == 'Sketchboard'){
+ let list = props.list.filter((v:any)=> v.type_?.type1 == "material")
+ list.unshift(rv)
+ store.commit("setSketchboardMaterialFiles", list);
+ }else if(props.level1Type == 'Moodleboard'){
+ let list = props.list.filter((v:any)=> v.type_?.type1 == "material")
+ list.unshift(rv)
+ store.commit("setMoodleboardMaterialFiles", list);
+ }else{
+ props.list.unshift(rv)
+ }
}
}
).catch(res=>{
diff --git a/src/component/modules/generalMiniCanvas.vue b/src/component/modules/generalMiniCanvas.vue
index 15c579d3..7c8cb384 100644
--- a/src/component/modules/generalMiniCanvas.vue
+++ b/src/component/modules/generalMiniCanvas.vue
@@ -9,7 +9,7 @@
:isBackgroundChangeable="false"
ref="editCanvas">
-
@@ -228,6 +234,8 @@
}
} else if (item.action === ACTIONS.SELECT) {
activeToken.value = item.token;
+ } else if (item.action === ACTIONS.DELETE) {
+ list.value = list.value.filter((v) => v.token !== item.token);
}
});
};
@@ -284,7 +292,7 @@
};
// 监听列表变化属性变更
const updateList = (item, key, value) => {
- if(key === "scale[0]") item.scale[1] = value;
+ if (key === "scale[0]") item.scale[1] = value;
pingpuRef.value.updataList([
{
token: item.token,
diff --git a/src/component/Canvas/OverallCanvas/index.vue b/src/component/Canvas/OverallCanvas/index.vue
index 0bc44351..2feedef1 100644
--- a/src/component/Canvas/OverallCanvas/index.vue
+++ b/src/component/Canvas/OverallCanvas/index.vue
@@ -144,6 +144,13 @@
const list = [{ token, action: ACTIONS.SELECT }];
emit("change-canvas", list);
};
+ // 删除对象
+ const onDeleteItem = (object) => {
+ const list = [{ token: object.token, action: ACTIONS.DELETE }];
+ emit("change-canvas", list);
+ canvas.remove(object);
+ canvas.renderAll();
+ };
const urlToCanvas = (url) => {
return new Promise((resolve, reject) => {
fabric.Image.fromURL(
@@ -181,6 +188,7 @@
height: cheight,
fill: pattern,
...item.object,
+ onDelete: (v) => onDeleteItem(v),
});
canvas.add(rect);
};
diff --git a/src/component/Canvas/canvasExample.vue b/src/component/Canvas/canvasExample.vue
index 4d270e12..be04b46a 100644
--- a/src/component/Canvas/canvasExample.vue
+++ b/src/component/Canvas/canvasExample.vue
@@ -335,15 +335,15 @@ const otherData = {
color: {rgba: {r:255,g:0,b:0,a:1}},
printObject: {
prints: [
- {
- ifSingle: false,
- level2Type: "Pattern",
- designType: "Library",
- path: "/src/assets/images/canvas/yinhua1.jpg",
- location: [250, 780],
- scale: [0.3, 0.4],
- angle: 0,
- },
+ // {
+ // ifSingle: false,
+ // level2Type: "Pattern",
+ // designType: "Library",
+ // path: "/src/assets/images/canvas/yinhua1.jpg",
+ // location: [250, 780],
+ // scale: [0.3, 0.4],
+ // angle: 0,
+ // },
{
ifSingle: true,
level2Type: "Pattern",
diff --git a/src/component/Canvas/test.vue b/src/component/Canvas/test.vue
index 097f2571..1433898e 100644
--- a/src/component/Canvas/test.vue
+++ b/src/component/Canvas/test.vue
@@ -5,11 +5,13 @@
+
+
![]()
-
-
+
-
-
-
-
-
-
+
@@ -46,7 +46,11 @@ export default defineComponent({
isSubmitCanvasJSON:{
type:Boolean,
default:false
- }
+ },
+ btnShow:{
+ type:Boolean,
+ default:true
+ },
},
emits:['submitBase64Data','canvasChangeGetJSON'],
setup(props,{emit}) {
@@ -99,6 +103,9 @@ export default defineComponent({
}
}
+ const submitBase64Data = (base64Data)=>{
+ return dataDom.editCanvas.exportImage({isContainBg:true,isContainFixed:true,isCropByBg:true})
+ }
const exportElement = ()=>{
dataDom.editCanvas.exportImage({isContainBg:true,isContainFixed:false,isCropByBg:true}).then((rv)=>{
downloadBase64Image(rv,'canvas')
@@ -174,6 +181,7 @@ export default defineComponent({
canvasInit,
exportElement,
changeCanvas,
+ submitBase64Data,
};
},
data(prop) {
diff --git a/src/store/Detail/designDetail.ts b/src/store/Detail/designDetail.ts
index 82b9c575..a5b40f08 100644
--- a/src/store/Detail/designDetail.ts
+++ b/src/store/Detail/designDetail.ts
@@ -1,6 +1,7 @@
import {Module} from 'vuex'
import {RootState} from '../index'
import { forEach } from 'jszip'
+import { transform } from 'typescript'
interface DesignDetail{
designDetail:any,
@@ -59,6 +60,7 @@ const DesignDetail : Module = {
left:v.layersObject[i].position?.[1],
width:v.layersObject[i].imageSize?.[0],
height:v.layersObject[i].imageSize?.[1],
+ transform:`rotate(${v.layersObject[i]?.rotate || 0}deg) scaleX(${v.layersObject[i].transpose?.[0] || 1}) scaleY(${v.layersObject[i].transpose?.[1] || 1})`,
}
v.layersObject[i].centers={
left:0,
@@ -69,7 +71,7 @@ const DesignDetail : Module = {
v.layersObject[i].designOpenrtionBtn = false
if(v.layersObject[i].imageCategory.indexOf("back") == -1){
front[index] = v.layersObject[i]
- // front[index].style.zIndex = v.priority
+ front[index].style.zIndex = v.priority + 10
front[index].id = v.id
front[index].undividedLayer = v.undividedLayer
front[index].undividedLayerWithSinglePrint = v?.undividedLayerWithSinglePrint
@@ -199,6 +201,9 @@ const DesignDetail : Module = {
trims:null,
type:null,
undividedLayer:null,
+ undividedLayer_:null,
+ transpose:[1,1],
+ rotate:0,
undividedLayerWithSinglePrint:null,
}
if(!state.currentDetailType)state.currentDetailType = 'sketch'
@@ -209,6 +214,28 @@ const DesignDetail : Module = {
});
state.selectDetail = data
},
+ canvasPreviewUpdata(state,{type,callBack}){
+ console.log(state.selectDetail,type)
+ // state.selectDetail.newDetail?.print?.forEach((item:any) => {
+ // state.selectDetail.printObject.prints = []
+ // state.selectDetail.printObject.push({
+ // })
+ // });
+ if(type == 'print' || type == 'all')state.selectDetail.printObject.prints = state.selectDetail.newDetail?.print
+ if(type == 'color' || type == 'all')state.selectDetail.color = {
+ ...state.selectDetail.newDetail?.color,
+ ...state.selectDetail.newDetail?.color?.rgba,
+ ...state.selectDetail.newDetail?.color?.hsv,
+ }
+ console.log(state.selectDetail,type,state.selectDetail.newDetail)
+ if(type == 'element' || type == 'all')state.selectDetail.trims.prints = state.selectDetail.newDetail?.element
+ if(type == 'all'){
+ state.selectDetail.newDetail = {}
+ }else{
+ state.selectDetail.newDetail[type] = null
+ }
+ callBack()
+ },
async setPraeview(state,value){//preview
let data = value?.rv || value
let currentType = value?.currentType
@@ -228,7 +255,6 @@ const DesignDetail : Module = {
}else{
id_ = item.id
}
- console.log(id_)
let el:any = document.querySelector('.molepositon .perview_img')
await new Promise((resolve, reject) => {
if(!state.frontBack?.body?.path){
@@ -252,7 +278,8 @@ const DesignDetail : Module = {
left:item.layersObject[i].position?.[1] * scale + 'px',
width:item.layersObject[i].imageSize?.[0] * scale + 'px',
height:item.layersObject[i].imageSize?.[1] * scale + 'px',
- zIndex:v?.style?.zIndex?v.style.zIndex:v.priority?v.priority:state.frontBack.front.length
+ zIndex:v?.style?.zIndex?v.style.zIndex:v.priority?v.priority:state.frontBack.front.length,
+ transform:`rotate(${item.layersObject?.[i]?.rotate || 0}deg) scaleX(${item.layersObject[i].transpose?.[0] || 1}) scaleY(${item.layersObject[i].transpose?.[1] || 1})`,
}
item.layersObject[i].centers={
left:0,
@@ -293,6 +320,8 @@ const DesignDetail : Module = {
detailItem.minIOPath = item.minIOPath
detailItem.scale = [1,1]
detailItem.offset = [0,0]
+ detailItem.transpose = item.transpose || [1,1]
+ detailItem.rotate = item.rotate || 0
detailItem.printObject = item.printObject
detailItem.trims = item.trims
detailItem.type = item.type
diff --git a/src/tool/util.js b/src/tool/util.js
index 8d69b9d0..b8f095c7 100644
--- a/src/tool/util.js
+++ b/src/tool/util.js
@@ -618,6 +618,60 @@ function segmentImage(markerImage,fullImage,size){
}
})
}
+
+/**
+ * 处理PNG图片：透明度转白色，其他颜色转透明
+ * @param {string} sketchImage - 原始图片
+ * @returns {Promise} 处理后的ase64
+ */
+function sketchToMask(sketchImage) {
+ return new Promise((resolve, reject) => {
+ const img = new Image();
+ img.crossOrigin = 'anonymous';
+ img.onload = function() {
+ try {
+ const canvas = document.createElement('canvas');
+ const ctx = canvas.getContext('2d');
+ canvas.width = img.width;
+ canvas.height = img.height;
+ ctx.drawImage(img, 0, 0);
+ const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+ const data = imageData.data;
+
+ for (let i = 0; i < data.length; i += 4) {
+ const r = data[i];
+ const g = data[i + 1];
+ const b = data[i + 2];
+ const a = data[i + 3];
+ if (a > 0) {
+ data[i] = 0;
+ data[i + 1] = 0;
+ data[i + 2] = 0;
+ data[i + 3] = 0;
+ } else {
+ // 完全透明的像素 -> 纯白色
+ data[i] = 255;
+ data[i + 1] = 255;
+ data[i + 2] = 255;
+ data[i + 3] = 255;
+ }
+ }
+ ctx.putImageData(imageData, 0, 0);
+ const base64 = canvas.toDataURL('image/png');
+ resolve(base64);
+
+ } catch (error) {
+ reject(error);
+ }
+ };
+
+ img.onerror = function() {
+ reject(new Error('图片加载失败'));
+ };
+
+ img.src = sketchImage;
+ });
+}
export {
isEmail,
getUploadUrl,
@@ -640,5 +694,6 @@ export {
setGradual,
calculateGradientCoordinate,
segmentImage,
- UrlToFile
+ UrlToFile,
+ sketchToMask
}
\ No newline at end of file
From 6eda04a81eb0ef9be2f3b03a89927ca7295d95ee Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=8E=E5=BF=97=E9=B9=8F?= <2916022834@qq.com>
Date: Tue, 13 Jan 2026 14:41:20 +0800
Subject: [PATCH 02/17] =?UTF-8?q?=E5=B9=B3=E9=93=BA=E5=85=83=E7=B4=A0ui?=
=?UTF-8?q?=E6=9B=B4=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/assets/icons/CPart.svg | 68 ++
src/assets/images/icon/xyz.png | Bin 0 -> 3801 bytes
.../components/PartSelectorPanel.vue | 855 ++++++++++++++++++
.../SelectMenuPanel/RepeatSetting.vue | 59 +-
.../components/SelectMenuPanel/index.vue | 2 +-
.../CanvasEditor/components/ToolsSidebar.vue | 13 +
.../components/tools/AngleTool.vue | 60 +-
.../CanvasEditor/components/tools/MyInput.vue | 67 ++
.../components/tools/OffsetTool.vue | 285 +++---
.../CanvasEditor/components/tools/Slider.vue | 36 +-
src/component/Canvas/CanvasEditor/index.vue | 13 +
.../CanvasEditor/managers/ToolManager.js | 78 +-
.../Canvas/CanvasEditor/utils/helper.js | 89 ++
.../Canvas/CanvasEditor/utils/layerHelper.js | 7 +
src/component/Canvas/canvasExample.vue | 2 +-
src/component/Canvas/test.vue | 139 ++-
src/lang/cn.ts | 1 +
src/lang/en.ts | 3 +-
18 files changed, 1544 insertions(+), 233 deletions(-)
create mode 100644 src/assets/icons/CPart.svg
create mode 100644 src/assets/images/icon/xyz.png
create mode 100644 src/component/Canvas/CanvasEditor/components/PartSelectorPanel.vue
create mode 100644 src/component/Canvas/CanvasEditor/components/tools/MyInput.vue
diff --git a/src/assets/icons/CPart.svg b/src/assets/icons/CPart.svg
new file mode 100644
index 00000000..931b5358
--- /dev/null
+++ b/src/assets/icons/CPart.svg
@@ -0,0 +1,68 @@
+
+
+
diff --git a/src/assets/images/icon/xyz.png b/src/assets/images/icon/xyz.png
new file mode 100644
index 0000000000000000000000000000000000000000..a09a06d8c8e5ec1b30fdb80524f9d3e5e88a0669
GIT binary patch
literal 3801
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
+
+
+
+
+
+
+
+
diff --git a/src/component/Canvas/CanvasEditor/components/SelectMenuPanel/RepeatSetting.vue b/src/component/Canvas/CanvasEditor/components/SelectMenuPanel/RepeatSetting.vue
index dfd96563..e8ad87ca 100644
--- a/src/component/Canvas/CanvasEditor/components/SelectMenuPanel/RepeatSetting.vue
+++ b/src/component/Canvas/CanvasEditor/components/SelectMenuPanel/RepeatSetting.vue
@@ -1,14 +1,15 @@
.list {
display: flex;
+
> div {
display: flex;
align-items: center;
diff --git a/src/component/Canvas/CanvasEditor/components/ToolsSidebar.vue b/src/component/Canvas/CanvasEditor/components/ToolsSidebar.vue
index 583a4cf9..b1f29cb0 100644
--- a/src/component/Canvas/CanvasEditor/components/ToolsSidebar.vue
+++ b/src/component/Canvas/CanvasEditor/components/ToolsSidebar.vue
@@ -166,6 +166,19 @@ const normalToolsList = ref([
icon: { name: "CFont", size: "20" },
class: "text-btn",
},
+ {
+ id: OperationType.PART,
+ title: t("Canvas.GarmentPartSelector"),
+ action: () => selectTool(OperationType.PART),
+ icon: { name: "CPart", size: "28" },
+ class: "part-btn",
+ activeList: [
+ OperationType.PART,
+ OperationType.PART_RECTANGLE,
+ OperationType.PART_BRUSH,
+ OperationType.PART_ERASER,
+ ],
+ },
{
id: "help",
title: t("Canvas.help"),
diff --git a/src/component/Canvas/CanvasEditor/components/tools/AngleTool.vue b/src/component/Canvas/CanvasEditor/components/tools/AngleTool.vue
index 5fa56c70..d924525d 100644
--- a/src/component/Canvas/CanvasEditor/components/tools/AngleTool.vue
+++ b/src/component/Canvas/CanvasEditor/components/tools/AngleTool.vue
@@ -1,32 +1,53 @@
{{ $t('exportModel.Save') }}
{{ $t('exportModel.Export') }}
+
@@ -88,6 +96,12 @@
});
const gapX = computed(() => props.object.fill_?.gapX || 0);
const gapY = computed(() => props.object.fill_?.gapY || 0);
+ const offsetX = computed(
+ () => (props.object.fill?.offsetX / props.object.width) * 100
+ );
+ const offsetY = computed(
+ () => (props.object.fill?.offsetY / props.object.height) * 100
+ );
const emit = defineEmits([
"inputFillAngle",
"changeFillAngle",
@@ -111,23 +125,36 @@
diff --git a/src/component/Canvas/CanvasEditor/components/SelectMenuPanel/index.vue b/src/component/Canvas/CanvasEditor/components/SelectMenuPanel/index.vue
index 83a4ff36..f7ab1ecc 100644
--- a/src/component/Canvas/CanvasEditor/components/SelectMenuPanel/index.vue
+++ b/src/component/Canvas/CanvasEditor/components/SelectMenuPanel/index.vue
@@ -132,7 +132,6 @@
v-if="v.type === 'rect'"
trigger="click"
destroyTooltipOnHide
- :title="t('Canvas.repeatSetting')"
>
{{ t("Canvas.repeatSetting") }}
{{ t("Canvas.angle") }}
-
{{ t("Canvas.scale") }}
-
Gap X
-
Gap Y
-
{{ t("Canvas.offset") }}
+
+
- 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
SlSkr*Kzf(S@DVo1Y;(H#n+gdz=6N==cF
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
K2w9_PkNY3wjLWJ3
literal 0
HcmV?d00001
diff --git a/src/assets/images/canvas/shubiao-r.png b/src/assets/images/canvas/shubiao-r.png
new file mode 100644
index 0000000000000000000000000000000000000000..df70c79d138f37d4780b9550d74c70f65678fab0
GIT binary patch
literal 5384
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
literal 0
HcmV?d00001
diff --git a/src/component/Canvas/CanvasEditor/components/PartSelectorPanel.vue b/src/component/Canvas/CanvasEditor/components/PartSelectorPanel.vue
index a7f01588..c5ec0856 100644
--- a/src/component/Canvas/CanvasEditor/components/PartSelectorPanel.vue
+++ b/src/component/Canvas/CanvasEditor/components/PartSelectorPanel.vue
@@ -15,6 +15,20 @@
{{ t("Canvas.GarmentPartSelector") }}
+
-
+
diff --git a/src/component/Canvas/CanvasEditor/components/tools/OffsetTool.vue b/src/component/Canvas/CanvasEditor/components/tools/OffsetTool.vue
index 00288da3..822c05fb 100644
--- a/src/component/Canvas/CanvasEditor/components/tools/OffsetTool.vue
+++ b/src/component/Canvas/CanvasEditor/components/tools/OffsetTool.vue
@@ -1,84 +1,100 @@
-
+
+
-
+
-
+
+
-
-
+
+
+
+
+
+
+
diff --git a/src/component/Detail/detailRight/overallSetting/tools/AngleTool.vue b/src/component/Detail/detailRight/overallSetting/tools/AngleTool.vue
index c024a38e..1c6ae025 100644
--- a/src/component/Detail/detailRight/overallSetting/tools/AngleTool.vue
+++ b/src/component/Detail/detailRight/overallSetting/tools/AngleTool.vue
@@ -1,38 +1,73 @@
-
+
-
+ 
+
+ X: {{ left }}%
+ Y: {{ top }}%
+
+
+
-
-
- x:{{ tofix(data.left) }}% y:{{ tofix(data.top) }}%
+
+ X: {{ left }}%
+ Y: {{ top }}%
+
+
+
-
@@ -235,51 +282,17 @@
list.value.push(obj);
pingpuRef.value.updataList([{ action: ACTIONS.ADD, data: obj }]);
};
- watch(
- () => list.value,
- () => updateList(),
- { deep: true }
- );
// 监听列表变化属性变更
- const updateList = () => {
- const changeList = [];
- oldList.value.forEach((oldItem) => {
- const newItem = list.value.find((v) => v.token === oldItem.token);
- if (newItem) {
- const arr = findDiffProps(oldItem, newItem);
- arr.forEach((item) => {
- changeList.push({
- ...item,
- token: oldItem.token,
- action: ACTIONS.UPDATE,
- key: convertDotNotationToBracket(item.key),
- });
- });
- } else {
- changeList.push({
- token: oldItem.token,
- action: ACTIONS.DELETE,
- });
- }
- });
- oldList.value = deepCopy(list.value);
- if (changeList.length) {
- pingpuRef.value.updataList(changeList);
- }
- };
- // 递归查找不同的属性
- const findDiffProps = (obj1, obj2, diffProps = [], path = "") => {
- for (const key in obj1) {
- if (typeof obj1[key] === "object") {
- findDiffProps(obj1[key], obj2[key], diffProps, `${path}${key}.`);
- } else if (obj1[key] !== obj2[key]) {
- diffProps.push({
- key: `${path}${key}`,
- value: obj2[key],
- });
- }
- }
- return diffProps;
+ const updateList = (item, key, value) => {
+ if(key === "scale[0]") item.scale[1] = value;
+ pingpuRef.value.updataList([
+ {
+ token: item.token,
+ action: ACTIONS.UPDATE,
+ key,
+ value,
+ },
+ ]);
};
diff --git a/src/component/Canvas/OverallCanvas/index.vue b/src/component/Canvas/OverallCanvas/index.vue
index 93242d6e..0bc44351 100644
--- a/src/component/Canvas/OverallCanvas/index.vue
+++ b/src/component/Canvas/OverallCanvas/index.vue
@@ -263,7 +263,7 @@
case KEYS.FILL_GAPX:
case KEYS.FILL_GAPY:
let pattern = await setFill(
- props.list.find((v) => v.id === item.id)
+ props.list.find((v) => v.token === item.token)
);
object.set("fill", pattern);
break;
From 7a4fc0736d8bc9dc3075dd1626b3afbd10b151b9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=8E=E5=BF=97=E9=B9=8F?= <2916022834@qq.com>
Date: Thu, 15 Jan 2026 13:42:33 +0800
Subject: [PATCH 07/17] =?UTF-8?q?=E5=BE=88=E5=A4=9A=E5=BE=88=E5=A4=9A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/assets/icons/CBrush2.svg | 17 +
src/assets/icons/CEraser2.svg | 17 +
src/assets/icons/CMarquee.svg | 20 +
src/assets/images/canvas/add.png | Bin 0 -> 3749 bytes
src/assets/images/canvas/remove.png | Bin 0 -> 3094 bytes
src/assets/images/canvas/shubiao-l.png | Bin 0 -> 5355 bytes
src/assets/images/canvas/shubiao-r.png | Bin 0 -> 5384 bytes
.../components/PartSelectorPanel.vue | 107 +-
src/component/Canvas/CanvasEditor/index.vue | 11 +-
.../CanvasEditor/managers/PartManager.js | 1216 ++++-------------
.../CanvasEditor/managers/ToolManager.js | 43 +-
src/component/Canvas/OverallCanvas/demo.vue | 16 +-
src/component/Canvas/OverallCanvas/index.vue | 8 +
src/component/Canvas/canvasExample.vue | 18 +-
src/component/Canvas/test.vue | 2 +
15 files changed, 491 insertions(+), 984 deletions(-)
create mode 100644 src/assets/icons/CBrush2.svg
create mode 100644 src/assets/icons/CEraser2.svg
create mode 100644 src/assets/icons/CMarquee.svg
create mode 100644 src/assets/images/canvas/add.png
create mode 100644 src/assets/images/canvas/remove.png
create mode 100644 src/assets/images/canvas/shubiao-l.png
create mode 100644 src/assets/images/canvas/shubiao-r.png
diff --git a/src/assets/icons/CBrush2.svg b/src/assets/icons/CBrush2.svg
new file mode 100644
index 00000000..d9e38702
--- /dev/null
+++ b/src/assets/icons/CBrush2.svg
@@ -0,0 +1,17 @@
+
+
+
diff --git a/src/assets/icons/CEraser2.svg b/src/assets/icons/CEraser2.svg
new file mode 100644
index 00000000..ea475fa7
--- /dev/null
+++ b/src/assets/icons/CEraser2.svg
@@ -0,0 +1,17 @@
+
+
+
diff --git a/src/assets/icons/CMarquee.svg b/src/assets/icons/CMarquee.svg
new file mode 100644
index 00000000..517b2810
--- /dev/null
+++ b/src/assets/icons/CMarquee.svg
@@ -0,0 +1,20 @@
+
+
+
diff --git a/src/assets/images/canvas/add.png b/src/assets/images/canvas/add.png
new file mode 100644
index 0000000000000000000000000000000000000000..3fb5a6030e97d9440116115ec4d447c9f6aa648c
GIT binary patch
literal 3749
zcmb_f2{=^i8=u>4mFPx9XbdewW6rG1)PymzP6&lkb7tnun2Q-^#(pgoMT#P#NOdVo
zBvFdGrBEVEAw}i3%F=SPWc{BJp1a@s+~+^fS-$grzwcdt@Ao|uW53B_k(|050)bd$
zWy#nKzmc+g{#^Je2@d`YzZUpdx=IiTh1;_Gn
-
import { ref, defineProps, defineEmits, watch } from "vue";
const props = defineProps({
+ disabled: {
+ type: Boolean,
+ default: false,
+ },
defaultValue: {
default: "",
},
diff --git a/src/component/Detail/detailRight/overallSetting/tools/OffsetTool.vue b/src/component/Detail/detailRight/overallSetting/tools/OffsetTool.vue
index 00288da3..822c05fb 100644
--- a/src/component/Detail/detailRight/overallSetting/tools/OffsetTool.vue
+++ b/src/component/Detail/detailRight/overallSetting/tools/OffsetTool.vue
@@ -1,84 +1,100 @@
layer.isPrintTrimsGroup)?.children || [];
+ for(let layer of layers){
+ if(!layer.visible) continue;
+ let repeat = layer.fabricObjects?.[0]?.fill?.repeat || "no-repeat";
+ if(typeof repeat !== "string") repeat = "no-repeat";
+ if(repeat === "no-repeat"){
+ if(enhancedOptions.isPrintTrimsNoRepeat) continue;
+ }else{
+ if(enhancedOptions.isPrintTrimsRepeat) continue;
+ }
+ ptlids.push(layer.id);
+ const command = new ToggleChildLayerVisibilityCommand({
+ canvas: this.canvas,
+ layers: this.layers,
+ layerId: layer.id,
+ layerManager: this.layerManager,
+ });
+ await command.execute(false);
+ }
+ await this.changeCanvas();
+ }
+ const res = await this.exportManager.exportImage(enhancedOptions);
+ // 恢复特殊图层的显示状态
+ if(ptlids.length > 0){
+ for(let id of ptlids){
+ const command = new ToggleChildLayerVisibilityCommand({
+ canvas: this.canvas,
+ layers: this.layers,
+ layerId: id,
+ layerManager: this.layerManager,
+ });
+ await command.execute(true);
+ }
+ await this.changeCanvas();
+ }
+ return res;
} catch (error) {
console.warn("CanvasManager导出图片失败:", error);
throw error;
@@ -1533,7 +1577,7 @@ export class CanvasManager {
selectable: true,
hasControls: true,
hasBorders: true,
- specialType: SpecialType.PRINT_TRIMS_O,
+ isPrintTrims: true,
globalCompositeOperation: BlendMode.MULTIPLY,
});
resolve(fabricImage);
@@ -1547,7 +1591,7 @@ export class CanvasManager {
visible: true,
locked: false,
opacity: 1.0,
- specialType: SpecialType.PRINT_TRIMS_L,
+ isPrintTrims: true,
blendMode: BlendMode.MULTIPLY,
fabricObjects: [image.toObject(["id", "layerId", "layerName"])],
metadata: {sourceData: item},
@@ -1601,7 +1645,7 @@ export class CanvasManager {
width: image.width,
height: image.height,
},
- specialType: SpecialType.REPEAT_O,
+ isPrintTrims: true,
});
this.canvas.add(rect);
let layer = createLayer({
@@ -1611,7 +1655,7 @@ export class CanvasManager {
visible: true,
locked: true,
opacity: 1,
- specialType: SpecialType.REPEAT_L,
+ isPrintTrims: true,
blendMode: BlendMode.MULTIPLY,
fabricObjects: [rect.toObject(["id", "layerId", "layerName"])],
metadata: {sourceData: item},
@@ -1630,7 +1674,7 @@ export class CanvasManager {
// })
// children.push(layer);
// }
- // if(children.length === 0) return;
+ if(children.length === 0) return;
const groupRect = new fabric.Rect({});
await this.setObjecCliptInfo(groupRect);
// 插入组图层
@@ -1646,11 +1690,8 @@ export class CanvasManager {
children: children,
clippingMask: groupRect.toObject(),
isPrintTrimsGroup: true,
- specialType: SpecialType.PRINT_TRIMS_G,
});
this.layers.value.splice(groupIndex, 0, groupLayer);
- console.log("==========layers", [...this.layers.value]);
-
}
/**
diff --git a/src/component/Canvas/CanvasEditor/managers/ToolManager.js b/src/component/Canvas/CanvasEditor/managers/ToolManager.js
index dd1c9fa5..7c0427b6 100644
--- a/src/component/Canvas/CanvasEditor/managers/ToolManager.js
+++ b/src/component/Canvas/CanvasEditor/managers/ToolManager.js
@@ -502,7 +502,6 @@ export class ToolManager {
if (!this.canvas) return;
this.canvas.isDrawingMode = false;
this.canvas.selection = true;
-
}
/**
@@ -511,7 +510,7 @@ export class ToolManager {
*/
checkToolCanOperateSelectedObject() {
const layer = this.layerManager?.getActiveLayer();
- const isSpecialLayer = !!layer?.specialType;
+ const isSpecialLayer = !!layer?.isPrintTrims || !!layer?.isPrintTrimsGroup;
if (isSpecialLayer) {
this._disableBrushIndicator();
this.canvas.defaultCursor = "not-allowed";
diff --git a/src/component/Canvas/CanvasEditor/utils/layerHelper.js b/src/component/Canvas/CanvasEditor/utils/layerHelper.js
index c5884fbc..7a164fe0 100644
--- a/src/component/Canvas/CanvasEditor/utils/layerHelper.js
+++ b/src/component/Canvas/CanvasEditor/utils/layerHelper.js
@@ -25,18 +25,6 @@ export const SpecialLayerId = {
SPECIAL_GROUP: "group_special", // 特殊组
COLOR: "special_color", // 颜色图层
}
-/**
- * 特殊类型
- */
-export const SpecialType = {
- PRINT_TRIMS_G: "print_trims_group", // 印花和元素图层组
- PRINT_TRIMS_L: "print_trims_layer", // 印花和元素图层
- PRINT_TRIMS_O: "print_trims_object", // 印花和元素图层对象
- REPEAT_L: "repeat_layer",// 平铺图层
- REPEAT_O: "repeat_object",// 平铺图层对象
-}
-
-
/**
diff --git a/src/component/Canvas/canvasExample.vue b/src/component/Canvas/canvasExample.vue
index 6c225570..4d270e12 100644
--- a/src/component/Canvas/canvasExample.vue
+++ b/src/component/Canvas/canvasExample.vue
@@ -335,20 +335,20 @@ const otherData = {
color: {rgba: {r:255,g:0,b:0,a:1}},
printObject: {
prints: [
- // {
- // ifSingle: false,
- // level2Type: "Pattern",
- // designType: "Library",
- // path: "/src/assets/images/canvas/yinhua1.jpg",
- // location: [250, 780],
- // scale: [0.3, 0.4],
- // angle: 0,
- // },
{
ifSingle: false,
level2Type: "Pattern",
designType: "Library",
path: "/src/assets/images/canvas/yinhua1.jpg",
+ location: [250, 780],
+ scale: [0.3, 0.4],
+ angle: 0,
+ },
+ {
+ ifSingle: true,
+ level2Type: "Pattern",
+ designType: "Library",
+ path: "/src/assets/images/canvas/yinhua1.jpg",
location: [550, 650],
scale: [0.15, 0.2],
angle: 0,
From 810dd2351b235067eefc4efd7c8d209b82bd19c6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=8E=E5=BF=97=E9=B9=8F?= <2916022834@qq.com>
Date: Wed, 14 Jan 2026 14:43:43 +0800
Subject: [PATCH 05/17] 111
---
.../components/PartSelectorPanel.vue | 4 +
.../CanvasEditor/components/ToolsSidebar.vue | 26 +-
src/component/Canvas/CanvasEditor/index.vue | 17 +-
.../CanvasEditor/managers/CanvasManager.js | 13 +
.../CanvasEditor/managers/PartManager.js | 941 ++++++++++++++++++
.../CanvasEditor/managers/ToolManager.js | 34 +-
6 files changed, 1008 insertions(+), 27 deletions(-)
create mode 100644 src/component/Canvas/CanvasEditor/managers/PartManager.js
diff --git a/src/component/Canvas/CanvasEditor/components/PartSelectorPanel.vue b/src/component/Canvas/CanvasEditor/components/PartSelectorPanel.vue
index 27632237..a7f01588 100644
--- a/src/component/Canvas/CanvasEditor/components/PartSelectorPanel.vue
+++ b/src/component/Canvas/CanvasEditor/components/PartSelectorPanel.vue
@@ -94,6 +94,10 @@
type: Object,
required: true,
},
+ partManager: {
+ type: Object,
+ required: true,
+ },
layerManager: {
type: Object,
required: true,
diff --git a/src/component/Canvas/CanvasEditor/components/ToolsSidebar.vue b/src/component/Canvas/CanvasEditor/components/ToolsSidebar.vue
index 379fa38c..b1f29cb0 100644
--- a/src/component/Canvas/CanvasEditor/components/ToolsSidebar.vue
+++ b/src/component/Canvas/CanvasEditor/components/ToolsSidebar.vue
@@ -166,19 +166,19 @@ const normalToolsList = ref([
icon: { name: "CFont", size: "20" },
class: "text-btn",
},
-// {
-// id: OperationType.PART,
-// title: t("Canvas.GarmentPartSelector"),
-// action: () => selectTool(OperationType.PART),
-// icon: { name: "CPart", size: "28" },
-// class: "part-btn",
-// activeList: [
-// OperationType.PART,
-// OperationType.PART_RECTANGLE,
-// OperationType.PART_BRUSH,
-// OperationType.PART_ERASER,
-// ],
-// },
+ {
+ id: OperationType.PART,
+ title: t("Canvas.GarmentPartSelector"),
+ action: () => selectTool(OperationType.PART),
+ icon: { name: "CPart", size: "28" },
+ class: "part-btn",
+ activeList: [
+ OperationType.PART,
+ OperationType.PART_RECTANGLE,
+ OperationType.PART_BRUSH,
+ OperationType.PART_ERASER,
+ ],
+ },
{
id: "help",
title: t("Canvas.help"),
diff --git a/src/component/Canvas/CanvasEditor/index.vue b/src/component/Canvas/CanvasEditor/index.vue
index 58ec3023..d927f742 100644
--- a/src/component/Canvas/CanvasEditor/index.vue
+++ b/src/component/Canvas/CanvasEditor/index.vue
@@ -17,6 +17,7 @@ import { KeyboardManager } from "./managers/events/KeyboardManager.js";
import CanvasConfig from "./config/canvasConfig.js";
import { LiquifyManager } from "./managers/liquify/LiquifyManager";
import { SelectionManager } from "./managers/selection/SelectionManager";
+import { PartManager } from "./managers/PartManager";
import { RedGreenModeManager } from "./managers/RedGreenModeManager";
import texturePresetManager from "./managers/brushes/TexturePresetManager";
import { BrushStore } from "./store/BrushStore";
@@ -185,6 +186,7 @@ let keyboardManager = null;
let toolManager = null;
let liquifyManager = null;
let selectionManager = null;
+let partManager = null;
let redGreenModeManager = null;
// 快捷键帮助模态框状态
@@ -226,6 +228,7 @@ function handleCanvasInit(isLoadJson = false) {
keyboardManager,
liquifyManager,
selectionManager,
+ partManager,
redGreenModeManager,
});
}
@@ -378,6 +381,13 @@ onMounted(async () => {
});
canvasManager.setSelectionManager(selectionManager);
+ // 初始化部件选择管理器
+ partManager = new PartManager({
+ canvas: canvasManager.canvas,
+ layerManager,
+ });
+ canvasManager.setPartManager(partManager);
+
if (props.canvasJSON) {
// 如果传入了初始JSON数据，加载到画布上
if (typeof props.canvasJSON === "string") {
@@ -537,6 +547,7 @@ onBeforeUnmount(async () => {
toolManager?.dispose?.();
liquifyManager?.dispose?.();
selectionManager?.dispose?.();
+ partManager?.dispose?.();
redGreenModeManager?.dispose?.();
// minimapManager?.dispose?.();
canvasManager = null;
@@ -546,6 +557,7 @@ onBeforeUnmount(async () => {
toolManager = null;
liquifyManager = null;
selectionManager = null;
+ partManager = null;
redGreenModeManager = null;
// fabric.Object.prototype.controls.deleteControl = undefined;
@@ -1254,16 +1266,17 @@ defineExpose({
/>
-
+ />
{
+ // 如果选区功能未激活，不处理事件
+ if (!this.isActive) return;
+
+ // 如果点击的是已有对象且不是选区对象，则不处理
+ if (
+ options.target &&
+ options.target.id !== this.selectionId &&
+ options.target.selectable !== false &&
+ options.target.type !== "selection"
+ ) {
+ return;
+ }
+
+ // 阻止事件冒泡，避免与 CanvasEventManager 冲突
+ options.e.stopPropagation();
+
+ // 根据选区类型执行不同的起始操作
+ switch (this.selectionType) {
+ case OperationType.LASSO:
+ this.startFreeSelection(options);
+ break;
+ case OperationType.LASSO_ELLIPSE:
+ this.startEllipseSelection(options);
+ break;
+ case OperationType.LASSO_RECTANGLE:
+ this.startRectangleSelection(options);
+ break;
+ }
+ };
+
+ // 鼠标移动事件处理
+ this._mouseMoveHandler = (options) => {
+ // 如果选区功能未激活或没有正在绘制的对象，不处理事件
+ if (!this.isActive || !this.drawingObject) return;
+
+ // 阻止事件冒泡
+ options.e.stopPropagation();
+
+ // 根据选区类型执行不同的绘制操作
+ switch (this.selectionType) {
+ case OperationType.LASSO_RECTANGLE:
+ this.drawRectangleSelection(options);
+ break;
+ case OperationType.LASSO_ELLIPSE:
+ this.drawEllipseSelection(options);
+ break;
+ case OperationType.LASSO:
+ this.drawFreeSelection(options);
+ break;
+ }
+ };
+
+ // 鼠标抬起事件处理
+ this._mouseUpHandler = (options) => {
+ // 如果选区功能未激活或没有正在绘制的对象，不处理事件
+ if (!this.isActive || !this.drawingObject) return;
+
+ // 阻止事件冒泡
+ if (options && options.e) {
+ options.e.stopPropagation();
+ }
+
+ // 根据选区类型执行不同的完成操作
+ switch (this.selectionType) {
+ case OperationType.LASSO_RECTANGLE:
+ this.endRectangleSelection();
+ break;
+ case OperationType.LASSO_ELLIPSE:
+ this.endEllipseSelection();
+ break;
+ case OperationType.LASSO:
+ this.endFreeSelection();
+ break;
+ }
+
+ // 如果有命令管理器，使用命令模式记录选区创建
+ if (this.commandManager && this.selectionObject) {
+ this.commandManager.execute(
+ new CreateSelectionCommand({
+ canvas: this.canvas,
+ selectionManager: this,
+ selectionObject: this.selectionObject,
+ selectionType: this.selectionType,
+ })
+ );
+ }
+ };
+
+ // 键盘事件处理
+ this._keyDownHandler = (event) => {
+ // 只在选区功能激活时处理键盘事件
+ if (!this.isActive) return;
+
+ if (event.key === "Escape") {
+ // ESC键取消当前选区操作
+ if (this.drawingObject) {
+ this.canvas.remove(this.drawingObject);
+ this.drawingObject = null;
+ this.startPoint = null;
+ }
+ // 清除已有选区
+ else if (this.selectionObject) {
+ if (this.commandManager) {
+ this.commandManager.execute(
+ new ClearSelectionCommand({
+ selectionManager: this,
+ })
+ );
+ } else {
+ this.clearSelection();
+ }
+ }
+ }
+ };
+
+ // 添加事件监听
+ this.canvas.on("mouse:down", this._mouseDownHandler);
+ this.canvas.on("mouse:move", this._mouseMoveHandler);
+ this.canvas.on("mouse:up", this._mouseUpHandler);
+
+ // 添加键盘事件监听
+ document.addEventListener("keydown", this._keyDownHandler);
+ }
+
+ /**
+ * 清理事件监听
+ */
+ cleanupEvents() {
+ if (!this.canvas) return;
+
+ // 移除事件监听
+ if (this._mouseDownHandler) {
+ this.canvas.off("mouse:down", this._mouseDownHandler);
+ this._mouseDownHandler = null;
+ }
+ if (this._mouseMoveHandler) {
+ this.canvas.off("mouse:move", this._mouseMoveHandler);
+ this._mouseMoveHandler = null;
+ }
+ if (this._mouseUpHandler) {
+ this.canvas.off("mouse:up", this._mouseUpHandler);
+ this._mouseUpHandler = null;
+ }
+ if (this._keyDownHandler) {
+ document.removeEventListener("keydown", this._keyDownHandler);
+ this._keyDownHandler = null;
+ }
+ }
+
+ /**
+ * 获取选区对象
+ * @returns {Object} 选区对象
+ */
+ getSelectionObject() {
+ return this.selectionObject;
+ }
+
+ /**
+ * 获取选区路径
+ * @returns {Array|String} 选区路径数据
+ */
+ getSelectionPath() {
+ return this.selectionPath;
+ }
+
+ /**
+ * 获取羽化值
+ * @returns {Number} 羽化值
+ */
+ getFeatherAmount() {
+ return this.featherAmount;
+ }
+
+ /**
+ * 设置羽化值
+ * @param {Number} amount 羽化值
+ */
+ setFeatherAmount(amount) {
+ this.featherAmount = amount;
+ return this.updateSelectionAppearance();
+ }
+
+ /**
+ * 设置选区对象
+ * @param {Object} object 选区对象
+ */
+ setSelectionObject(object) {
+ // 如果已存在选区，先移除
+ if (this.selectionObject) {
+ this.removeSelectionFromCanvas();
+ }
+
+ // 更新选区对象
+ this.selectionObject = object;
+ this.selectionPath = object.path;
+ this.selectionId = object.id || generateId();
+
+ // 更新外观
+ this.updateSelectionAppearance();
+
+ // 添加到画布（确保在顶层）
+ if (this.canvas && this.selectionObject) {
+ this.canvas.add(this.selectionObject);
+ this.canvas.bringToFront(this.selectionObject);
+ this.canvas.renderAll();
+ }
+
+ // 触发选区变化回调
+ if (this.onSelectionChanged && typeof this.onSelectionChanged === "function") {
+ this.onSelectionChanged();
+ }
+
+ return true;
+ }
+
+ /**
+ * 从路径数据设置选区
+ * @param {Array|String} path 选区路径数据
+ */
+ setSelectionFromPath(path) {
+ if (!path) return false;
+
+ // 创建选区对象
+ const selectionObj = new fabric.Path(path, {
+ ...this.selectionStyle,
+ id: `selection_${Date.now()}`,
+ name: "selection",
+ });
+
+ // 设置选区
+ return this.setSelectionObject(selectionObj);
+ }
+
+ /**
+ * 更新选区外观
+ */
+ updateSelectionAppearance() {
+ if (!this.selectionObject) return false;
+
+ // 应用基本样式
+ Object.assign(this.selectionObject, this.selectionStyle);
+
+ // 应用羽化效果
+ if (this.featherAmount > 0) {
+ this.selectionObject.shadow = new fabric.Shadow({
+ color: "rgba(0, 150, 255, 0.5)",
+ blur: this.featherAmount,
+ offsetX: 0,
+ offsetY: 0,
+ });
+ } else {
+ this.selectionObject.shadow = null;
+ }
+
+ // 更新画布
+ this.canvas.renderAll();
+ return true;
+ }
+
+ /**
+ * 移除选区
+ */
+ removeSelectionFromCanvas() {
+ if (this.canvas && this.selectionObject) {
+ this.canvas.remove(this.selectionObject);
+ this.canvas.renderAll();
+ }
+ }
+
+ /**
+ * 清除选区
+ */
+ clearSelection() {
+ // 移除选区对象
+ this.removeSelectionFromCanvas();
+
+ // 重置选区状态
+ this.selectionObject = null;
+ this.selectionPath = null;
+ this.selectionId = null;
+ this.featherAmount = 0;
+
+ // 触发选区变化回调
+ if (this.onSelectionChanged && typeof this.onSelectionChanged === "function") {
+ this.onSelectionChanged();
+ }
+
+ return true;
+ }
+
+ /**
+ * 反转选区
+ */
+ async invertSelection() {
+ if (!this.canvas || !this.selectionObject) return false;
+
+ // 获取画布范围
+ const canvasRect = new fabric.Rect({
+ left: 0,
+ top: 0,
+ width: this.canvas.width,
+ height: this.canvas.height,
+ selectable: false,
+ });
+
+ // 创建反选路径
+ let invertedPath;
+ try {
+ invertedPath = canvasRect.subtractPathFromRect(this.selectionObject.path);
+ } catch (error) {
+ console.error("无法反转选区:", error);
+ return false;
+ }
+
+ // 设置新的选区
+ const newSelection = new fabric.Path(invertedPath.path, {
+ ...this.selectionStyle,
+ id: `selection_${Date.now()}`,
+ name: "selection",
+ });
+
+ return this.setSelectionObject(newSelection);
+ }
+
+ /**
+ * 添加到选区
+ * @param {Object} newSelection 要添加的选区对象
+ */
+ async addToSelection(newSelection) {
+ if (!this.canvas) return false;
+
+ // 如果当前没有选区，直接使用新选区
+ if (!this.selectionObject) {
+ return this.setSelectionObject(newSelection);
+ }
+
+ // 合并选区
+ let combinedPath;
+ try {
+ combinedPath = this.selectionObject.union(newSelection);
+ } catch (error) {
+ console.error("无法添加到选区:", error);
+ return false;
+ }
+
+ // 设置新的选区
+ const combinedSelection = new fabric.Path(combinedPath.path, {
+ ...this.selectionStyle,
+ id: `selection_${Date.now()}`,
+ name: "selection",
+ });
+
+ return this.setSelectionObject(combinedSelection);
+ }
+
+ /**
+ * 从选区中移除
+ * @param {Object} removeSelection 要移除的选区对象
+ */
+ async removeFromSelection(removeSelection) {
+ if (!this.canvas || !this.selectionObject) return false;
+
+ // 从当前选区中减去新选区
+ let resultPath;
+ try {
+ resultPath = this.selectionObject.subtract(removeSelection);
+ } catch (error) {
+ console.error("无法从选区中移除:", error);
+ return false;
+ }
+
+ // 设置新的选区
+ const newSelection = new fabric.Path(resultPath.path, {
+ ...this.selectionStyle,
+ id: `selection_${Date.now()}`,
+ name: "selection",
+ });
+
+ return this.setSelectionObject(newSelection);
+ }
+
+ /**
+ * 应用羽化效果
+ * @param {Number} amount 羽化值
+ */
+ async featherSelection(amount) {
+ if (!this.selectionObject) return false;
+
+ // 更新羽化值
+ this.featherAmount = amount;
+
+ // 更新选区外观
+ return this.updateSelectionAppearance();
+ }
+
+ /**
+ * 检查对象是否在选区内
+ * @param {Object} object 要检查的对象
+ * @returns {Boolean} 是否在选区内
+ */
+ isObjectInSelection(object) {
+ if (!this.selectionObject || !object) return false;
+
+ // 获取对象的边界框
+ const bounds = object.getBoundingRect();
+ const { left, top, width, height } = bounds;
+
+ // 检查对象的中心点和四个角是否在选区内
+ const centerX = left + width / 2;
+ const centerY = top + height / 2;
+
+ // 检查中心点
+ if (this.isPointInSelection(centerX, centerY)) return true;
+
+ // 检查四个角
+ if (this.isPointInSelection(left, top)) return true;
+ if (this.isPointInSelection(left + width, top)) return true;
+ if (this.isPointInSelection(left, top + height)) return true;
+ if (this.isPointInSelection(left + width, top + height)) return true;
+
+ return false;
+ }
+
+ /**
+ * 检查点是否在选区内
+ * @param {Number} x X坐标
+ * @param {Number} y Y坐标
+ * @returns {Boolean} 是否在选区内
+ */
+ isPointInSelection(x, y) {
+ if (!this.selectionObject) return false;
+
+ // 使用fabric.js的containsPoint方法判断点是否在选区内
+ return this.selectionObject.containsPoint({ x, y });
+ }
+
+ /**
+ * 开始自由选区
+ * @param {Object} options 事件对象
+ */
+ startFreeSelection(options) {
+ if (!this.canvas || !this.isActive) return;
+
+ // 获取鼠标位置
+ const pointer = this.canvas.getPointer(options.e);
+ this.startPoint = pointer;
+
+ // 创建用于绘制轨迹的点数组
+ this.drawingPoints = [pointer];
+
+ // 初始化SVG路径字符串
+ this.currentPathString = `M ${pointer.x} ${pointer.y}`;
+
+ // 创建临时路径对象用于实时显示
+ this.drawingObject = new fabric.Path(this.currentPathString, {
+ stroke: this.selectionStyle.stroke,
+ strokeWidth: this.selectionStyle.strokeWidth,
+ strokeDashArray: this.selectionStyle.strokeDashArray,
+ fill: "transparent",
+ selectable: false,
+ evented: false,
+ strokeLineCap: "round",
+ strokeLineJoin: "round",
+ });
+
+ // 添加到画布
+ this.canvas.add(this.drawingObject);
+ this.canvas.renderAll();
+ }
+
+ /**
+ * 绘制自由选区
+ * @param {Object} options 事件对象
+ */
+ drawFreeSelection(options) {
+ if (!this.drawingObject || !this.drawingPoints || !this.isActive) return;
+
+ // 获取鼠标位置
+ const pointer = this.canvas.getPointer(options.e);
+
+ // 添加新的点，但避免添加过于密集的点
+ const lastPoint = this.drawingPoints[this.drawingPoints.length - 1];
+ const distance = Math.sqrt(
+ Math.pow(pointer.x - lastPoint.x, 2) + Math.pow(pointer.y - lastPoint.y, 2)
+ );
+
+ // 只有当距离大于2像素时才添加新点，避免路径过于复杂
+ if (distance > 2) {
+ this.drawingPoints.push(pointer);
+
+ // 更新路径字符串
+ this.currentPathString += ` L ${pointer.x} ${pointer.y}`;
+
+ // 移除旧的绘制对象
+ this.canvas.remove(this.drawingObject);
+
+ // 创建新的路径对象
+ this.drawingObject = new fabric.Path(this.currentPathString, {
+ stroke: this.selectionStyle.stroke,
+ strokeWidth: this.selectionStyle.strokeWidth,
+ strokeDashArray: this.selectionStyle.strokeDashArray,
+ fill: "transparent",
+ selectable: false,
+ evented: false,
+ strokeLineCap: "round",
+ strokeLineJoin: "round",
+ });
+
+ // 重新添加到画布
+ this.canvas.add(this.drawingObject);
+ this.canvas.renderAll();
+ }
+ }
+
+ /**
+ * 结束自由选区
+ */
+ endFreeSelection() {
+ if (!this.drawingObject || !this.drawingPoints || !this.isActive) return;
+
+ // 检查是否有足够的点来形成选区
+ if (this.drawingPoints.length < 3) {
+ // 点太少，清除绘制对象
+ this.canvas.remove(this.drawingObject);
+ this.drawingObject = null;
+ this.drawingPoints = null;
+ this.startPoint = null;
+ this.currentPathString = null;
+ return;
+ }
+
+ // 自动闭合路径 - 连接最后一点到第一点
+ const firstPoint = this.drawingPoints[0];
+ const lastPoint = this.drawingPoints[this.drawingPoints.length - 1];
+ const closingDistance = Math.sqrt(
+ Math.pow(firstPoint.x - lastPoint.x, 2) + Math.pow(firstPoint.y - lastPoint.y, 2)
+ );
+
+ // 如果首尾距离较大，自动添加闭合线段
+ let finalPathString = this.currentPathString;
+ if (closingDistance > 10) {
+ finalPathString += ` L ${firstPoint.x} ${firstPoint.y}`;
+ }
+ finalPathString += " Z"; // 闭合路径
+
+ // 创建最终选区对象
+ const selectionObj = new fabric.Path(finalPathString, {
+ ...this.selectionStyle,
+ id: `selection_${Date.now()}`,
+ name: "selection",
+ fill: this.selectionStyle.fill, // 恢复填充
+ });
+
+ // 移除绘制中的临时对象
+ this.canvas.remove(this.drawingObject);
+
+ // 重置绘制状态
+ this.drawingObject = null;
+ this.drawingPoints = null;
+ this.startPoint = null;
+ this.currentPathString = null;
+
+ // 设置选区
+ this.setSelectionObject(selectionObj);
+ }
+
+ /**
+ * 开始矩形选区
+ * @param {Object} options 事件对象
+ */
+ startRectangleSelection(options) {
+ if (!this.canvas || !this.isActive) return;
+
+ // 获取鼠标位置
+ const pointer = this.canvas.getPointer(options.e);
+ this.startPoint = pointer;
+
+ // 创建矩形对象
+ this.drawingObject = new fabric.Rect({
+ left: pointer.x,
+ top: pointer.y,
+ width: 0,
+ height: 0,
+ ...this.selectionStyle,
+ fill: "transparent", // 在绘制过程中不显示填充
+ });
+
+ // 添加到画布
+ this.canvas.add(this.drawingObject);
+ this.canvas.renderAll();
+ }
+
+ /**
+ * 绘制矩形选区
+ * @param {Object} options 事件对象
+ */
+ drawRectangleSelection(options) {
+ if (!this.drawingObject || !this.startPoint || !this.isActive) return;
+
+ // 获取鼠标位置
+ const pointer = this.canvas.getPointer(options.e);
+
+ // 计算宽度和高度
+ const width = Math.abs(pointer.x - this.startPoint.x);
+ const height = Math.abs(pointer.y - this.startPoint.y);
+
+ // 确定左上角坐标
+ const left = Math.min(this.startPoint.x, pointer.x);
+ const top = Math.min(this.startPoint.y, pointer.y);
+
+ // 更新矩形
+ this.drawingObject.set({
+ left: left,
+ top: top,
+ width: width,
+ height: height,
+ });
+
+ this.canvas.renderAll();
+ }
+
+ /**
+ * 结束矩形选区
+ */
+ endRectangleSelection() {
+ if (!this.drawingObject || !this.startPoint || !this.isActive) return;
+
+ // 将矩形转换为路径
+ const left = this.drawingObject.left;
+ const top = this.drawingObject.top;
+ const width = this.drawingObject.width;
+ const height = this.drawingObject.height;
+
+ // 如果矩形太小，忽略
+ if (width < 5 || height < 5) {
+ this.canvas.remove(this.drawingObject);
+ this.drawingObject = null;
+ this.startPoint = null;
+ return;
+ }
+
+ // 创建矩形路径字符串
+ const pathString = `M ${left} ${top} L ${left + width} ${top} L ${
+ left + width
+ } ${top + height} L ${left} ${top + height} Z`;
+
+ // 创建最终选区对象
+ const selectionObj = new fabric.Path(pathString, {
+ ...this.selectionStyle,
+ id: `selection_${Date.now()}`,
+ name: "selection",
+ fill: this.selectionStyle.fill, // 恢复填充
+ });
+
+ // 移除绘制中的临时对象
+ this.canvas.remove(this.drawingObject);
+
+ // 重置绘制状态
+ this.drawingObject = null;
+ this.startPoint = null;
+
+ // 设置选区
+ this.setSelectionObject(selectionObj);
+ }
+
+ /**
+ * 开始椭圆选区
+ * @param {Object} options 事件对象
+ */
+ startEllipseSelection(options) {
+ if (!this.canvas || !this.isActive) return;
+
+ // 获取鼠标位置
+ const pointer = this.canvas.getPointer(options.e);
+ this.startPoint = pointer;
+
+ // 创建椭圆对象
+ this.drawingObject = new fabric.Ellipse({
+ left: pointer.x,
+ top: pointer.y,
+ rx: 0,
+ ry: 0,
+ ...this.selectionStyle,
+ fill: "transparent", // 在绘制过程中不显示填充
+ // originX: "left",
+ // originY: "top",
+ originX: "center",
+ originY: "center",
+ });
+
+ // 添加到画布
+ this.canvas.add(this.drawingObject);
+ this.canvas.renderAll();
+ }
+
+ /**
+ * 绘制椭圆选区
+ * @param {Object} options 事件对象
+ */
+ drawEllipseSelection(options) {
+ if (!this.drawingObject || !this.startPoint || !this.isActive) return;
+
+ // 获取鼠标位置
+ const pointer = this.canvas.getPointer(options.e);
+
+ // 计算半径
+ const rx = Math.abs(pointer.x - this.startPoint.x) / 2;
+ const ry = Math.abs(pointer.y - this.startPoint.y) / 2;
+
+ // 确定中心坐标
+ const left = Math.min(this.startPoint.x, pointer.x);
+ const top = Math.min(this.startPoint.y, pointer.y);
+
+ // 更新椭圆
+ this.drawingObject.set({
+ left: left,
+ top: top,
+ rx: rx,
+ ry: ry,
+ originX: "left",
+ originY: "top",
+ });
+
+ this.canvas.renderAll();
+ }
+
+ /**
+ * 结束椭圆选区
+ */
+ endEllipseSelection() {
+ if (!this.drawingObject || !this.startPoint || !this.isActive) return;
+
+ // 获取椭圆参数
+ const { left, top, rx, ry } = this.drawingObject;
+
+ // 如果椭圆太小，忽略
+ if (rx < 2 || ry < 2) {
+ this.canvas.remove(this.drawingObject);
+ this.drawingObject = null;
+ this.startPoint = null;
+ return;
+ }
+
+ // 计算中心点
+ const cx = left + rx;
+ const cy = top + ry;
+
+ // 将椭圆转换为路径字符串
+ const pathString = this.ellipseToSVGPath(cx, cy, rx, ry);
+
+ // 创建最终选区对象
+ const selectionObj = new fabric.Path(pathString, {
+ ...this.selectionStyle,
+ id: `selection_${Date.now()}`,
+ name: "selection",
+ fill: this.selectionStyle.fill, // 恢复填充
+ });
+
+ // 移除绘制中的临时对象
+ this.canvas.remove(this.drawingObject);
+
+ // 重置绘制状态
+ this.drawingObject = null;
+ this.startPoint = null;
+
+ // 设置选区
+ this.setSelectionObject(selectionObj);
+ }
+
+ /**
+ * 将椭圆转换为SVG路径字符串
+ * @param {Number} cx 中心点X坐标
+ * @param {Number} cy 中心点Y坐标
+ * @param {Number} rx X半径
+ * @param {Number} ry Y半径
+ * @returns {String} SVG路径字符串
+ */
+ ellipseToSVGPath(cx, cy, rx, ry) {
+ // 使用椭圆弧命令创建完整椭圆
+ return `M ${cx - rx} ${cy} A ${rx} ${ry} 0 1 0 ${
+ cx + rx
+ } ${cy} A ${rx} ${ry} 0 1 0 ${cx - rx} ${cy} Z`;
+ }
+
+ /**
+ * 设置选区工具
+ * @param {string} type 选区类型：OperationType.LASSO, OperationType.LASSO_RECTANGLE, OperationType.LASSO_ELLIPSE
+ */
+ setSelectionType(type) {
+ this.selectionType = type;
+
+ // 如果正在绘制，清除临时对象
+ if (this.drawingObject) {
+ this.canvas.remove(this.drawingObject);
+ this.drawingObject = null;
+ this.startPoint = null;
+ }
+ }
+
+ /**
+ * 设置选区工具的鼠标事件
+ */
+ setupSelectionEvents() {
+ // 选区事件现在通过 setCurrentTool 方法管理
+ // 这个方法现在主要用于刷新或重置事件监听
+ if (!this.canvas || !this.isActive) return;
+
+ // 确保选区处于激活状态
+ if (this.tools.includes(this.currentTool)) {
+ this.isActive = true;
+ // 如果事件还没有初始化，初始化它们
+ if (!this._mouseDownHandler) {
+ this.initEvents();
+ }
+ }
+ }
+
+ /**
+ * 清理资源
+ */
+ dispose() {
+ this.cleanupEvents();
+ this.clearSelection();
+ this.canvas = null;
+ this.commandManager = null;
+ this.layerManager = null;
+ }
+}
diff --git a/src/component/Canvas/CanvasEditor/managers/ToolManager.js b/src/component/Canvas/CanvasEditor/managers/ToolManager.js
index 7c0427b6..db048368 100644
--- a/src/component/Canvas/CanvasEditor/managers/ToolManager.js
+++ b/src/component/Canvas/CanvasEditor/managers/ToolManager.js
@@ -190,30 +190,26 @@ export class ToolManager {
[OperationType.PART]: {
name: "部件选取工具",
icon: "part",
- cursor: "crosshair",
- // setup: this.setupLassoTool.bind(this),
- specialLayerDisabled: true,
+ cursor: "default",
+ setup: this.setupPartTool.bind(this),
},
[OperationType.PART_RECTANGLE]: {
name: "部件选取工具-矩形",
icon: "part",
- cursor: "crosshair",
- // setup: this.setupRectangleLassoTool.bind(this),
- specialLayerDisabled: true,
+ cursor: "default",
+ setup: this.setupPartTool.bind(this),
},
[OperationType.PART_BRUSH]: {
name: "部件选取工具-画笔",
icon: "part",
- cursor: "crosshair",
- // setup: this.setupEllipseLassoTool.bind(this),
- specialLayerDisabled: true,
+ cursor: "default",
+ setup: this.setupPartTool.bind(this),
},
[OperationType.PART_ERASER]: {
name: "部件选取工具-橡皮擦",
icon: "part",
- cursor: "crosshair",
- // setup: this.setupEllipseLassoTool.bind(this),
- specialLayerDisabled: true,
+ cursor: "default",
+ setup: this.setupPartTool.bind(this),
},
// 红绿图模式专用工具
@@ -704,6 +700,20 @@ export class ToolManager {
}
}
+ /**
+ * 设置部件选取工具
+ */
+ setupPartTool() {
+ if (!this.canvas) return;
+ if (this.checkToolCanOperateSelectedObject()) return;
+ this.canvas.isDrawingMode = false;
+ this.canvas.selection = false;
+
+ if (this.canvasManager && this.canvasManager.partManager) {
+ this.canvasManager.partManager.setCurrentTool(OperationType.PART);
+ }
+ }
+
/**
* 设置波浪工具
*/
From 9912f310ec3995c5ee5b991ea582fd2236c42c05 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=8E=E5=BF=97=E9=B9=8F?= <2916022834@qq.com>
Date: Wed, 14 Jan 2026 15:08:25 +0800
Subject: [PATCH 06/17] token
---
src/component/Canvas/OverallCanvas/demo.vue | 123 ++++++++++---------
src/component/Canvas/OverallCanvas/index.vue | 2 +-
2 files changed, 69 insertions(+), 56 deletions(-)
diff --git a/src/component/Canvas/OverallCanvas/demo.vue b/src/component/Canvas/OverallCanvas/demo.vue
index 9446d30e..dd5331e5 100644
--- a/src/component/Canvas/OverallCanvas/demo.vue
+++ b/src/component/Canvas/OverallCanvas/demo.vue
@@ -25,49 +25,95 @@
-
+
+
diff --git a/src/component/Detail/detailRight/overallSetting/tools/MySelect.vue b/src/component/Detail/detailRight/overallSetting/tools/MySelect.vue
index 146a7d8d..b484d864 100644
--- a/src/component/Detail/detailRight/overallSetting/tools/MySelect.vue
+++ b/src/component/Detail/detailRight/overallSetting/tools/MySelect.vue
@@ -5,6 +5,7 @@
@change="change"
:defaultValue="defaultValue"
@dropdownVisibleChange="dropdownVisibleChange"
+ :disabled="disabled"
>
+
+
-
+
-
+
+
-
-
+
+
+
+
+
+
+
diff --git a/src/component/Canvas/CanvasEditor/components/SelectMenuPanel/index.vue b/src/component/Canvas/CanvasEditor/components/SelectMenuPanel/index.vue
index f7ab1ecc..9225105f 100644
--- a/src/component/Canvas/CanvasEditor/components/SelectMenuPanel/index.vue
+++ b/src/component/Canvas/CanvasEditor/components/SelectMenuPanel/index.vue
@@ -178,11 +178,7 @@
import { ref, onMounted, watch, onUnmounted, reactive } from "vue";
import { useI18n } from "vue-i18n";
const { t } = useI18n();
- import {
- OperationType,
- SpecialLayerId,
- SpecialType,
- } from "../../utils/layerHelper";
+ import { OperationType, SpecialLayerId } from "../../utils/layerHelper";
import { loadImageUrlToLayer } from "../../utils/imageHelper";
import {
calculateRotatedTopLeftDeg,
@@ -283,9 +279,6 @@
const getActiveObject = (e) => {
console.log("==========切换激活对象", e, activeObjects);
activeObjects.value = [...e.selected];
- // .filter((v) =>
- // v.specialType ? v.specialType === SpecialType.REPEAT_O : true
- // );// 过滤出印花对象
activeObjects.value.forEach((v) => {
v.layer = props.layerManager.getLayerById(v.layerId);
});
@@ -783,7 +776,7 @@
}
> .list {
display: flex;
-
+
> div {
display: flex;
align-items: center;
diff --git a/src/component/Canvas/CanvasEditor/components/ToolsSidebar.vue b/src/component/Canvas/CanvasEditor/components/ToolsSidebar.vue
index b1f29cb0..379fa38c 100644
--- a/src/component/Canvas/CanvasEditor/components/ToolsSidebar.vue
+++ b/src/component/Canvas/CanvasEditor/components/ToolsSidebar.vue
@@ -166,19 +166,19 @@ const normalToolsList = ref([
icon: { name: "CFont", size: "20" },
class: "text-btn",
},
- {
- id: OperationType.PART,
- title: t("Canvas.GarmentPartSelector"),
- action: () => selectTool(OperationType.PART),
- icon: { name: "CPart", size: "28" },
- class: "part-btn",
- activeList: [
- OperationType.PART,
- OperationType.PART_RECTANGLE,
- OperationType.PART_BRUSH,
- OperationType.PART_ERASER,
- ],
- },
+// {
+// id: OperationType.PART,
+// title: t("Canvas.GarmentPartSelector"),
+// action: () => selectTool(OperationType.PART),
+// icon: { name: "CPart", size: "28" },
+// class: "part-btn",
+// activeList: [
+// OperationType.PART,
+// OperationType.PART_RECTANGLE,
+// OperationType.PART_BRUSH,
+// OperationType.PART_ERASER,
+// ],
+// },
{
id: "help",
title: t("Canvas.help"),
diff --git a/src/component/Canvas/CanvasEditor/index.vue b/src/component/Canvas/CanvasEditor/index.vue
index 1047f15d..58ec3023 100644
--- a/src/component/Canvas/CanvasEditor/index.vue
+++ b/src/component/Canvas/CanvasEditor/index.vue
@@ -1000,6 +1000,8 @@ defineExpose({
isContainBg = false, // 是否包含背景图层
isContainFixed = false, // 是否包含固定图层
isContainFixedOther = false, // 是否包含其他固定图层
+ isPrintTrimsNoRepeat = true, // 是否包含印花图层的不平铺
+ isPrintTrimsRepeat = true, // 是否包含印花图层的平铺
isCropByBg = false, // 是否使用背景大小裁剪 // 如果为true，则导出时裁剪到背景图层大小
layerId = "", // 导出具体图层ID
layerIdArray = [], // 导出多个图层ID数组
@@ -1010,6 +1012,8 @@ defineExpose({
isContainBg,
isContainFixed,
isContainFixedOther,
+ isPrintTrimsNoRepeat,
+ isPrintTrimsRepeat,
isCropByBg,
layerId,
layerIdArray,
@@ -1250,7 +1254,7 @@ defineExpose({
/>
-
+
-
+
+
+ X: {{ left }}%
+ Y: {{ top }}%
+
+
+
-
-
- x:{{ tofix(data.left) }}% y:{{ tofix(data.top) }}%
+
+ X: {{ left }}%
+ Y: {{ top }}%
+
+
+
偏移X
-
+
偏移Y
-
+
角度
-
+
缩放
-
+
水平间距
-
+
垂直间距
-
+
缩放X
-
+
缩放Y
-
+
X
-
+
Y
-
+
角度
-
+
@@ -78,6 +124,7 @@
step="0.1"
min="0"
max="1"
+ @input="updateList(item, 'object.opacity', item.object.opacity)"
/>
+
+ 
+ Left Click: Add
+
+
+ Left Click: Add
+
+ 
+ Right Click: Remove
+
+
+ Right Click: Remove
+
@@ -23,9 +37,9 @@
:key="item.type"
:class="[
'tool-btn',
- { active: selectionType === item.type },
+ { active: toolType === item.type },
]"
- @click="setSelectionType(item.type)"
+ @click="setPartType(item.type)"
>
-
@@ -90,7 +98,7 @@
type: Object,
required: true,
},
- selectionManager: {
+ partManager: {
type: Object,
required: true,
},
@@ -115,7 +123,7 @@
// 响应式数据
const visible = ref(false);
- const selectionType = ref("rectangle");
+ const toolType = ref(OperationType.PART);
//打开隐藏操作面板
const closePanel = ref(false);
const setClosePanel = () => {
@@ -132,20 +140,20 @@
{
type: OperationType.PART_RECTANGLE,
label: "Marquee Selection",
- icon: "CRectangle",
- size: "26",
+ icon: "CMarquee",
+ size: "20",
},
{
type: OperationType.PART_BRUSH,
label: "Brush Selection",
- icon: "CBrush",
- size: "24",
+ icon: "CBrush2",
+ size: "16",
},
{
type: OperationType.PART_ERASER,
label: "Erase",
- icon: "CEraser",
- size: "24",
+ icon: "CEraser2",
+ size: "22",
},
];
@@ -169,13 +177,13 @@
if (selectionTools.includes(newTool)) {
show();
// 根据工具类型设置选区类型
- selectionType.value = newTool;
+ toolType.value = newTool;
// 更新选区管理器的选区类型
- if (props.selectionManager) {
- props.selectionManager.setSelectionType(selectionType.value);
- props.selectionManager.setupSelectionEvents();
- }
+ // if (props.partManager) {
+ // props.partManager.setPartType(toolType.value);
+ // props.partManager.setupPartEvents();
+ // }
} else {
close();
}
@@ -201,20 +209,30 @@
/**
* 设置选区类型
*/
- function setSelectionType(type) {
- selectionType.value = type;
+ function setPartType(type) {
+ toolType.value = type;
- // 通过 ToolManager 切换工具，这会自动通知 SelectionManager
+ // 通过 ToolManager 切换工具，这会自动通知 partManager
if (props.toolManager) {
props.toolManager.setToolWithCommand(type);
}
- // 备用方案：如果没有 toolManager，直接更新 selectionManager
- else if (props.selectionManager) {
- props.selectionManager.setSelectionType(type);
- props.selectionManager.setupSelectionEvents();
- }
+ // // 备用方案：如果没有 toolManager，直接更新 partManager
+ // else if (props.partManager) {
+ // props.partManager.setPartType(type);
+ // props.partManager.setupPartEvents();
+ // }
}
+
+ // 创建
+ function onCreate() {
+
+ }
+ // 复制并创建
+ function onCopyCreate() {
+
+ }
+
diff --git a/src/component/Canvas/CanvasEditor/index.vue b/src/component/Canvas/CanvasEditor/index.vue
index d927f742..a5b371eb 100644
--- a/src/component/Canvas/CanvasEditor/index.vue
+++ b/src/component/Canvas/CanvasEditor/index.vue
@@ -385,6 +385,8 @@ onMounted(async () => {
partManager = new PartManager({
canvas: canvasManager.canvas,
layerManager,
+ canvasManager,
+ toolManager,
});
canvasManager.setPartManager(partManager);
@@ -722,8 +724,13 @@ function addRemoveBtn(fun) {
});
}
-function deleteFun() {
- removeLayer(layerManager.activeLayerId.value);
+function deleteFun(e, control) {
+ const target = control.target;
+ if(target.onDelete){
+ target.onDelete(target);
+ }else if(target.id){
+ removeLayer(layerManager.activeLayerId.value);
+ }
}
function removeLayer(layerId) {
diff --git a/src/component/Canvas/CanvasEditor/managers/PartManager.js b/src/component/Canvas/CanvasEditor/managers/PartManager.js
index 4758af83..645d1c8e 100644
--- a/src/component/Canvas/CanvasEditor/managers/PartManager.js
+++ b/src/component/Canvas/CanvasEditor/managers/PartManager.js
@@ -3,939 +3,295 @@ import { generateId } from "../utils/helper";
import { OperationType } from "../utils/layerHelper";
import { CreateSelectionCommand } from "../commands/SelectionCommands";
import { ClearSelectionCommand } from "../commands/LassoCutoutCommand";
+import addIcon from "@/assets/images/canvas/add.png";
+import removeIcon from "@/assets/images/canvas/remove.png";
/**
* 部件选择管理器
*/
export class PartManager {
- /**
- * 创建部件选择管理器
- * @param {Object} options 配置选项
- * @param {Object} options.canvas fabric.js画布实例
- * @param {Object} options.commandManager 命令管理器实例
- * @param {Object} options.layerManager 图层管理实例
- */
- constructor(options = {}) {
- this.canvas = options.canvas;
- this.commandManager = options.commandManager;
- this.layerManager = options.layerManager;
-
- // 选区状态
- this.isActive = false;
- this.selectionType = OperationType.LASSO_RECTANGLE; // 使用常量而不是字符串
- this.selectionObject = null; // 当前选区对象
- this.selectionId = "selection_" + Date.now();
- this.featherAmount = 0; // 羽化值
-
- // 选区样式配置
- this.selectionStyle = {
- stroke: "#0096ff",
- strokeWidth: 1,
- strokeDashArray: [5, 5],
- fill: "rgba(0, 150, 255, 0.1)",
- selectable: false,
- evented: false,
- excludeFromExport: true,
- hoverCursor: "default",
- moveCursor: "default",
- };
-
- // 绘制状态
- this.drawingObject = null;
- this.startPoint = null;
- this.selectionPath = null; // 存储选区路径数据
-
- // 自由选区相关状态
- this.drawingPoints = null;
- this.currentPathString = null;
-
- // 不再直接绑定事件处理函数
- this._mouseDownHandler = null;
- this._mouseMoveHandler = null;
- this._mouseUpHandler = null;
- this._keyDownHandler = null;
-
- // 选区相关的工具类型
- this.tools = [
- OperationType.PART,
- OperationType.PART_RECTANGLE,
- OperationType.PART_BRUSH,
- OperationType.PART_ERASER,
- ];
-
- // 当前工具
- this.currentTool = OperationType.SELECT;
-
- // 选区状态变化回调
- this.onSelectionChanged = null;
-
- // 不再自动初始化事件，改为手动控制
- // this.initEvents();
- }
-
- /**
- * 设置当前工具
- * @param {String} toolId 工具ID
- */
- setCurrentTool(toolId) {
- this.currentTool = toolId;
-
- // 检查是否为选区工具
- const wasActive = this.isActive;
- this.isActive = this.tools.includes(toolId);
-
- // 如果从非选区工具切换到选区工具，初始化事件
- if (!wasActive && this.isActive) {
- this.initEvents();
- }
- // 如果从选区工具切换到非选区工具，清理事件和选区
- else if (wasActive && !this.isActive) {
- this.cleanupEvents();
- this.clearSelection();
- }
-
- // 根据工具类型设置选区类型
- if (this.isActive) {
- this.selectionType = toolId;
- }
- }
-
- /**
- * 初始化选区相关事件
- */
- initEvents() {
- if (!this.canvas || this._mouseDownHandler) return; // 避免重复初始化
-
- // 保存实例引用，用于事件处理函数中
- const self = this;
-
- // 鼠标按下事件处理
- this._mouseDownHandler = (options) => {
- // 如果选区功能未激活，不处理事件
- if (!this.isActive) return;
-
- // 如果点击的是已有对象且不是选区对象，则不处理
- if (
- options.target &&
- options.target.id !== this.selectionId &&
- options.target.selectable !== false &&
- options.target.type !== "selection"
- ) {
- return;
- }
-
- // 阻止事件冒泡，避免与 CanvasEventManager 冲突
- options.e.stopPropagation();
-
- // 根据选区类型执行不同的起始操作
- switch (this.selectionType) {
- case OperationType.LASSO:
- this.startFreeSelection(options);
- break;
- case OperationType.LASSO_ELLIPSE:
- this.startEllipseSelection(options);
- break;
- case OperationType.LASSO_RECTANGLE:
- this.startRectangleSelection(options);
- break;
- }
- };
-
- // 鼠标移动事件处理
- this._mouseMoveHandler = (options) => {
- // 如果选区功能未激活或没有正在绘制的对象，不处理事件
- if (!this.isActive || !this.drawingObject) return;
-
- // 阻止事件冒泡
- options.e.stopPropagation();
-
- // 根据选区类型执行不同的绘制操作
- switch (this.selectionType) {
- case OperationType.LASSO_RECTANGLE:
- this.drawRectangleSelection(options);
- break;
- case OperationType.LASSO_ELLIPSE:
- this.drawEllipseSelection(options);
- break;
- case OperationType.LASSO:
- this.drawFreeSelection(options);
- break;
- }
- };
-
- // 鼠标抬起事件处理
- this._mouseUpHandler = (options) => {
- // 如果选区功能未激活或没有正在绘制的对象，不处理事件
- if (!this.isActive || !this.drawingObject) return;
-
- // 阻止事件冒泡
- if (options && options.e) {
- options.e.stopPropagation();
- }
-
- // 根据选区类型执行不同的完成操作
- switch (this.selectionType) {
- case OperationType.LASSO_RECTANGLE:
- this.endRectangleSelection();
- break;
- case OperationType.LASSO_ELLIPSE:
- this.endEllipseSelection();
- break;
- case OperationType.LASSO:
- this.endFreeSelection();
- break;
- }
-
- // 如果有命令管理器，使用命令模式记录选区创建
- if (this.commandManager && this.selectionObject) {
- this.commandManager.execute(
- new CreateSelectionCommand({
- canvas: this.canvas,
- selectionManager: this,
- selectionObject: this.selectionObject,
- selectionType: this.selectionType,
- })
- );
- }
- };
-
- // 键盘事件处理
- this._keyDownHandler = (event) => {
- // 只在选区功能激活时处理键盘事件
- if (!this.isActive) return;
-
- if (event.key === "Escape") {
- // ESC键取消当前选区操作
- if (this.drawingObject) {
- this.canvas.remove(this.drawingObject);
- this.drawingObject = null;
- this.startPoint = null;
- }
- // 清除已有选区
- else if (this.selectionObject) {
- if (this.commandManager) {
- this.commandManager.execute(
- new ClearSelectionCommand({
- selectionManager: this,
- })
- );
- } else {
- this.clearSelection();
- }
- }
- }
- };
-
- // 添加事件监听
- this.canvas.on("mouse:down", this._mouseDownHandler);
- this.canvas.on("mouse:move", this._mouseMoveHandler);
- this.canvas.on("mouse:up", this._mouseUpHandler);
-
- // 添加键盘事件监听
- document.addEventListener("keydown", this._keyDownHandler);
- }
-
- /**
- * 清理事件监听
- */
- cleanupEvents() {
- if (!this.canvas) return;
-
- // 移除事件监听
- if (this._mouseDownHandler) {
- this.canvas.off("mouse:down", this._mouseDownHandler);
- this._mouseDownHandler = null;
- }
- if (this._mouseMoveHandler) {
- this.canvas.off("mouse:move", this._mouseMoveHandler);
- this._mouseMoveHandler = null;
- }
- if (this._mouseUpHandler) {
- this.canvas.off("mouse:up", this._mouseUpHandler);
- this._mouseUpHandler = null;
- }
- if (this._keyDownHandler) {
- document.removeEventListener("keydown", this._keyDownHandler);
- this._keyDownHandler = null;
- }
- }
-
- /**
- * 获取选区对象
- * @returns {Object} 选区对象
- */
- getSelectionObject() {
- return this.selectionObject;
- }
-
- /**
- * 获取选区路径
- * @returns {Array|String} 选区路径数据
- */
- getSelectionPath() {
- return this.selectionPath;
- }
-
- /**
- * 获取羽化值
- * @returns {Number} 羽化值
- */
- getFeatherAmount() {
- return this.featherAmount;
- }
-
- /**
- * 设置羽化值
- * @param {Number} amount 羽化值
- */
- setFeatherAmount(amount) {
- this.featherAmount = amount;
- return this.updateSelectionAppearance();
- }
-
- /**
- * 设置选区对象
- * @param {Object} object 选区对象
- */
- setSelectionObject(object) {
- // 如果已存在选区，先移除
- if (this.selectionObject) {
- this.removeSelectionFromCanvas();
- }
-
- // 更新选区对象
- this.selectionObject = object;
- this.selectionPath = object.path;
- this.selectionId = object.id || generateId();
-
- // 更新外观
- this.updateSelectionAppearance();
-
- // 添加到画布（确保在顶层）
- if (this.canvas && this.selectionObject) {
- this.canvas.add(this.selectionObject);
- this.canvas.bringToFront(this.selectionObject);
- this.canvas.renderAll();
- }
-
- // 触发选区变化回调
- if (this.onSelectionChanged && typeof this.onSelectionChanged === "function") {
- this.onSelectionChanged();
- }
-
- return true;
- }
-
- /**
- * 从路径数据设置选区
- * @param {Array|String} path 选区路径数据
- */
- setSelectionFromPath(path) {
- if (!path) return false;
-
- // 创建选区对象
- const selectionObj = new fabric.Path(path, {
- ...this.selectionStyle,
- id: `selection_${Date.now()}`,
- name: "selection",
- });
-
- // 设置选区
- return this.setSelectionObject(selectionObj);
- }
-
- /**
- * 更新选区外观
- */
- updateSelectionAppearance() {
- if (!this.selectionObject) return false;
-
- // 应用基本样式
- Object.assign(this.selectionObject, this.selectionStyle);
-
- // 应用羽化效果
- if (this.featherAmount > 0) {
- this.selectionObject.shadow = new fabric.Shadow({
- color: "rgba(0, 150, 255, 0.5)",
- blur: this.featherAmount,
- offsetX: 0,
- offsetY: 0,
- });
- } else {
- this.selectionObject.shadow = null;
- }
-
- // 更新画布
- this.canvas.renderAll();
- return true;
- }
-
- /**
- * 移除选区
- */
- removeSelectionFromCanvas() {
- if (this.canvas && this.selectionObject) {
- this.canvas.remove(this.selectionObject);
- this.canvas.renderAll();
- }
- }
-
- /**
- * 清除选区
- */
- clearSelection() {
- // 移除选区对象
- this.removeSelectionFromCanvas();
-
- // 重置选区状态
- this.selectionObject = null;
- this.selectionPath = null;
- this.selectionId = null;
- this.featherAmount = 0;
-
- // 触发选区变化回调
- if (this.onSelectionChanged && typeof this.onSelectionChanged === "function") {
- this.onSelectionChanged();
- }
-
- return true;
- }
-
- /**
- * 反转选区
- */
- async invertSelection() {
- if (!this.canvas || !this.selectionObject) return false;
-
- // 获取画布范围
- const canvasRect = new fabric.Rect({
- left: 0,
- top: 0,
- width: this.canvas.width,
- height: this.canvas.height,
- selectable: false,
- });
-
- // 创建反选路径
- let invertedPath;
- try {
- invertedPath = canvasRect.subtractPathFromRect(this.selectionObject.path);
- } catch (error) {
- console.error("无法反转选区:", error);
- return false;
- }
-
- // 设置新的选区
- const newSelection = new fabric.Path(invertedPath.path, {
- ...this.selectionStyle,
- id: `selection_${Date.now()}`,
- name: "selection",
- });
-
- return this.setSelectionObject(newSelection);
- }
-
- /**
- * 添加到选区
- * @param {Object} newSelection 要添加的选区对象
- */
- async addToSelection(newSelection) {
- if (!this.canvas) return false;
-
- // 如果当前没有选区，直接使用新选区
- if (!this.selectionObject) {
- return this.setSelectionObject(newSelection);
- }
-
- // 合并选区
- let combinedPath;
- try {
- combinedPath = this.selectionObject.union(newSelection);
- } catch (error) {
- console.error("无法添加到选区:", error);
- return false;
- }
-
- // 设置新的选区
- const combinedSelection = new fabric.Path(combinedPath.path, {
- ...this.selectionStyle,
- id: `selection_${Date.now()}`,
- name: "selection",
- });
-
- return this.setSelectionObject(combinedSelection);
- }
-
- /**
- * 从选区中移除
- * @param {Object} removeSelection 要移除的选区对象
- */
- async removeFromSelection(removeSelection) {
- if (!this.canvas || !this.selectionObject) return false;
-
- // 从当前选区中减去新选区
- let resultPath;
- try {
- resultPath = this.selectionObject.subtract(removeSelection);
- } catch (error) {
- console.error("无法从选区中移除:", error);
- return false;
- }
-
- // 设置新的选区
- const newSelection = new fabric.Path(resultPath.path, {
- ...this.selectionStyle,
- id: `selection_${Date.now()}`,
- name: "selection",
- });
-
- return this.setSelectionObject(newSelection);
- }
-
- /**
- * 应用羽化效果
- * @param {Number} amount 羽化值
- */
- async featherSelection(amount) {
- if (!this.selectionObject) return false;
-
- // 更新羽化值
- this.featherAmount = amount;
-
- // 更新选区外观
- return this.updateSelectionAppearance();
- }
-
- /**
- * 检查对象是否在选区内
- * @param {Object} object 要检查的对象
- * @returns {Boolean} 是否在选区内
- */
- isObjectInSelection(object) {
- if (!this.selectionObject || !object) return false;
-
- // 获取对象的边界框
- const bounds = object.getBoundingRect();
- const { left, top, width, height } = bounds;
-
- // 检查对象的中心点和四个角是否在选区内
- const centerX = left + width / 2;
- const centerY = top + height / 2;
-
- // 检查中心点
- if (this.isPointInSelection(centerX, centerY)) return true;
-
- // 检查四个角
- if (this.isPointInSelection(left, top)) return true;
- if (this.isPointInSelection(left + width, top)) return true;
- if (this.isPointInSelection(left, top + height)) return true;
- if (this.isPointInSelection(left + width, top + height)) return true;
-
- return false;
- }
-
- /**
- * 检查点是否在选区内
- * @param {Number} x X坐标
- * @param {Number} y Y坐标
- * @returns {Boolean} 是否在选区内
- */
- isPointInSelection(x, y) {
- if (!this.selectionObject) return false;
-
- // 使用fabric.js的containsPoint方法判断点是否在选区内
- return this.selectionObject.containsPoint({ x, y });
- }
-
- /**
- * 开始自由选区
- * @param {Object} options 事件对象
- */
- startFreeSelection(options) {
- if (!this.canvas || !this.isActive) return;
-
- // 获取鼠标位置
- const pointer = this.canvas.getPointer(options.e);
- this.startPoint = pointer;
-
- // 创建用于绘制轨迹的点数组
- this.drawingPoints = [pointer];
-
- // 初始化SVG路径字符串
- this.currentPathString = `M ${pointer.x} ${pointer.y}`;
-
- // 创建临时路径对象用于实时显示
- this.drawingObject = new fabric.Path(this.currentPathString, {
- stroke: this.selectionStyle.stroke,
- strokeWidth: this.selectionStyle.strokeWidth,
- strokeDashArray: this.selectionStyle.strokeDashArray,
- fill: "transparent",
- selectable: false,
- evented: false,
- strokeLineCap: "round",
- strokeLineJoin: "round",
- });
-
- // 添加到画布
- this.canvas.add(this.drawingObject);
- this.canvas.renderAll();
- }
-
- /**
- * 绘制自由选区
- * @param {Object} options 事件对象
- */
- drawFreeSelection(options) {
- if (!this.drawingObject || !this.drawingPoints || !this.isActive) return;
-
- // 获取鼠标位置
- const pointer = this.canvas.getPointer(options.e);
-
- // 添加新的点，但避免添加过于密集的点
- const lastPoint = this.drawingPoints[this.drawingPoints.length - 1];
- const distance = Math.sqrt(
- Math.pow(pointer.x - lastPoint.x, 2) + Math.pow(pointer.y - lastPoint.y, 2)
- );
-
- // 只有当距离大于2像素时才添加新点，避免路径过于复杂
- if (distance > 2) {
- this.drawingPoints.push(pointer);
-
- // 更新路径字符串
- this.currentPathString += ` L ${pointer.x} ${pointer.y}`;
-
- // 移除旧的绘制对象
- this.canvas.remove(this.drawingObject);
-
- // 创建新的路径对象
- this.drawingObject = new fabric.Path(this.currentPathString, {
- stroke: this.selectionStyle.stroke,
- strokeWidth: this.selectionStyle.strokeWidth,
- strokeDashArray: this.selectionStyle.strokeDashArray,
- fill: "transparent",
- selectable: false,
- evented: false,
- strokeLineCap: "round",
- strokeLineJoin: "round",
- });
-
- // 重新添加到画布
- this.canvas.add(this.drawingObject);
- this.canvas.renderAll();
- }
- }
-
- /**
- * 结束自由选区
- */
- endFreeSelection() {
- if (!this.drawingObject || !this.drawingPoints || !this.isActive) return;
-
- // 检查是否有足够的点来形成选区
- if (this.drawingPoints.length < 3) {
- // 点太少，清除绘制对象
- this.canvas.remove(this.drawingObject);
- this.drawingObject = null;
- this.drawingPoints = null;
- this.startPoint = null;
- this.currentPathString = null;
- return;
- }
-
- // 自动闭合路径 - 连接最后一点到第一点
- const firstPoint = this.drawingPoints[0];
- const lastPoint = this.drawingPoints[this.drawingPoints.length - 1];
- const closingDistance = Math.sqrt(
- Math.pow(firstPoint.x - lastPoint.x, 2) + Math.pow(firstPoint.y - lastPoint.y, 2)
- );
-
- // 如果首尾距离较大，自动添加闭合线段
- let finalPathString = this.currentPathString;
- if (closingDistance > 10) {
- finalPathString += ` L ${firstPoint.x} ${firstPoint.y}`;
- }
- finalPathString += " Z"; // 闭合路径
-
- // 创建最终选区对象
- const selectionObj = new fabric.Path(finalPathString, {
- ...this.selectionStyle,
- id: `selection_${Date.now()}`,
- name: "selection",
- fill: this.selectionStyle.fill, // 恢复填充
- });
-
- // 移除绘制中的临时对象
- this.canvas.remove(this.drawingObject);
-
- // 重置绘制状态
- this.drawingObject = null;
- this.drawingPoints = null;
- this.startPoint = null;
- this.currentPathString = null;
-
- // 设置选区
- this.setSelectionObject(selectionObj);
- }
-
- /**
- * 开始矩形选区
- * @param {Object} options 事件对象
- */
- startRectangleSelection(options) {
- if (!this.canvas || !this.isActive) return;
-
- // 获取鼠标位置
- const pointer = this.canvas.getPointer(options.e);
- this.startPoint = pointer;
-
- // 创建矩形对象
- this.drawingObject = new fabric.Rect({
- left: pointer.x,
- top: pointer.y,
- width: 0,
- height: 0,
- ...this.selectionStyle,
- fill: "transparent", // 在绘制过程中不显示填充
- });
-
- // 添加到画布
- this.canvas.add(this.drawingObject);
- this.canvas.renderAll();
- }
-
- /**
- * 绘制矩形选区
- * @param {Object} options 事件对象
- */
- drawRectangleSelection(options) {
- if (!this.drawingObject || !this.startPoint || !this.isActive) return;
-
- // 获取鼠标位置
- const pointer = this.canvas.getPointer(options.e);
-
- // 计算宽度和高度
- const width = Math.abs(pointer.x - this.startPoint.x);
- const height = Math.abs(pointer.y - this.startPoint.y);
-
- // 确定左上角坐标
- const left = Math.min(this.startPoint.x, pointer.x);
- const top = Math.min(this.startPoint.y, pointer.y);
-
- // 更新矩形
- this.drawingObject.set({
- left: left,
- top: top,
- width: width,
- height: height,
- });
-
- this.canvas.renderAll();
- }
-
- /**
- * 结束矩形选区
- */
- endRectangleSelection() {
- if (!this.drawingObject || !this.startPoint || !this.isActive) return;
-
- // 将矩形转换为路径
- const left = this.drawingObject.left;
- const top = this.drawingObject.top;
- const width = this.drawingObject.width;
- const height = this.drawingObject.height;
-
- // 如果矩形太小，忽略
- if (width < 5 || height < 5) {
- this.canvas.remove(this.drawingObject);
- this.drawingObject = null;
- this.startPoint = null;
- return;
- }
-
- // 创建矩形路径字符串
- const pathString = `M ${left} ${top} L ${left + width} ${top} L ${
- left + width
- } ${top + height} L ${left} ${top + height} Z`;
-
- // 创建最终选区对象
- const selectionObj = new fabric.Path(pathString, {
- ...this.selectionStyle,
- id: `selection_${Date.now()}`,
- name: "selection",
- fill: this.selectionStyle.fill, // 恢复填充
- });
-
- // 移除绘制中的临时对象
- this.canvas.remove(this.drawingObject);
-
- // 重置绘制状态
- this.drawingObject = null;
- this.startPoint = null;
-
- // 设置选区
- this.setSelectionObject(selectionObj);
- }
-
- /**
- * 开始椭圆选区
- * @param {Object} options 事件对象
- */
- startEllipseSelection(options) {
- if (!this.canvas || !this.isActive) return;
-
- // 获取鼠标位置
- const pointer = this.canvas.getPointer(options.e);
- this.startPoint = pointer;
-
- // 创建椭圆对象
- this.drawingObject = new fabric.Ellipse({
- left: pointer.x,
- top: pointer.y,
- rx: 0,
- ry: 0,
- ...this.selectionStyle,
- fill: "transparent", // 在绘制过程中不显示填充
- // originX: "left",
- // originY: "top",
- originX: "center",
- originY: "center",
- });
-
- // 添加到画布
- this.canvas.add(this.drawingObject);
- this.canvas.renderAll();
- }
-
- /**
- * 绘制椭圆选区
- * @param {Object} options 事件对象
- */
- drawEllipseSelection(options) {
- if (!this.drawingObject || !this.startPoint || !this.isActive) return;
-
- // 获取鼠标位置
- const pointer = this.canvas.getPointer(options.e);
-
- // 计算半径
- const rx = Math.abs(pointer.x - this.startPoint.x) / 2;
- const ry = Math.abs(pointer.y - this.startPoint.y) / 2;
-
- // 确定中心坐标
- const left = Math.min(this.startPoint.x, pointer.x);
- const top = Math.min(this.startPoint.y, pointer.y);
-
- // 更新椭圆
- this.drawingObject.set({
- left: left,
- top: top,
- rx: rx,
- ry: ry,
- originX: "left",
- originY: "top",
- });
-
- this.canvas.renderAll();
- }
-
- /**
- * 结束椭圆选区
- */
- endEllipseSelection() {
- if (!this.drawingObject || !this.startPoint || !this.isActive) return;
-
- // 获取椭圆参数
- const { left, top, rx, ry } = this.drawingObject;
-
- // 如果椭圆太小，忽略
- if (rx < 2 || ry < 2) {
- this.canvas.remove(this.drawingObject);
- this.drawingObject = null;
- this.startPoint = null;
- return;
- }
-
- // 计算中心点
- const cx = left + rx;
- const cy = top + ry;
-
- // 将椭圆转换为路径字符串
- const pathString = this.ellipseToSVGPath(cx, cy, rx, ry);
-
- // 创建最终选区对象
- const selectionObj = new fabric.Path(pathString, {
- ...this.selectionStyle,
- id: `selection_${Date.now()}`,
- name: "selection",
- fill: this.selectionStyle.fill, // 恢复填充
- });
-
- // 移除绘制中的临时对象
- this.canvas.remove(this.drawingObject);
-
- // 重置绘制状态
- this.drawingObject = null;
- this.startPoint = null;
-
- // 设置选区
- this.setSelectionObject(selectionObj);
- }
-
- /**
- * 将椭圆转换为SVG路径字符串
- * @param {Number} cx 中心点X坐标
- * @param {Number} cy 中心点Y坐标
- * @param {Number} rx X半径
- * @param {Number} ry Y半径
- * @returns {String} SVG路径字符串
- */
- ellipseToSVGPath(cx, cy, rx, ry) {
- // 使用椭圆弧命令创建完整椭圆
- return `M ${cx - rx} ${cy} A ${rx} ${ry} 0 1 0 ${
- cx + rx
- } ${cy} A ${rx} ${ry} 0 1 0 ${cx - rx} ${cy} Z`;
- }
-
- /**
- * 设置选区工具
- * @param {string} type 选区类型：OperationType.LASSO, OperationType.LASSO_RECTANGLE, OperationType.LASSO_ELLIPSE
- */
- setSelectionType(type) {
- this.selectionType = type;
-
- // 如果正在绘制，清除临时对象
- if (this.drawingObject) {
- this.canvas.remove(this.drawingObject);
- this.drawingObject = null;
- this.startPoint = null;
- }
- }
-
- /**
- * 设置选区工具的鼠标事件
- */
- setupSelectionEvents() {
- // 选区事件现在通过 setCurrentTool 方法管理
- // 这个方法现在主要用于刷新或重置事件监听
- if (!this.canvas || !this.isActive) return;
-
- // 确保选区处于激活状态
- if (this.tools.includes(this.currentTool)) {
- this.isActive = true;
- // 如果事件还没有初始化，初始化它们
- if (!this._mouseDownHandler) {
- this.initEvents();
- }
- }
- }
-
- /**
- * 清理资源
- */
- dispose() {
- this.cleanupEvents();
- this.clearSelection();
- this.canvas = null;
- this.commandManager = null;
- this.layerManager = null;
- }
+ /**
+ * 创建部件选择管理器
+ * @param {Object} options 配置选项
+ * @param {Object} options.canvas fabric.js画布实例
+ * @param {Object} options.commandManager 命令管理器实例
+ * @param {Object} options.canvasManager 画布管理实例
+ * @param {Object} options.layerManager 图层管理实例
+ * @param {Object} options.toolManager 工具管理实例
+ */
+ constructor(options = {}) {
+ this.canvas = options.canvas;
+ this.commandManager = options.commandManager;
+ this.layerManager = options.layerManager;
+ this.canvasManager = options.canvasManager;
+ this.toolManager = options.toolManager;
+
+ // 状态
+ this.isActive = false;
+ this.partObject = null; // 当前选区对象
+ this.partId = "part_selector";
+ this.defaultCursor = "default";
+
+ // 绘制状态
+ this.drawingObject = null;
+ this.startPoint = null;
+ this.partPath = null; // 存储选区路径数据
+
+
+ // 不再直接绑定事件处理函数
+ this._mouseDownHandler = null;
+ this._mouseMoveHandler = null;
+ this._mouseUpHandler = null;
+ this._keyDownHandler = null;
+
+ // 选区相关的工具类型
+ this.tools = [
+ OperationType.PART,
+ OperationType.PART_RECTANGLE,
+ OperationType.PART_BRUSH,
+ OperationType.PART_ERASER,
+ ];
+
+ // 当前工具
+ this.activeTool = this.toolManager.activeTool;
+
+ // 选区状态变化回调
+ this.onSelectionChanged = null;
+ }
+
+ /**
+ * 设置当前工具
+ * @param {String} toolId 工具ID
+ */
+ setCurrentTool(toolId) {
+ // 检查是否为选区工具
+ const wasActive = this.isActive;
+ this.isActive = this.tools.includes(toolId);
+
+ // 如果从非选区工具切换到选区工具，初始化事件
+ if (!wasActive && this.isActive) {
+ this.initEvents();
+ }
+ // 如果从选区工具切换到非选区工具，清理事件和选区
+ else if (wasActive && !this.isActive) {
+ this.cleanupEvents();
+ this.clearSelection();
+ }
+ }
+
+ /**
+ * 初始化选区相关事件
+ */
+ initEvents() {
+ if (!this.canvas || this._mouseDownHandler) return; // 避免重复初始化
+ this.defaultCursor = this.canvas.defaultCursor;
+
+ // 保存实例引用，用于事件处理函数中
+ const self = this;
+
+ // 鼠标按下事件处理
+ this._mouseDownHandler = (options) => {
+ // 如果选区功能未激活，不处理事件
+ if (!this.isActive) return;
+ // 阻止事件冒泡，避免与 CanvasEventManager 冲突
+ options.e.stopPropagation();
+ switch (this.activeTool.value) {
+ case OperationType.PART:
+ this._pointDownkHandler(options);
+ break;
+ case OperationType.PART_RECTANGLE:
+ this._rectangleDownHandler(options);
+ break;
+ case OperationType.PART_BRUSH:
+ this._brushDownHandler(options);
+ break;
+ case OperationType.PART_ERASER:
+ this._eraseDownHandler(options);
+ break;
+
+ default:
+ break;
+ }
+ };
+
+ // 鼠标移动事件处理
+ this._mouseMoveHandler = (options) => {
+ // 如果选区功能未激活或没有正在绘制的对象，不处理事件
+ if (!this.isActive) return;
+ // 阻止事件冒泡
+ options.e.stopPropagation();
+ switch (this.activeTool.value) {
+ case OperationType.PART:
+ this._pointMoveHandler(options);
+ break;
+ case OperationType.PART_RECTANGLE:
+ this._rectangleMoveHandler(options);
+ break;
+ case OperationType.PART_BRUSH:
+ this._brushMoveHandler(options);
+ break;
+ case OperationType.PART_ERASER:
+ this._eraseMoveHandler(options);
+ break;
+
+ default:
+ break;
+ }
+ };
+
+ // 鼠标抬起事件处理
+ this._mouseUpHandler = (options) => {
+ // 如果选区功能未激活或没有正在绘制的对象，不处理事件
+ if (!this.isActive) return;
+ // 阻止事件冒泡
+ if (options && options.e) {
+ options.e.stopPropagation();
+ }
+ switch (this.activeTool.value) {
+ case OperationType.PART:
+ this._pointUpHandler(options);
+ break;
+ case OperationType.PART_RECTANGLE:
+ this._rectangleUpHandler(options);
+ break;
+ case OperationType.PART_BRUSH:
+ this._brushUpHandler(options);
+ break;
+ case OperationType.PART_ERASER:
+ this._eraseUpHandler(options);
+ break;
+
+ default:
+ break;
+ }
+ };
+
+ // 键盘事件处理
+ this._keyDownHandler = (event) => {
+ // 只在选区功能激活时处理键盘事件
+ if (!this.isActive) return;
+ };
+
+ // 添加事件监听
+ this.canvas.on("mouse:down", this._mouseDownHandler);
+ this.canvas.on("mouse:move", this._mouseMoveHandler);
+ this.canvas.on("mouse:up", this._mouseUpHandler);
+
+ // 添加键盘事件监听
+ document.addEventListener("keydown", this._keyDownHandler);
+ }
+
+ /**
+ * 清理事件监听
+ */
+ cleanupEvents() {
+ if (!this.canvas) return;
+
+ // 移除事件监听
+ if (this._mouseDownHandler) {
+ this.canvas.off("mouse:down", this._mouseDownHandler);
+ this._mouseDownHandler = null;
+ }
+ if (this._mouseMoveHandler) {
+ this.canvas.off("mouse:move", this._mouseMoveHandler);
+ this._mouseMoveHandler = null;
+ }
+ if (this._mouseUpHandler) {
+ this.canvas.off("mouse:up", this._mouseUpHandler);
+ this._mouseUpHandler = null;
+ }
+ if (this._keyDownHandler) {
+ document.removeEventListener("keydown", this._keyDownHandler);
+ this._keyDownHandler = null;
+ }
+ }
+
+ // 点选工具模式下点击事件处理
+ _pointDownkHandler(options) {
+ const button = options.button;
+ const isLeft = button === 1;// 左键1（添加） 右键3（删除）
+ const icon = `url("${isLeft ? addIcon : removeIcon}") 16 16, default`
+ this.canvas.upperCanvasEl.style.cursor = icon;
+ }
+ // 点选工具模式下移动事件处理
+ _pointMoveHandler(options) {
+
+ }
+ // 点选工具模式下抬起事件处理
+ _pointUpHandler(options) {
+ const button = options.button;
+ const isLeft = button === 1;// 左键1（添加） 右键3（删除）
+ this.canvas.upperCanvasEl.style.cursor = this.defaultCursor;
+ const { x, y } = options.pointer;
+ const fixedObject = this.canvasManager.getFixedLayerObject({ x, y });
+ console.log("==========", fixedObject)
+ }
+
+
+ // 框选工具模式下点击事件处理
+ _rectangleDownHandler(options) {
+ }
+ // 框选工具模式下移动事件处理
+ _rectangleMoveHandler(options) {
+
+ }
+ // 框选工具模式下抬起事件处理
+ _rectangleUpHandler(options) {
+ }
+
+
+ // 绘制工具模式下点击事件处理
+ _brushDownHandler(options) {
+ }
+ // 绘制工具模式下移动事件处理
+ _brushMoveHandler(options) {
+
+ }
+ // 绘制工具模式下抬起事件处理
+ _brushUpHandler(options) {
+ }
+
+
+ // 擦除工具模式下抬起事件处理
+ _eraseUpHandler(options) {
+ }
+ // 擦除工具模式下点击事件处理
+ _eraseDownHandler(options) {
+ }
+ // 擦除工具模式下移动事件处理
+ _eraseMoveHandler(options) {
+
+ }
+
+
+
+ /**
+ * 清除选区
+ */
+ clearSelection() {
+ // 移除选区对象
+ // this.removeSelectionFromCanvas();
+
+ // 重置选区状态
+ this.partObject = null;
+ this.partPath = null;
+
+ // 触发选区变化回调
+ if (this.onSelectionChanged && typeof this.onSelectionChanged === "function") {
+ this.onSelectionChanged();
+ }
+
+ return true;
+ }
+
+ /**
+ * 清理资源
+ */
+ dispose() {
+ this.cleanupEvents();
+ this.clearSelection();
+ this.canvas = null;
+ this.commandManager = null;
+ this.layerManager = null;
+ }
}
diff --git a/src/component/Canvas/CanvasEditor/managers/ToolManager.js b/src/component/Canvas/CanvasEditor/managers/ToolManager.js
index db048368..3f8949f9 100644
--- a/src/component/Canvas/CanvasEditor/managers/ToolManager.js
+++ b/src/component/Canvas/CanvasEditor/managers/ToolManager.js
@@ -197,19 +197,19 @@ export class ToolManager {
name: "部件选取工具-矩形",
icon: "part",
cursor: "default",
- setup: this.setupPartTool.bind(this),
+ setup: this.setupPartRectangleTool.bind(this),
},
[OperationType.PART_BRUSH]: {
name: "部件选取工具-画笔",
icon: "part",
cursor: "default",
- setup: this.setupPartTool.bind(this),
+ setup: this.setupPartBrushTool.bind(this),
},
[OperationType.PART_ERASER]: {
name: "部件选取工具-橡皮擦",
icon: "part",
cursor: "default",
- setup: this.setupPartTool.bind(this),
+ setup: this.setupPartEraserTool.bind(this),
},
// 红绿图模式专用工具
@@ -705,14 +705,47 @@ export class ToolManager {
*/
setupPartTool() {
if (!this.canvas) return;
- if (this.checkToolCanOperateSelectedObject()) return;
this.canvas.isDrawingMode = false;
this.canvas.selection = false;
-
+
if (this.canvasManager && this.canvasManager.partManager) {
this.canvasManager.partManager.setCurrentTool(OperationType.PART);
}
}
+ /**
+ * 设置部件选取工具--矩形
+ */
+ setupPartRectangleTool() {
+ if (!this.canvas) return;
+ this.canvas.isDrawingMode = false;
+ this.canvas.selection = true;
+ if (this.canvasManager && this.canvasManager.partManager) {
+ this.canvasManager.partManager.setCurrentTool(OperationType.PART_RECTANGLE);
+ }
+ }
+ /**
+ * 设置部件选取工具--画笔
+ */
+ setupPartBrushTool() {
+ if (!this.canvas) return;
+ this.canvas.isDrawingMode = true;
+ this.canvas.selection = false;
+ if (this.canvasManager && this.canvasManager.partManager) {
+ this.canvasManager.partManager.setCurrentTool(OperationType.PART_BRUSH);
+ }
+ }
+ /**
+ * 设置部件选取工具--橡皮擦
+ */
+ setupPartEraserTool() {
+ if (!this.canvas) return;
+ this.canvas.isDrawingMode = false;
+ this.canvas.selection = false;
+ if (this.canvasManager && this.canvasManager.partManager) {
+ this.canvasManager.partManager.setCurrentTool(OperationType.PART_ERASER);
+ }
+ }
+
/**
* 设置波浪工具
diff --git a/src/component/Canvas/OverallCanvas/demo.vue b/src/component/Canvas/OverallCanvas/demo.vue
index dd5331e5..8c378d4b 100644
--- a/src/component/Canvas/OverallCanvas/demo.vue
+++ b/src/component/Canvas/OverallCanvas/demo.vue
@@ -79,7 +79,9 @@
type="number"
v-model="item.object.scaleX"
step="0.1"
- @input="updateList(item, 'object.scaleX', item.object.scaleX)"
+ @input="
+ updateList(item, 'object.scaleX', item.object.scaleX)
+ "
/>
+
+
-
@@ -88,7 +90,9 @@
type="number"
v-model="item.object.scaleY"
step="0.1"
- @input="updateList(item, 'object.scaleY', item.object.scaleY)"
+ @input="
+ updateList(item, 'object.scaleY', item.object.scaleY)
+ "
/>
@@ -124,7 +128,9 @@
step="0.1"
min="0"
max="1"
- @input="updateList(item, 'object.opacity', item.object.opacity)"
+ @input="
+ updateList(item, 'object.opacity', item.object.opacity)
+ "
/>
-
-
-