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

fix

Browse Source
This commit is contained in:
X1627315083
2025-04-09 14:09:19 +08:00
parent b6e5f05f06
commit 37f1b36e54
76 changed files with 1969 additions and 970 deletions
Download Patch File Download Diff File Expand all files Collapse all files

518
src/tool/canvasGeneralCopy.js
View File

@@ -71,6 +71,8 @@ class MyCanvas {
this.canvasWH={
width:0,
height:0,
layerWidth:0,
layerHeight:0,
}
this.createPatterning = {//创建图形
state:false,
@@ -143,6 +145,9 @@ class MyCanvas {
value:0,
list:[],
}
this.exportData = {
width:-1,
}
for (let index = 0; index < 20; index++) {
this.texture.list.push({value:index,url:`/image/texture/texture${index}.webp`})
}
@@ -163,10 +168,79 @@ class MyCanvas {
}//给切换颜色设置防抖
}
async canvasInit (dom, val,img,editGroupImg,data){//初始化
async createCanvas(dom,val,exportWidth = -1){
this.exportData.width = exportWidth
this.canvasWH={
width:val.width,
height:val.height,
layerWidth:val.width,
layerHeight:val.height,
}
this.canvasDomParent = dom;
var canvasDom = document.createElement("canvas");
this.canvasDomParent.appendChild(canvasDom);
MyCanvas[this.id] = await new fabric.Canvas(canvasDom, {
backgroundColor: "rgba(230, 230, 230)",
width: this.canvasWH.width,
height: this.canvasWH.height,
isDrawingMode: val.isDrawingMode, // 开启绘图模式
selectionFullyContained: true,
selectionKey:'ctrlKey',
includeDefaultValues: false,//尚未测试 精简导出JSON
// freeDrawingCursor: 'none',
preserveObjectStacking:true,
hoverCursor: 'pointer',
});
this.initCanvasWH('init')
fabric.Object.prototype.cornerSize = 10//选中后的操作按钮大小
fabric.Object.prototype.transparentCorners = false //实心
if(!fabric.Object.prototype.controls.deleteControl){//设置元素删除
JSSetRemoveImage(this.deleteObject.bind(this))
}else{
fabric.Object.prototype.controls.deleteControl.mouseUpHandler = this.deleteObject.bind(this)
}
initAligningGuidelines(MyCanvas?.[this.id], true);
JSchangeType(MyCanvas?.[this.id],'init')
this.canvas = MyCanvas?.[this.id];
// console.log(this.layer)
return MyCanvas?.[this.id]
}
addEvent(){
MyCanvas?.[this.id].on("object:modified", (event)=>{
this.updateCanvasState('')
this.updataLayer()
});
this.canvasKeyDown = this.canvasKeyDown.bind(this);
this.canvasKeyUp = this.canvasKeyUp.bind(this);
MyCanvas?.[this.id].on("mouse:move", this.setCanvasMove.bind(this));
MyCanvas?.[this.id].on("mouse:down",this.setCanvasDown.bind(this));
MyCanvas?.[this.id].on("mouse:up",this.setCanvasUp.bind(this));
MyCanvas?.[this.id].on("mouse:wheel",this.setCanvasWheel.bind(this));
//双击
MyCanvas?.[this.id].on("mouse:dblclick", event=>{
if(this.operation == 'fold'){
this.foldEnd('Enter')
}
});
document.addEventListener('mousemove', this.mouseMove.bind(this));
document.addEventListener('touchmove', this.touchmove.bind(this));
document.addEventListener("keydown", this.canvasKeyDown);
document.addEventListener("keyup", this.canvasKeyUp);
MyCanvas?.[this.id].on("object:added", this.addLayer.bind(this));
}
async canvasInit (dom, val,img,editGroupImg,data,exportWidth = -1){//初始化
// let {erasable} = data
// this.canvasClear()
this.canvasWH = val
console.log(exportWidth)
this.exportData.width = exportWidth
this.canvasWH={
width:val.width,
height:val.height,
layerWidth:val.width,
layerHeight:val.height,
}
this.canvasDomParent = dom;
var canvasDom = document.createElement("canvas");
this.canvasDomParent.appendChild(canvasDom);
@@ -289,7 +363,9 @@ class MyCanvas {
MyCanvas?.[this.id].on("mouse:move", this.setCanvasMove.bind(this));
MyCanvas?.[this.id].on("mouse:down",this.setCanvasDown.bind(this));
MyCanvas?.[this.id].on("mouse:up",this.setCanvasUp.bind(this));
MyCanvas?.[this.id].on("mouse:wheel",this.setCanvasWheel.bind(this));
if(!data?.noWheel){
MyCanvas?.[this.id].on("mouse:wheel",this.setCanvasWheel.bind(this));
}
//双击
MyCanvas?.[this.id].on("mouse:dblclick", event=>{
if(this.operation == 'fold'){
@@ -305,13 +381,12 @@ class MyCanvas {
JSchangeType(MyCanvas?.[this.id],'init')
// await this.createBg()
await this.createLayer({str:'init',img:img,noErasable:data?.noErasable || false})//创建图层并且使用
if(img && editGroupImg){
if(img && data.dashedIsDetail){
this.dashed.isDetail = true
await this.createLayer({editImg:editGroupImg,noErasable:data?.noErasable || false})//创建图层并且使用
}
MyCanvas?.[this.id].on("object:added", this.addLayer.bind(this));
// MyCanvas?.[this.id].on("object:added", this.addLayer.bind(this));
this.canvas = MyCanvas?.[this.id];
return MyCanvas?.[this.id]
}
@@ -336,11 +411,11 @@ class MyCanvas {
},
scale
)
MyCanvas?.[this.id].setBackgroundColor({
source:'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC',
repeat: 'repeat',
},MyCanvas?.[this.id].renderAll.bind(MyCanvas?.[this.id]),
)
// MyCanvas?.[this.id].setBackgroundColor({
// source:'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC',
// repeat: 'repeat',
// },MyCanvas?.[this.id].renderAll.bind(MyCanvas?.[this.id]),
// )
}
mouseMove(event){
let e = getMousePosition(event,false)
@@ -373,6 +448,7 @@ class MyCanvas {
this.setPencil()
this.pencilbtnStyle.display = `block`
this.setCursor('none');
this.setGroupGrid('all')
MyCanvas[this.id].freeDrawingCursor = 'none'
}else if(str == 'move'){
JSchangeType(MyCanvas?.[this.id],'')
@@ -452,11 +528,15 @@ class MyCanvas {
MyCanvas[this.id].upperCanvasEl.style.cursor = str;
}
setCanvasMove = (event)=>{
if(this.mouse.isMovePostion && this.operation == 'move') return this.setCanvasPosition(event)
if(MyCanvas?.[this.id].isDrawingMode){
}else{
let getActiveObject = MyCanvas?.[this.id].getActiveObject()
// console.log(getActiveObject)
// console.log(!this.clipPath.isImg ,
// this.mouse.isDown ,
// getActiveObject?.custom?.dashed ,
// this.layer.selectLayer.group.custom?.groupType == 'Grid')
if(
!this.clipPath.isImg &&
this.mouse.isDown &&
@@ -594,9 +674,7 @@ class MyCanvas {
// if (clickedObject instanceof fabric.Textbox && this.operation != 'text') {
// this.createPatterning.textDataShow = true
// this.createText = clickedObject
// console.log(1);
// }else{
// console.log(2);
// this.createPatterning.textDataShow = false
// this.createText = {}
// }
@@ -686,7 +764,7 @@ class MyCanvas {
//添加裁剪后的图片
let elements = MyCanvas?.[this.id].getObjects().filter(obj => this.isAddToLayer(obj));
let imgData = await this.groupToImg(elements,position,'clipPath')
let img = await this.createImage({minioUrl:imgData})
let img = await this.createImage({imgUrl:imgData})
img.set({
scaleX:1,
scaleY:1,
@@ -750,7 +828,7 @@ class MyCanvas {
}
// 复制图层
async copyLayer(id){
let createId = new Date().getTime()
// let createId = new Date().getTime()
let elements = MyCanvas?.[this.id].getObjects().filter(obj => obj.custom.layerId == id)
for (let i = 0; i < elements.length; i++) {
await new Promise((resolve, reject) => {
@@ -763,69 +841,75 @@ class MyCanvas {
})
})
}
await this.createLayer({id:createId})
// await this.createLayer({id:createId})
copyElements.forEach( item=>MyCanvas?.[this.id].add(item))
}
async setGroupGrid(str){//group变为图片
// MyCanvas?.[this.id].discardActiveObject();//取消所有选中边框
let elements = MyCanvas?.[this.id].getObjects().filter(obj => this.isAddToLayer(obj) && !obj.custom.dashed && obj.type);
if(str == 'all'){
elements = MyCanvas?.[this.id].getObjects().filter(obj => this.isAddToLayer(obj) && obj.type);
}
let layerBg = elements.filter(obj => obj.custom.isSelectable)[0]
let scaleXY = {
scaleX:layerBg?.scaleX?layerBg?.scaleX:1,
scaleY:layerBg?.scaleY?layerBg?.scaleY:1,
width:layerBg?.width?layerBg?.width:MyCanvas?.[this.id].width,
height:layerBg?.height?layerBg?.height:MyCanvas?.[this.id].height,
}
let imgData = await this.groupToImg(elements,{},'setGrid',scaleXY)
let img = await this.createImage({minioUrl:imgData})
elements.forEach((obj) =>{
if(obj.custom.isSelectable){
}else{
MyCanvas?.[this.id].remove(obj)
let dashed = MyCanvas?.[this.id].getObjects().filter(obj => obj.custom?.dashed)?.[0];
if(this.layer.selectLayer.group.custom.groupType == 'Object' && !dashed)return
MyCanvas?.[this.id].discardActiveObject();//取消所有选中边框
return await new Promise(async (resolve, reject) => {
let elements = MyCanvas?.[this.id].getObjects().filter(obj => this.isAddToLayer(obj) && !obj.custom.dashed && obj.type);
if(str == 'all'){
elements = MyCanvas?.[this.id].getObjects().filter(obj => this.isAddToLayer(obj) && obj.type);
}
});
if(layerBg){
layerBg.custom.state = ''
delete layerBg.eraser
layerBg.set({
scaleX:1,
scaleY:1,
width: scaleXY.width * scaleXY.scaleX,
height: scaleXY.height * scaleXY.scaleY,
clipPath:null,
fill: new fabric.Pattern({
source: img.getElement(), // 传入图片元素
repeat: 'no-repeat' // 设置图片不重复
}),
hasBorders: true,
hasControls: true
})
this.setGroupStyle(layerBg)
}else{
const rect = new fabric.Rect({
// left:0,
// top:0,
width: MyCanvas?.[this.id].width,
height: MyCanvas?.[this.id].height,
strokeWidth:0,
fill: new fabric.Pattern({
source: img.getElement(), // 传入图片元素
repeat: 'no-repeat' // 设置图片不重复
}),
custom:{
isSelectable:true,
},
hasBorders: true,
hasControls: true
let layerBg = elements.filter(obj => obj.custom.isSelectable)[0]
let scaleXY = {
scaleX:layerBg?.scaleX?layerBg?.scaleX:1,
scaleY:layerBg?.scaleY?layerBg?.scaleY:1,
width:layerBg?.width?layerBg?.width:MyCanvas?.[this.id].width,
height:layerBg?.height?layerBg?.height:MyCanvas?.[this.id].height,
}
let imgData = await this.groupToImg(elements,{},'setGrid',scaleXY)
let img = await this.createImage({imgUrl:imgData})
elements.forEach((obj) =>{
if(obj.custom.isSelectable){
}else{
MyCanvas?.[this.id].remove(obj)
}
});
this.setGroupStyle(rect)
MyCanvas?.[this.id].add(rect)
}
MyCanvas?.[this.id].renderAll() // 刷新画布，改变group的visible属性，必须通过刷新画布，才能应用新属性值
if(layerBg){
layerBg.custom.state = ''
delete layerBg.eraser
layerBg.set({
scaleX:1,
scaleY:1,
width: scaleXY.width * scaleXY.scaleX,
height: scaleXY.height * scaleXY.scaleY,
clipPath:null,
fill: new fabric.Pattern({
source: img.getElement(), // 传入图片元素
repeat: 'no-repeat' // 设置图片不重复
}),
hasBorders: true,
hasControls: true
})
this.setGroupStyle(layerBg)
resolve('')
}else{
const rect = new fabric.Rect({
// left:0,
// top:0,
width: MyCanvas?.[this.id].width,
height: MyCanvas?.[this.id].height,
strokeWidth:0,
fill: new fabric.Pattern({
source: img.getElement(), // 传入图片元素
repeat: 'no-repeat' // 设置图片不重复
}),
custom:{
isSelectable:true,
},
hasBorders: true,
hasControls: true
});
this.setGroupStyle(rect)
MyCanvas?.[this.id].add(rect)
resolve('')
}
MyCanvas?.[this.id].renderAll() // 刷新画布，改变group的visible属性，必须通过刷新画布，才能应用新属性值
})
}
//液化
getLiquefactionImgObj(){
@@ -895,7 +979,7 @@ class MyCanvas {
}
}else if(liquefaction.type == 'layer'){
let bg = MyCanvas?.[this.id].getObjects().filter(item => item.custom?.isSelectable)[0]
let img = await this.createImage({minioUrl:data})
let img = await this.createImage({imgUrl:data})
bg.set({
fill: new fabric.Pattern({
source: img.getElement(), // 传入图片元素
@@ -948,12 +1032,38 @@ class MyCanvas {
if(item.custom?.dashed && item._objects){
cloned._objects = cloned._objects.filter(item => item.type == 'image')
}
// if(type == 'setGrid'){
if(this.exportData.width != -1){
if (cloned.type !== 'image') {
cloned.set({
left: scaleXY?.scale?cloned.left * scaleXY?.scale:cloned.left - xy.x,
top: scaleXY?.scale?cloned.top * scaleXY?.scale:cloned.top - xy.y,
scaleX: cloned.scaleX * scaleXY?.scale?scaleXY?.scale:1,
scaleY: cloned.scaleY * scaleXY?.scale?scaleXY?.scale:1
});
} else {
// 对图片对象单独处理：重新计算图片的缩放
cloned.set({
left: scaleXY?.scale?cloned.left * scaleXY?.scale:cloned.left - xy.x,
top: scaleXY?.scale?cloned.top * scaleXY?.scale:cloned.top - xy.y,
scaleX: cloned.scaleX * scaleXY?.scale?scaleXY?.scale:1, // 根据原有 scaleX 进行缩放
scaleY: cloned.scaleY * scaleXY?.scale?scaleXY?.scale:1 // 根据原有 scaleY 进行缩放
});
// 确保图片的尺寸缩放是基于原始宽高和当前缩放
var originalWidth = cloned.width * cloned.scaleX; // 原始宽度 * 当前缩放
var originalHeight = cloned.height * cloned.scaleY; // 原始高度 * 当前缩放
cloned.set({
width: originalWidth * scaleXY?.scale?scaleXY?.scale:1, // 调整后的宽度
height: originalHeight * scaleXY?.scale?scaleXY?.scale:1 // 调整后的高度
});
}
}else{
cloned.set({
left: cloned.left - xy.x,
top: cloned.top - xy.y,
left: (cloned.left - xy.x),
top: (cloned.top - xy.y),
})
// }
}
if(cloned.custom?.layerId != -1){
temporar.add(cloned)
}
@@ -1108,6 +1218,8 @@ class MyCanvas {
this.setPencilWidth()
}
async addImage (imgData){
console.log(imgData)
if(!imgData.imgUrl)imgData.imgUrl = imgData.url
let img = await this.createImage(imgData)
let position = {
// left: 0,
@@ -1122,17 +1234,18 @@ class MyCanvas {
// minioUrl:getMinioUrl(imgData.url)
},
})
if(this.dashed.isDetail)await this.createLayer({})
console.log(this.exportData.width)
if(this.exportData.width != -1)await this.createLayer({})
// if(this.dashed.isDetail)await this.createLayer({})
this.setCanvasImage(img,position,"upImgFiles",imgData)
}
createImage(imgData){
return new Promise((resolve, reject) => {
console.log(imgData)
fabric.Image.fromURL(imgData.minioUrl,(img) => {
fabric.Image.fromURL(imgData.imgUrl,(img) => {
img.set({
hasControls: true,
})
img.minioUrl=getMinioUrl(imgData.minioUrl || imgData.imgUrl)
img.minioUrl=getMinioUrl(imgData.imgUrl || imgData.minioUrl)
resolve(img)
},{ crossOrigin: "Anonymous" })
})
@@ -1184,7 +1297,6 @@ class MyCanvas {
if (key == "likeDesignCollectionList") {
imgUrl = data.designOutfitUrl;
}
console.log(img.width , img.height,img);
let imgWidth = await this.setImageWidth(key,img);
let proportion = img.height / img.width; //计算图形宽高比例
let scaleWH = imgWidth / img.width; //计算放到画布上缩小倍率
@@ -1278,11 +1390,47 @@ class MyCanvas {
setCanvasWH = (str)=>{
clearTimeout(this.setTimeOut.canvasWH)
this.setTimeOut.canvasWH = setTimeout(()=>{
MyCanvas?.[this.id].setWidth(this.canvasWH.width);
MyCanvas?.[this.id].setHeight(this.canvasWH.height);
// MyCanvas?.[this.id].width = this.canvasWH.width
// MyCanvas?.[this.id].height = this.canvasWH.height
this.initCanvasWH('updata')
// MyCanvas?.[this.id].setWidth(this.canvasWH.width);
// MyCanvas?.[this.id].setHeight(this.canvasWH.height);
var allObjects = MyCanvas?.[this.id].getObjects();
allObjects.forEach((obj)=>{
if((obj?.custom?.type == 'layer' && obj.type == 'group')||(obj.type == 'rect' && obj.custom.isSelectable)){
if((obj?.custom?.type == 'layer' && obj.type == 'group')){
// if(obj.custom.layerId == this.layer.selectLayer.id){
obj.set({
// left: -MyCanvas?.[this.id].width / 2,
// top: -MyCanvas?.[this.id].height / 2,
left: MyCanvas?.[this.id].width / 2 - this.canvasWH.layerWidth / 2,
top: MyCanvas?.[this.id].height / 2 - this.canvasWH.layerHeight / 2,
width:this.canvasWH.layerWidth,
height:this.canvasWH.layerHeight,
})
// }
// if(obj._objects.length > 1){
// obj._objects.forEach((item)=>{
// item.set({
// left: item.left + this.canvasWH.layerWidth / 2,
// top: item.top + this.canvasWH.layerHeight / 2,
// })
// })
// }
}else{
obj.set({
left: MyCanvas?.[this.id].width / 2 - this.canvasWH.layerWidth / 2,
top: MyCanvas?.[this.id].height / 2 - this.canvasWH.layerHeight / 2,
})
}
obj.set({
width:this.canvasWH.layerWidth,
height:this.canvasWH.layerHeight,
})
}
});
MyCanvas?.[this.id].renderAll();
// this.initCanvasWH('updata')
this.updataLayer()
},1000)
}
setColorHistory = (value)=>{
@@ -1411,7 +1559,48 @@ class MyCanvas {
// });
// })
// }
getBGRect(){
let rect
MyCanvas?.[this.id].getObjects().forEach((element)=>{
if(element?.custom?.type == 'layer' && element.type == 'group'){
element._objects.forEach((item)=>{
if(item?.custom?.isSelectable && item.type == 'rect'){
rect = item
}
})
}else if(element?.custom?.isSelectable && element.type == 'rect'){
rect = element
}
})
return rect
}
async upDataRectBGImg(image){
let rect = this.getBGRect()
if(!rect)return
let img = await this.createImage({imgUrl:image})
const scaleX = this.canvasWH.layerWidth / img.width; // 横向比例
const scaleY = this.canvasWH.layerWidth / img.height; // 纵向比例
// 选择较大的比例来保持完整图片显示，避免裁剪
const scale = Math.min(scaleX, scaleY);
const patternTransform = [
scale, 0,
0, scale,
(this.canvasWH.layerWidth - img.width * scale) / 2,
(this.canvasWH.layerWidth - img.height * scale) / 2
];
rect.set({
fill: new fabric.Pattern({
source: img.getElement(), // 传入图片元素
repeat: 'no-repeat', // 设置图片不重复
patternTransform: patternTransform
// patternTransform: [group.width / img.width, 0, 0, group.height / img.height, 0, 0]
}),
})
rect.minioUrl = getMinioUrl(image)
MyCanvas?.[this.id].requestRenderAll()
}
createLayer(data){
let {str,id,editImg,noErasable} = data
let image = data.img
let canvasData = MyCanvas?.[this.id].toJSON(['selectable','minioUrl','custom']);
@@ -1424,8 +1613,10 @@ class MyCanvas {
top: -MyCanvas?.[this.id].height / 2,
// left:0,
// top:0,
width: MyCanvas?.[this.id].width,
height: MyCanvas?.[this.id].height,
// width: this.canvasWH.layerWidth,
// height: this.canvasWH.layerHeight,
width: this.canvasWH.width,
height: this.canvasWH.height,
strokeWidth:0,
fill:'#FFF',
custom:{
@@ -1440,10 +1631,10 @@ class MyCanvas {
rect.clipPath = cloned
})
const group = new fabric.Group([], {
width: MyCanvas?.[this.id].width,
height: MyCanvas?.[this.id].height,
left:0,
top:0,
width: this.canvasWH.width,
height: this.canvasWH.height,
left:(this.canvasWH.width - this.canvasWH.layerWidth)/2,
top:(this.canvasWH.height - this.canvasWH.layerHeight)/2,
erasable:false,
subTargetCheck:true,
evented:false,
@@ -1461,7 +1652,7 @@ class MyCanvas {
if(str == 'init'){
group.moveTo(group.custom.selectLayerIndex)
if(image){
let img = await this.createImage({minioUrl:image})
let img = await this.createImage({imgUrl:image})
const scaleX = group.width / img.width; // 横向比例
const scaleY = group.height / img.height; // 纵向比例
// 选择较大的比例来保持完整图片显示，避免裁剪
@@ -1489,7 +1680,7 @@ class MyCanvas {
})
}else if(editImg){
group.moveTo(group.custom.selectLayerIndex)
let img = await this.createImage({minioUrl:editImg})
let img = await this.createImage({imgUrl:editImg})
rect.set({
fill: new fabric.Pattern({
source: img.getElement(), // 传入图片元素
@@ -1505,8 +1696,10 @@ class MyCanvas {
}
MyCanvas?.[this.id].add(group)
let img = group.toDataURL({
width: MyCanvas?.[this.id].width,
height: MyCanvas?.[this.id].height,
// width: this.canvasWH.layerWidth,
// height: this.canvasWH.layerHeight,
width: this.canvasWH.width,
height: this.canvasWH.height,
})
this.layer.list.unshift({
@@ -1514,8 +1707,11 @@ class MyCanvas {
id,img,isShow:true,
groupType:'Object',
index,})
await this.selectLayer(id)
if(this.layer.selectLayer.group && this.layer.selectLayer.group?.custom.groupType == 'Grid'){
await this.setGroupGrid('all')
}
MyCanvas?.[this.id].renderAll();
await this.selectLayer(id)
this.updateCanvasState()
resolve(group)
})
@@ -1532,11 +1728,9 @@ class MyCanvas {
}))
}
showBg(boolen){
let Bg = MyCanvas?.[this.id].getObjects().filter(obj => obj.custom.type == 'init')?.[0];
// MyCanvas?.[this.id].getObjects().forEach((item)=>{
// console.log(item)
// })
Bg.set({visible:boolen})
let rect = this.getBGRect()
if(!rect)return
rect.set({visible:boolen})
// if(Bg.visible){
// Bg.set({visible:false})
// }else{
@@ -1602,7 +1796,6 @@ class MyCanvas {
options.target.clipPath = cloned
})
}else if(options.target.type == 'image' && options.target.custom?.type != 'pencil' && this.dashed.isDetail ){
console.log(123321)
let scale = 1
if(options.target?.custom?.type == 'print')scale = 2
options.target.set({
@@ -1617,7 +1810,7 @@ class MyCanvas {
//判断是否可以点击空白地方进行选中
if(options.target?.custom?.dashed){
this.dashed.isDashedShow = true
options.target.set({perPixelTargetFind:false,erasable:false,hasBorders: false,hasControls: false})
options.target.set({perPixelTargetFind:false,erasable:false,hasBorders: false,hasControls: false,selectable:true})
if(this.dashed.isDetail){//判断是裁剪还是局部添加
options.target.set({selectable:false,perPixelTargetFind:true})
}else{
@@ -1647,7 +1840,7 @@ class MyCanvas {
arr.forEach((item,index)=>{
item.moveTo(index)
})
if(!options?.target?.custom?.dashed && this.layer.selectLayer.group.custom.groupType == 'Grid'){
if(!options?.target?.custom?.dashed && this.layer.selectLayer.group.custom.groupType == 'Grid' && this.clipPath.clipGroup && this.dashed.isDetail){
await new Promise((resolve, reject) => {
let clipPathElement = this.clipPath.clipGroup._objects.filter(obj => obj.custom?.dashed)[0]
let clipPathLect = this.clipPath.clipGroup.left
@@ -1705,8 +1898,10 @@ class MyCanvas {
return this.isAddToLayer(obj)
});
const group = new fabric.Group([], {
width: this.layer.selectLayer.group.width,
height: this.layer.selectLayer.group.height,
// width: this.layer.selectLayer.group.width,
// height: this.layer.selectLayer.group.height,
width:this.canvasWH.layerWidth,
height:this.canvasWH.layerHeight,
erasable:false,
selectable:false,
});
@@ -1715,8 +1910,10 @@ class MyCanvas {
let item = elements[i]
item.clone((clonedObj)=>{
this.setClone(item,clonedObj)
clonedObj.left = clonedObj.left - this.layer.selectLayer.group.width/2
clonedObj.top = clonedObj.top - this.layer.selectLayer.group.height/2
// clonedObj.height = this.layer.selectLayer.group.height
// clonedObj.width = this.layer.selectLayer.group.width
clonedObj.left = clonedObj.left - this.canvasWH.width/2
clonedObj.top = clonedObj.top - this.canvasWH.height/2
if(clonedObj.custom?.dashed){
let clipPath = clonedObj._objects.filter(item => item.type != 'image')[0]
clonedObj.remove(clipPath)
@@ -1727,8 +1924,10 @@ class MyCanvas {
})
}
this.updataLayerImg(this.layer.selectLayer.id,group.toDataURL({
width: this.layer.selectLayer.group.width,
height: this.layer.selectLayer.group.height
// left:this.canvasWH.width / 2 - this.canvasWH.layerWidth/2,
// top:this.canvasWH.height / 2 - this.canvasWH.layerWidth/2,
width:this.canvasWH.layerWidth,
height:this.canvasWH.layerHeight,
})
)
},500)
@@ -1763,7 +1962,7 @@ class MyCanvas {
}
async selectLayer(id){
await new Promise(async (resolve, reject) => {
if(this.layer.selectLayer.id != -1){
if(this.layer.selectLayer.id != -1 && this.layer.selectLayer.group){
await this.mergeGroup()
}
let group = await this.lookingLayer(id,'setRubber')
@@ -1778,17 +1977,17 @@ class MyCanvas {
}
async mergeGroup(){
const elements = MyCanvas?.[this.id].getObjects().filter(obj => this.isAddToLayer(obj));
let isClipPath = MyCanvas?.[this.id].getObjects().filter(obj => obj.custom?.dashed);
if(isClipPath.length>0)await this.setGroupGrid('all')
let group = await this.lookingLayer(this.layer.selectLayer.id,'setlayerIndex')
group.set({visible:true})
group.set({visible:true,evented:false})
for (let index = 0; index < elements.length; index++) {
const item = elements[index];
await new Promise((resolve, reject) => {
item.clone((v)=>{
this.setClone(item,v)
v.left = v.left - group.width/2
v.top = v.top - group.height/2
// v.left = v.left - MyCanvas?.[this.id].width / 2
// v.top = v.top - MyCanvas?.[this.id].height / 2
v.left = v.left - (this.canvasWH.width - this.canvasWH.layerWidth)/2 - this.layer.selectLayer.group.width/2
v.top = v.top - (this.canvasWH.height - this.canvasWH.layerHeight)/2 - this.layer.selectLayer.group.height/2
if(v.custom?.dashed){
// MyCanvas?.[this.id].remove(item)
// let img = v._objects.filter(item => item.type == 'image')[0]
@@ -1814,14 +2013,18 @@ class MyCanvas {
async expandGroup(){
const elements = this.layer.selectLayer.group._objects.filter(obj => this.isAddToLayer(obj));
// fabric.util.enlivenObjects(elements, (clonedObjects) => {
this.layer.selectLayer.group.set({visible:false})
let isClipPath = MyCanvas?.[this.id].getObjects().filter(obj => obj.custom?.dashed);
if(isClipPath.length>0)await this.setGroupGrid('all')
this.layer.selectLayer.group.set({evented:true})
for (let index = 0; index < elements.length; index++) {
const item = elements[index];
await new Promise((resolve, reject) => {
item.clone((v)=>{
this.setClone(item,v)
v.left = v.left + this.layer.selectLayer.group.width/2
v.top = v.top + this.layer.selectLayer.group.height/2
// v.left = v.left + this.layer.selectLayer.group.width/2
// v.top = v.top + this.layer.selectLayer.group.height/2
v.left = v.left + (this.canvasWH.width - this.canvasWH.layerWidth)/2 + this.layer.selectLayer.group.width/2
v.top = v.top + (this.canvasWH.height - this.canvasWH.layerHeight)/2 + this.layer.selectLayer.group.height/2
if(v.custom?.isSelectable && this.layer.selectLayer.group.custom.noErasable){
v.set({
erasable:false
@@ -1841,6 +2044,7 @@ class MyCanvas {
// MyCanvas?.[this.id].add(img)
// }
}else{
console.log(v,'add')
MyCanvas?.[this.id].add(v)
}
if(index == elements.length - 1){
@@ -1928,7 +2132,7 @@ class MyCanvas {
}else if(this.keyDown.indexOf('KeyI') > -1){
this.getColor()//吸色
}else if(this.keyDown.indexOf('KeyM') > -1){
setOperation('move')
this.setOperation('move')
}else if((this.keyDown.indexOf('ControlLeft') > -1 || this.keyDown.indexOf('MetaLeft') > -1) && event.code == 'KeyD'){
MyCanvas?.[this.id].discardActiveObject().renderAll();
}else if((this.keyDown.indexOf('ControlLeft') > -1 || this.keyDown.indexOf('MetaLeft') > -1) && event.code == 'KeyO'){
@@ -2049,7 +2253,7 @@ class MyCanvas {
}
let elements = MyCanvas[this.id].getObjects().filter(obj => this.isAddToLayer(obj));
let imgData = await this.groupToImg(elements,position,'clipPath')//矩形裁剪图片
let img = await this.createImage({minioUrl:imgData})
let img = await this.createImage({imgUrl:imgData})
// cloned._objects = cloned._objects.filter(item => item.type == 'image')
let clipPathElement = cloned._objects.filter(obj => obj.type != 'image')[0]
@@ -2091,17 +2295,16 @@ class MyCanvas {
this._clipboard = copyObj;
}
async paste(){//粘贴
paste(){//粘贴
if(!this._clipboard){
return
}
await this.createLayer({})
this._clipboard.clone(clonedObj => {
// this.setClone(this._clipboard,clonedObj)
this._clipboard.clone(async clonedObj => {
MyCanvas?.[this.id].discardActiveObject() // 取消选择
clonedObj.set({
selectable: true
})
if(this.exportData.width != -1)await this.createLayer({})
if (clonedObj.type === 'activeSelection') {
// 活动选择需要一个对画布的引用
clonedObj.forEachObject((obj)=>{
@@ -2111,7 +2314,6 @@ class MyCanvas {
clonedObj.setCoords()
} else {
MyCanvas?.[this.id].add(clonedObj)
// this.layer.selectLayer.group.add(clonedObj)
}
MyCanvas?.[this.id].setActiveObject(clonedObj)
MyCanvas?.[this.id].requestRenderAll()
@@ -2120,8 +2322,8 @@ class MyCanvas {
this.updateCanvasState()
}
isSelectable(obj){//判断元素是否允许选中
if(this.dashed.isDetail){
return (obj.custom?.type != 'layer' && (!obj.custom?.isSelectable || this.layer.selectLayer.group.custom.groupType == 'Grid') && !obj.isType('path') && !obj.custom?.dashed)
if(!this.dashed.isDetail){
return (obj.custom?.type != 'layer' && (!obj.custom?.isSelectable || this.layer.selectLayer.group.custom.groupType == 'Grid') && !obj.isType('path'))
}else{
return (obj.custom?.type != 'layer' && (!obj.custom?.isSelectable || this.layer.selectLayer.group.custom.groupType == 'Grid') && !obj.isType('path') && (this.dashed.isDetail || !obj.custom?.dashed))
}
@@ -2178,13 +2380,28 @@ class MyCanvas {
)
}
setLoadFromJSON(data,fun){
MyCanvas?.[this.id].loadFromJSON(data.canvas, fun);
if(data.groupList.length == 0){
console.log(this.layer)
}else{
this.layer.list = data.groupList
this.layer.selectLayer.id = data.groupList[0].id
}
MyCanvas?.[this.id].loadFromJSON(data.canvas, async ()=>{
fun()
if(data.groupList.length == 0){
}else{
data.groupList.sort((a, b) => a.index - b.index);
data.groupList.forEach((item, i) => {
item.index = i + 1; // 从1开始
});
this.layer.currentIndex = data.groupList.length
this.layer.list = data.groupList
this.layer.selectLayer.id = data.groupList[0].id
await this.selectLayer(this.layer.list[this.layer.list.length-1].id)
let arr = MyCanvas?.[this.id].getObjects().sort((a, b) =>{
return a.custom.selectLayerIndex - b.custom.selectLayerIndex;
});
arr.forEach((item,index)=>{
item.moveTo(index)
})
this.addEvent()
}
});
}
temporarilyExport(data){
let scaleXY = {
@@ -2220,16 +2437,33 @@ class MyCanvas {
goal.erasable = obj.erasable
if(obj.minioUrl)goal.minioUrl = obj.minioUrl
}
getElement(){
let list = []
if(MyCanvas?.[this.id]?.getObjects){
list = MyCanvas?.[this.id].getObjects().filter(obj => this.isAddToLayer(obj) && !obj.custom.dashed && obj.type && obj.erasable);
}
return list
}
//导出除了底图
async detailSubmit(){
return await new Promise(async (resolve, reject) => {
let list = MyCanvas?.[this.id].getObjects().filter(obj => this.isAddToLayer(obj) && !obj.custom.dashed && obj.type && obj.erasable);
let list
if(this.exportData.width == -1){
list = MyCanvas?.[this.id].getObjects().filter(obj => this.isAddToLayer(obj) && !obj.custom.dashed && obj.type && obj.erasable);
}else{
list = MyCanvas?.[this.id].getObjects().filter(obj => !obj.custom.dashed && obj.type);
}
let layerBg = list.filter(obj => obj.custom.isSelectable)[0]
let canvasWidth = layerBg?.width?layerBg?.width:MyCanvas?.[this.id].width
let canvasHeight = layerBg?.height?layerBg?.height:MyCanvas?.[this.id].height
let exportWidth = this.exportData.width == -1?canvasWidth:this.exportData.width
let exportHeight = canvasHeight / canvasWidth * exportWidth
let scaleXY = {
scaleX:layerBg?.scaleX?layerBg?.scaleX:1,
scaleY:layerBg?.scaleY?layerBg?.scaleY:1,
width:layerBg?.width?layerBg?.width:MyCanvas?.[this.id].width,
height:layerBg?.height?layerBg?.height:MyCanvas?.[this.id].height,
width:exportWidth,
height:exportHeight,
scale:exportWidth / canvasWidth,
}
let imgData = await this.groupToImg(list,{},'setGrid',scaleXY)
resolve(imgData)