This commit is contained in:
X1627315083
2025-04-01 15:25:15 +08:00
parent 70ed89049a
commit b6e5f05f06
101 changed files with 11533 additions and 1015 deletions

View File

@@ -9,6 +9,8 @@ import {
JSSetRemoveImage,
} from "@/tool/canvasDrawingCopy";
import { getMousePosition } from "@/tool/mdEvent";
import { getMinioUrl } from "@/tool/util";
import { file } from "jszip";
class MyCanvas {
constructor(id) {
@@ -303,7 +305,7 @@ class MyCanvas {
JSchangeType(MyCanvas?.[this.id],'init')
// await this.createBg()
await this.createLayer({str:'init',img:img,noErasable:data?.noErasable || false})//创建图层并且使用
if(img){
if(img && editGroupImg){
this.dashed.isDetail = true
await this.createLayer({editImg:editGroupImg,noErasable:data?.noErasable || false})//创建图层并且使用
}
@@ -317,7 +319,7 @@ class MyCanvas {
let scale
if(this.canvasWH.width>this.canvasWH.height)scale = this.canvasDomParent.offsetWidth / this.canvasWH.width
if(this.canvasWH.width<this.canvasWH.height)scale = this.canvasDomParent.offsetHeight / this.canvasWH.height
if(this.canvasWH.width == this.canvasWH.height)scale = this.canvasDomParent.offsetHeight / this.canvasWH.height
if(this.canvasWH.width == this.canvasWH.height)scale = this.canvasDomParent.offsetWidth / this.canvasWH.width
let x = this.canvasWH.width / 2
let y = this.canvasWH.height / 2
if(str == 'updata'){
@@ -1116,18 +1118,21 @@ class MyCanvas {
}
img.set({
custom:{
type:'upImgFiles'
}
type:'upImgFiles',
// minioUrl:getMinioUrl(imgData.url)
},
})
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) => {
img.set({
hasControls: true
hasControls: true,
})
img.minioUrl=getMinioUrl(imgData.minioUrl || imgData.imgUrl)
resolve(img)
},{ crossOrigin: "Anonymous" })
})
@@ -1175,17 +1180,12 @@ class MyCanvas {
return imgWidth
}
async setCanvasImage(img,position,key,data){
let minioUrl = ''//表示收藏或者generate
let imgUrl = data.imgUrl
if (key == "likeDesignCollectionList") {
imgUrl = data.designOutfitUrl;
}
console.log(img.width , img.height,img);
let imgWidth = await this.setImageWidth(key,img);
if(imgUrl?.split('?')){
let url = imgUrl.split('?')[0]
var match = url.match(/:(\d+)\/(.*)/);
minioUrl = match[2]
}
let proportion = img.height / img.width; //计算图形宽高比例
let scaleWH = imgWidth / img.width; //计算放到画布上缩小倍率
let scale = {
@@ -1195,7 +1195,6 @@ class MyCanvas {
img.set({
left:position.left - img.width*scale.X/2,
top:position.top - img.height*scale.Y / 2,
minioUrl,
scaleX:scale.X,
scaleY:scale.Y,
});
@@ -1432,6 +1431,7 @@ class MyCanvas {
custom:{
layerId:id,
isSelectable:true,
type:str,
},
// erasable:false,
selectable:false,
@@ -1462,13 +1462,25 @@ class MyCanvas {
group.moveTo(group.custom.selectLayerIndex)
if(image){
let img = await this.createImage({minioUrl:image})
const scaleX = group.width / img.width; // 横向比例
const scaleY = group.height / img.height; // 纵向比例
// 选择较大的比例来保持完整图片显示,避免裁剪
const scale = Math.min(scaleX, scaleY);
const patternTransform = [
scale, 0,
0, scale,
(group.width - img.width * scale) / 2,
(group.height - img.height * scale) / 2
];
rect.set({
fill: new fabric.Pattern({
source: img.getElement(), // 传入图片元素
repeat: 'no-repeat', // 设置图片不重复
patternTransform: [group.width / img.width, 0, 0, group.height / img.height, 0, 0]
patternTransform: patternTransform
// patternTransform: [group.width / img.width, 0, 0, group.height / img.height, 0, 0]
}),
})
rect.minioUrl = getMinioUrl(image)
}
group.add(rect)
group.clone((cloned)=>{
@@ -1519,6 +1531,19 @@ class MyCanvas {
height: MyCanvas?.[this.id].height
}))
}
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})
// if(Bg.visible){
// Bg.set({visible:false})
// }else{
// Bg.set({visible:true})
// }
MyCanvas?.[this.id].renderAll() // 刷新画布改变group的visible属性必须通过刷新画布才能应用新属性值
}
async addPartImg(file,str,data){
// let {erasable} = data
@@ -1576,7 +1601,8 @@ class MyCanvas {
}
options.target.clipPath = cloned
})
}else if(options.target.type == 'image' && options.target.custom?.type != 'pencil'){
}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({
@@ -2074,8 +2100,6 @@ class MyCanvas {
// this.setClone(this._clipboard,clonedObj)
MyCanvas?.[this.id].discardActiveObject() // 取消选择
clonedObj.set({
left: clonedObj.left,
top: clonedObj.top,
selectable: true
})
if (clonedObj.type === 'activeSelection') {
@@ -2108,7 +2132,7 @@ class MyCanvas {
//撤回反撤回
//设置画布监听修改添加事件,用来做撤回功能
updateCanvasState(str){
let canvasData = MyCanvas?.[this.id].toJSON(['custom','selectable','minioUrl','perPixelTargetFind','subTargetCheck','evented']);
let canvasData = MyCanvas?.[this.id].toJSON(['custom','selectable','MINIOURL','perPixelTargetFind','subTargetCheck','evented']);
if(canvasData.clipPath){
canvasData.clipPath.left = 0
canvasData.clipPath.top = 0
@@ -2153,6 +2177,15 @@ class MyCanvas {
},MyCanvas?.[this.id].renderAll.bind(MyCanvas?.[this.id]),
)
}
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
}
}
temporarilyExport(data){
let scaleXY = {
scaleX:data?.scaleX?data?.scaleX:1,
@@ -2190,7 +2223,7 @@ class MyCanvas {
//导出除了底图
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);
let list = MyCanvas?.[this.id].getObjects().filter(obj => this.isAddToLayer(obj) && !obj.custom.dashed && obj.type && obj.erasable);
let layerBg = list.filter(obj => obj.custom.isSelectable)[0]
let scaleXY = {
scaleX:layerBg?.scaleX?layerBg?.scaleX:1,

View File

@@ -56,12 +56,21 @@ axios.interceptors.request.use((config) => {
return Promise.reject(error);
});
let isLoginTime = false
const binaryToUrl = (binary,type = 'application/octet-stream')=>{
let blob = new Blob([binary], {type});
let url = URL.createObjectURL(blob);
return url
}
//返回状态判断(添加响应拦截器)
axios.interceptors.response.use((res) =>{
// if(res.data.data == null){
// message.warning(res.data.errMsg)
// return Promise.reject(res.data);
// }else
if(res.config.env.binary){
let url = binaryToUrl(res.data,res.config.env.binaryType)
return Promise.resolve({url,data:res.data})
}
if (res.data) {
if (res.data.errCode === 0) {
// message.error(res.data.errMsg)
@@ -218,8 +227,30 @@ export const Https = {
getRelPublicClassificationIdList:`/api/classification/getRelPublicClassificationIdList`,//多选获取公共标签
editRelPublicClassificationIdList:`/api/classification/editRelPublicClassificationIdList`,//多选修改公共标签
//模块化
saveOrUpdate:`/api/project/saveOrUpdate`,//模块化新增修改
getModuleContent:`/api/project/getModuleContent`,//获取模块内容
saveModuleContent:`/api/project/saveModuleContent`,//储存模块内容
historyProject:`/api/project/page`,//项目记录
//3d
threeDPage:`/api/project/threeDPage`,
downloadZip:`/api/project/downloadZip`,//下载zip
getThreeDSize:`/api/project/getThreeDSize`,//下载列表
getLayoutDetail:`/api/project/getLayoutDetail`,//获取3d详情
getThreeDGlb:`/api/project/getThreeDGlb`,
selectHistoryProject:`/api/project/choose`,//选择项目
getMannequinDetail:`/api/project/getMannequinDetail`,//模块化查看模特点位
modifyProportion:`/api/generate/modifyProportion`,//模特拉伸
poselikeOrDisike:`/api/generate/likeOrDislike`,//postTransform like
//拼贴
genSketchRecon:`/api/generate/genSketchRecon`,
saveReconCanvas:`/api/generate/saveReconCanvas`,
//动作变换
poseTransform:`/api/generate/poseTransform`,
poseTransformResult:`/api/generate/poseTransformResult`,
batchUpdateLibraryName:'/api/library/batchUpdateLibraryName',//Library修改用户文件名
batchDeleteLibrary:'/api/library/batchDeleteLibrary',//删除library
queryLibraryTopAndBottomPage:'/api/library/queryLibraryTopAndBottomPage',//Library分页列表(查询top和bottom)
@@ -330,6 +361,14 @@ export const Https = {
//活动
activity:`/api/account/activity`,
//bradDNA
brandLogoUpload:`/api/history/brandLogoUpload`,//上传bradDNA
brandDNAGenerate:`/api/history/brandDNAGenerate`,//上传bradDNA
brandDNAUpload:`/api/history/brandDNAUpload`,//上传DNA图片
brandDNAPage:`/api/history/brandDNAPage`,//brand列表
brandDNASaveOrUpdate:`/api/history/brandDNASaveOrUpdate`,//提交个人信息
//调查问卷
questionnaire:`/api/account/questionnaire`,//保存画布

166
src/tool/listData.js Normal file
View File

@@ -0,0 +1,166 @@
const projectList = {
seriesDesign:[
{
icon:'fi fi-rr-grid',
value:'moodBoard',
name:'Moodboard',
task:'1-1',
},{
icon:'fi fi-rs-objects-column',
value:'printBoard',
name:'Printboard',
task:'1-2',
},{
icon:'fi fi-rr-palette',
value:'colorBoard',
name:'Colorboard',
task:'1-3',
},{
icon:'fi icon iconfont icon-a-waitao_changkuanwaitao11x',
value:'sketchBoard',
name:'Sketchboard',
task:'1-4',
},{
icon:'fi fi-rs-people',
value:'mannequin',
name:'Mannequin',
task:'1-5',
},{
icon:'fi fi-rs-paintbrush-pencil',
value:'design',
name:'Design',
task:'2-1',
},{
icon:'fi fi-ss-box-open',
value:'toProduct',
name:'To Product',
task:'3-1',
},{
icon:'fi fi-br-keyboard-brightness',
value:'relight',
name:'Relight',
task:'4-1',
},{
icon:'fi fi-rr-play-alt',
value:'poseTransfer',
name:'Transfer Pose',
task:'4-2',
},{
icon:'fi fi-rr-pen-swirl',
value:'canvas',
name:'Canvas',
task:'5-1',
},
],
singleProductDesign:[
{
icon:'fi fi-rr-grid',
value:'moodBoard',
name:'Moodboard',
task:'1-1',
},{
icon:'fi fi-rs-objects-column',
value:'printBoard',
name:'Printboard',
task:'1-2',
},{
icon:'fi fi-rr-palette',
value:'colorBoard',
name:'Colorboard',
task:'1-3',
},{
icon:'fi icon iconfont icon-a-waitao_changkuanwaitao11x',
value:'sketchBoard',
name:'Sketchboard',
task:'1-4',
},{
icon:'fi fi-rs-paintbrush-pencil',
value:'design',
name:'Design',
task:'2-1',
},{
icon:'fi fi-ss-box-open',
value:'toProduct',
name:'To Product',
task:'3-1',
},{
icon:'fi fi-br-keyboard-brightness',
value:'relight',
name:'Relight',
task:'4-1',
},{
icon:'fi fi-rr-pen-swirl',
value:'canvas',
name:'Canvas',
task:'5-1',
},
],
printDesign:[
{
icon:'fi fi-rs-objects-column',
value:'printBoard',
name:'Printboard',
task:'1-1',
},{
icon:'fi fi-rr-pen-swirl',
value:'canvas',
name:'Canvas',
task:'2-1',
}
],
productDrawingDesign:[
{
icon:'fi fi-ss-box-open',
value:'toProduct',
name:'To Product',
task:'1-1',
},{
icon:'fi fi-br-keyboard-brightness',
value:'relight',
name:'Relight',
task:'2-1',
},{
icon:'fi fi-rr-play-alt',
value:'poseTransfer',
name:'Transfer Pose',
task:'2-2',
},{
icon:'fi fi-rr-pen-swirl',
value:'canvas',
name:'Canvas',
task:'3-1',
}
],
printingDesign3D:[
{
icon:'fi fi-rr-model-cube',
value:'patternMaking3D',
name:'3D Pattern Making',
task:'1-1',
},{
icon:'fi fi-br-download',
value:'download',
name:'Download',
task:'2-1',
}
],
sketchDesign:[
{
icon:'fi icon iconfont icon-a-waitao_changkuanwaitao11x',
value:'sketchBoard',
name:'Sketchboard',
task:'1-1',
},{
icon:'i class="fi fi-rr-puzzle-alt',
value:'deReconstruction',
name:'De/Reconstruction',
task:'2-1',
},{
icon:'fi fi-rr-pen-swirl',
value:'canvas',
name:'Canvas',
task:'3-1',
}
],
}
export {projectList}