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

detail更新

Browse Source
This commit is contained in:
X1627315083
2025-02-25 15:32:55 +08:00
parent 3b230ae222
commit 6cfcd4ce16
28 changed files with 1701 additions and 1056 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
public/js/fabric.brushes.js
View File

@@ -176,7 +176,10 @@ fabric.BaseBrush.prototype.convertToImg = function() {
left:((xy.x)/pixelRatio-pointerX)/this.canvas.getZoom(),
top:((xy.y)/pixelRatio-pointerY)/this.canvas.getZoom(),
'scaleX':1/pixelRatio/this.canvas.getZoom(),
'scaleY':1/pixelRatio/this.canvas.getZoom()
'scaleY':1/pixelRatio/this.canvas.getZoom(),
custom:{
type:'pencil'
}
}).setCoords();
this.canvas.add(img).clearContext(this.canvas.contextTop);
this.canvas.clearContext(this.canvas.contextTop);

4
src/assets/style/style.css
View File

@@ -887,10 +887,10 @@ tr > .ant-picker-cell-in-view.ant-picker-cell-range-hover-start:last-child::afte
.generalModel.fullScreen {
max-width: 100%;
}
.generalModel.fullScreen .ant-modal-content {
.generalModel.fullScreen > .ant-modal-content {
border-radius: 0rem;
}
.generalModel.fullScreen .ant-modal-body {
.generalModel.fullScreen > .ant-modal-body {
padding: 2.5rem 3rem;
}
.generalModel .ant-modal-content {

4
src/assets/style/style.less
View File

@@ -960,10 +960,10 @@ tr > .ant-picker-cell-in-view.ant-picker-cell-range-hover-start:last-child::afte
height: calc(65rem*1.2);
&.fullScreen{
max-width: 100%;
.ant-modal-content{
> .ant-modal-content{
border-radius: 0rem;
}
.ant-modal-body{
> .ant-modal-body{
padding: 2.5rem 3rem;
}
}

1
src/component/Canvas/argument.vue
View File

@@ -167,6 +167,7 @@
}
input{
height: 100%;
width: 12rem;
}
&.wH input{
width: 5rem;

2
src/component/Canvas/index.vue
View File

@@ -52,7 +52,7 @@ export default defineComponent({
let liquefactionData = ref()
let groupDashed = ref(null)//用来判断是否需要对group添加img
let canvasType = 'export'
let canvasObj = reactive(canvasGeneral)
let canvasObj = reactive(new canvasGeneral())
provide('canvasType',canvasType)
provide('canvasObj',canvasObj)
provide('isShowMark',isShowMark)

8
src/component/Detail/addDetails.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="addDetailsModal" ref="addDetailsModal"></div>
<div class="addDetailsModal generalModel" ref="addDetailsModal"></div>
<a-modal
class="addDetails_modal generalModel"
v-model:visible="addDetails"
@@ -49,7 +49,7 @@ export default defineComponent({
let addDetails = ref(false);
let init = (data,index)=>{
addDetails.value = true
addDetail.imgUrl = data.path
addDetail.imgUrl = data.sketchString || data.path
}
let submitBase64Data = (data)=>{
emit('setSloganData',data)
@@ -77,6 +77,10 @@ export default defineComponent({
});
</script>
<style lang="less" scoped>
.addDetailsModal{
width: 0;
height: 0;
}
.addDetails_modal {
.closeIcon {
z-index: 2;

404
src/component/Detail/editFrontBack.vue
View File

@@ -1,50 +1,51 @@
<template>
<div class="editFrontBack_center">
<div class="editFrontBack_center_btn editFrontBack_center_item" :class="{spread:spreadState}">
<!-- <div @click="setOperation('')" class="editFrontBack_center_btn_item">
<div>新增</div>
</div> -->
<!-- <div class="editFrontBack_center_btn editFrontBack_center_item" :class="{spread:spreadState}">
<i class="icon iconfont icon-chehui" @click="historyState('')"></i>
<i class="icon iconfont icon-fanchehui" @click="historyState('reverse')"></i>
<!-- <i class="icon iconfont icon-move" @click="setOperation('move')" :class="{active:canvasState == 'move'}"></i> -->
<i class="icon iconfont icon-bianji" @click="setOperation('pencil')" :class="{active:canvasState == 'pencil'}"></i>
<!-- <i class="icon iconfont icon-xiangpi_huaban1" @click="setOperation('eraser')" :class="{active:canvasState == 'eraser'}"></i> -->
<div class="editFrontBack_center_btn_colorRed" @click="setOperationColor('rgb(255,0,0)')" :class="{active:(canvasState != 'eraser' && rgba == 'rgb(255,0,0)')}" title="front">front</div>
<div class="editFrontBack_center_btn_colorGreen" @click="setOperationColor('rgb(0,255,0)')" :class="{active:(canvasState != 'eraser' && rgba == 'rgb(0,255,0)')}" title="back">back</div>
<div class="editFrontBack_center_btn_colorWhite" @click="setOperation('eraser')" :class="{active:canvasState == 'eraser'}" title="background">background</div>
<input type="range" v-show="canvasState != 'move'" @input="setPencilWidth" min="1" max="50" v-model="canvasPencilWidth[canvasState]">
<!-- <div class="icon iconfont icon-xiala" :class="{btnRotate:spreadState}" @click="()=>spreadState = !spreadState"></div> -->
</div>
</div> -->
<div class="exportCanvasBox_center_box">
<div class="exportCanvasBox_center">
<div class="editFrontBack_bgImg" v-show="loadingShow">
<img :src="imgData?.undividedLayer" alt="">
</div>
<div class="editFrontBack_pencilbtn" v-show="loadingShow" :style="frontBackCanvasObj.pencilbtnStyle" style="display: block;"></div>
</div>
<div class="editFrontBack_pencilbtn" v-show="loadingShow" :style="pencilbtnStyle"></div>
<!-- <div class="editFrontBack_pencilbtn" v-show="loadingShow" :style="pencilbtnStyle"></div> -->
<!--
<div class="editFrontBack_pencilbtn" v-show="loadingShow" :style="frontBackCanvasObj.pencilbtnStyle" style="display: block;"></div>
{{frontBackCanvasObj.pencilbtnStyle}} -->
</div>
</div>
</template>
<script>
import { defineComponent, ref, reactive, watch, onMounted, nextTick, toRefs } from "vue";
import { defineComponent, ref, reactive, inject, onMounted, nextTick, toRefs, onBeforeUnmount, watch, computed } from "vue";
import { formatTime,segmentImage } from "@/tool/util";
import { exportSele,JSRectUpdata,JSchangeType,JScanvasMouseDown,JSSetRemoveImage,JScreateCheck,JSSetTexture } from "@/tool/canvasDrawing";
import { getMousePosition } from "@/tool/mdEvent";
import { useStore } from "vuex";
import { useI18n } from "vue-i18n";
import canvasGeneral from "@/tool/canvasGeneral";
export default defineComponent({
components: {
},
// emits: ['setSloganData'],
props:['patchData','imgDomIndex'],
setup(props,{emit}) {
const store = useStore();
let presentState = ref('paypal');
let loadingShow = ref(false);
let { t } = useI18n();
let canvas = reactive({});
// let canvas = new frontBackCanvasObjCopy();
let canvas = null;
let frontBackCanvasObj = inject('frontBackCanvasObj')
let ratio = [1,1]
let exportWH = 0
let imgDomIndex = 0
let imgData = ref()
let pencilbtnStyle = ref({
background:'',
@@ -54,17 +55,20 @@ export default defineComponent({
left:0+'px',
top:0+'px',
})
let selectDetail = computed(()=>store.state.DesignDetailCopy.selectDetail)
// let a = computed(()=>{
// console.log(123);
// return props.patchData
// })
watch(()=>props.imgDomIndex,(newVal,oldVal)=>{
if(newVal == -1) return
imgDomIndex = newVal
watch(()=>pencilbtnStyle.value.background,(newVal)=>{
frontBackCanvasObj.brushwork.color = newVal
frontBackCanvasObj.setPencilColor()
})
onMounted(()=>{
props.patchData.front.imageUrl= ''
clearTimeout(setTimeSubmit)
init(props.patchData.front[newVal],'')
// init(props.patchData.front[props.imgDomIndex],'')
})
let canvasBtn = reactive({
canvasState:'move',
@@ -76,11 +80,10 @@ export default defineComponent({
})
let canvasWH = ref(0);
let exportUrl = ''
let reverseCanvasState = ref([])//存放canvas操作
let normalCanvasState = ref([])//存放canvas操作
let canvasState = ref()//存放canvas操作
let keyDown = []//监听键盘的 keydown 和 keyup 事件
let down = false
let init = (data,index)=>{
normalCanvasState.value = []
reverseCanvasState.value = []
@@ -89,8 +92,6 @@ export default defineComponent({
nextTick(()=>{
let canvasBox = document.querySelector(".editFrontBack_center .exportCanvasBox_center");
let editFrontBack_bgImg = document.querySelector(".editFrontBack_center .editFrontBack_bgImg");
document.addEventListener("keydown", canvasKeyDown);
document.addEventListener("keyup", canvasKeyUp);
document.removeEventListener('mousemove', mouseMove);
document.removeEventListener('touchmove', touchmove);
let img = new Image();
@@ -114,70 +115,39 @@ export default defineComponent({
editFrontBack_bgImg.style.width = canvasWH.value * wScale+'px'
editFrontBack_bgImg.style.height = canvasWH.value * hScale+'px'
ratio = [wScale,hScale]
canvas = canvasGeneral.canvasInit(canvasBox,{
// canvas = frontBackCanvasObj.canvasInit(canvasBox,{
// width:canvasWH.value * wScale,
// height:canvasWH.value * hScale,
// })
await frontBackCanvasObj.canvasInit(canvasBox,{
width:canvasWH.value * wScale,
height:canvasWH.value * hScale,
})
},data.undividedLayer)
canvas = frontBackCanvasObj.canvas
frontBackCanvasObj.setOperation('pencil')
pencilbtnStyle.value.background = rgba.value
console.log(frontBackCanvasObj,frontBackCanvasObj.setPencilWidth);
frontBackCanvasObj.setPencilWidth()
fabric.Object.prototype.cornerSize = 10
fabric.Object.prototype.transparentCorners = false
exportUrl = data.maskUrl
// canvas.on('mouse:wheel', opt => {
// const delta = opt.e.deltaY // 滚轮，向上滚一下是 -100，向下滚一下是 100
// let zoom = canvas.getZoom() // 获取画布当前缩放值
// zoom *= 0.999 ** delta
// if (zoom > 20) zoom = 20
// if (zoom < 0.01) zoom = 0.01
// // console.log(zoom);
// canvas.zoomToPoint(
// { // 关键点
// x: opt.e.offsetX,
// y: opt.e.offsetY
// },
// zoom
// )
// opt.e.preventDefault()
// opt.e.stopPropagation()
await frontBackCanvasObj.addPartImg({minioUrl:data.maskUrl},'')
// await new Promise((resolve, reject) => {
// fabric.Image.fromURL(data.maskUrl, function(img) {
// // 设置背景图对象的宽度和高度与 canvas 相同
// canvas.add(img)
// resolve('')
// },{ crossOrigin: "Anonymous" });
// })
await new Promise((resolve, reject) => {
fabric.Image.fromURL(data.maskUrl, function(img) {
// 设置背景图对象的宽度和高度与 canvas 相同
img.scaleToWidth(canvas.width);
img.scaleToHeight(canvas.height);;
img.set({
// width: canvas.width,
// height: canvas.height,
// scaleX:2,
// scaleY:1,
scaleX: canvas.width / img.width,
scaleY: canvas.height / img.height
});
// 将背景图添加到 canvas 的底层
// canvas.add(img);
canvas.setBackgroundImage(img, canvas.renderAll.bind(canvas));
if(!fabric.Object.prototype.controls.deleteControl){
JSSetRemoveImage(deleteObj)
}else{
fabric.Object.prototype.controls.deleteControl.mouseUpHandler = deleteObj
}
setPencilWidth()
updateCanvasState()
resolve('')
},{ crossOrigin: "Anonymous" });
})
// 鼠标抬起事件
canvas.on('mouse:up', function(event) {
if(canvasBtn.canvasState != 'move'){
updateCanvasState('mouseUp')
}
});
//画布上移动
// canvas.on("mouse:move", event =>setCanvasMove(event));
canvas.on('mouse:up', (event)=> {
updateCanvasState('mouseUp')
});
document.addEventListener('mousemove', mouseMove);
document.addEventListener('touchmove', touchmove);
setOperation('pencil')
createSetTimeSubmit()
img.remove()
}
@@ -185,128 +155,15 @@ export default defineComponent({
})
}
let canvasKeyDown = (event) => {
if(keyDown.indexOf(event.key)>-1){
const setBackground = (value)=>{
if(value == 'background'){
frontBackCanvasObj.setOperation('eraser')
}else{
keyDown.push(event.code)
if(keyDown.indexOf('ControlLeft') > -1 && keyDown.indexOf('KeyZ') > -1 && keyDown.indexOf('ShiftLeft') > -1){
historyState('reverse')
}else if(keyDown.indexOf('ControlLeft') > -1 && keyDown.indexOf('KeyZ') > -1){
historyState('')
}
frontBackCanvasObj.setOperation('pencil')
frontBackCanvasObj.brushwork.color = value
frontBackCanvasObj.pencilColor()
}
}
let canvasKeyUp = (event) =>{
keyDown = keyDown.filter(function(item) {
return event.code !== item;
})
}
let setClone = ()=>{
let canvasBox = document.querySelector(".editFrontBack_center .exportCanvasBox_center");
let oldCanvasDom = canvasBox.querySelector('.canvas-container')
let oldCanvasDom1 = canvasBox.querySelector('canvas')
if(oldCanvasDom)oldCanvasDom.remove()
if(oldCanvasDom1)oldCanvasDom1.remove()
loadingShow.value = false
}
let clearCanvas = ()=>{
document.removeEventListener("keydown", canvasKeyDown);
document.removeEventListener("keyup", canvasKeyUp);
}
let rgba = ref('rgb(255,0,0)')
let mouseMove = (event)=>{
let e = getMousePosition(event,false)
setCanvasMove(e)
}
let touchmove = (event)=>{
let e = getMousePosition(event,true)
setCanvasMove(e)
}
let setCanvasMove = (event)=>{
if(canvas.isDrawingMode){
canvas.setCursor('none');
}
let canvasCenterBox = document.querySelector(".editFrontBack_center .exportCanvasBox_center_box");
if(!canvasCenterBox)return
let parentX = event.clientX - canvasCenterBox.getBoundingClientRect().left
let parentY = event.clientY - canvasCenterBox.getBoundingClientRect().top
pencilbtnStyle.value.left = parentX + "px"
pencilbtnStyle.value.top = parentY+'px'
}
let setOperation = (str)=>{
if(!canvas)return
canvasBtn.canvasState = str
if(str == 'move'){
setMove()
pencilbtnStyle.value.display = `none`
}else if(str == 'pencil'){
setPencil()
pencilbtnStyle.value.display = `block`
}else if(str == 'eraser'){
setEraser()
// rgba.value = 'rgb(255,255,255)'
pencilbtnStyle.value.display = `block`
}
}
let setOperationColor = (color)=>{
pencilbtnStyle.value.background = color
rgba.value = color
canvas.freeDrawingBrush.color = color
setOperation('pencil')
}
let setMove = ()=>{
canvas.isDrawingMode = false
canvas.forEachObject((obj) =>obj.selectable = true);
}
let setPencil = ()=>{
canvas.isDrawingMode = true//开启绘画模式
canvas.freeDrawingBrush = new fabric.PencilBrush(canvas,{});
canvas.freeDrawingBrush.width = Number(canvasBtn.canvasPencilWidth[canvasBtn.canvasState]);
setPencilWidth()
canvas.freeDrawingBrush.color = rgba.value
pencilbtnStyle.value.background = rgba.value
canvas.freeDrawingBrush.isEraser = false
}
let setEraser = ()=>{
canvas.isDrawingMode = true
let eraser = new fabric.EraserBrush(canvas)
canvas.freeDrawingBrush = eraser
pencilbtnStyle.value.background = `rgb(255,255,255)`
canvas.requestRenderAll();
canvas.freeDrawingBrush.isEraser = true
canvas.freeDrawingBrush.width = Number(canvasBtn.canvasPencilWidth[canvasBtn.canvasState]);
setPencilWidth()
}
let deleteObj = ()=> {
// if(!canvas.getActiveObjects()){
// return
// }
let target = canvas.getActiveObjects()
target.forEach((item)=>{
canvas.fxRemove(item, {
onComplete(){
canvas.discardActiveObject(); // 丢弃当前选中的对象
canvas.renderAll(); // 重新渲染 Canvas
}
})
canvas.FX_DURATION = 300
})
}
let setTimeOutWidth
let setPencilWidth = ()=>{//切换颜色给铅笔设置颜色
clearTimeout(setTimeOutWidth)
setTimeOutWidth = setTimeout(()=>{
canvas.freeDrawingBrush.width = Number(canvasBtn.canvasPencilWidth[canvasBtn.canvasState])
pencilbtnStyle.value.height = canvasBtn.canvasPencilWidth[canvasBtn.canvasState]+'px'
pencilbtnStyle.value.width = canvasBtn.canvasPencilWidth[canvasBtn.canvasState]+'px'
},300)
}
let setTimeSubmit = null
let createSetTimeSubmit = ()=>{
setSubmit()
}
let updateCanvasState = (str) =>{
if(str != 'mouseUp'){
// editFrontBackPencilbtn.value.style.display = 'none'
@@ -316,103 +173,92 @@ export default defineComponent({
createSetTimeSubmit()
},1000)
}
const canvasAsJson = JSON.stringify(canvas.toJSON());
normalCanvasState.value.push(canvasAsJson);
}
let setClone = ()=>{
let canvasBox = document.querySelector(".editFrontBack_center .exportCanvasBox_center");
let oldCanvasDom = canvasBox.querySelector('.canvas-container')
let oldCanvasDom1 = canvasBox.querySelector('canvas')
if(oldCanvasDom)oldCanvasDom.remove()
if(oldCanvasDom1)oldCanvasDom1.remove()
loadingShow.value = false
}
let rgba = ref('#ff0000')
let mouseMove = (event)=>{
let e = getMousePosition(event,false)
setCanvasMove(e)
}
let touchmove = (event)=>{
let e = getMousePosition(event,true)
setCanvasMove(e)
}
let setCanvasMove = (event)=>{
if(canvas.isDrawingMode && canvas){
canvas.setCursor('none');
}
let canvasCenterBox = document.querySelector(".editFrontBack_center .exportCanvasBox_center_box");
if(!canvasCenterBox)return
let parentX = event.clientX - canvasCenterBox.getBoundingClientRect().left
let parentY = event.clientY - canvasCenterBox.getBoundingClientRect().top
pencilbtnStyle.value.left = parentX + "px"
pencilbtnStyle.value.top = parentY+'px'
}
let mousedown = (e)=>{
if(e.target instanceof HTMLCanvasElement){
down = true
}
}
let mouseup = (e)=>{
console.log(down);
if(down){
nextTick(()=>{
createSetTimeSubmit()
})
}
down = false
}
let setTimeSubmit = null
let createSetTimeSubmit = ()=>{
setSubmit()
}
//撤回
let historyState = (str)=> {
if(str == 'reverse' && reverseCanvasState.value.length > 0){//反撤回
let obj = reverseCanvasState.value.pop()
// canvasState.value = reverseCanvasState.value[reverseCanvasState.value.length-1]
canvasState.value = obj
normalCanvasState.value.push(obj);
}else if(str == '' && normalCanvasState.value.length > 1){
let obj = normalCanvasState.value.pop()
canvasState.value = normalCanvasState.value[normalCanvasState.value.length-1]
reverseCanvasState.value.push(obj);
}else{
return
let setSubmit = async ()=>{
// let data = await frontBackCanvasObj.allExport()
let data = await frontBackCanvasObj.detailSubmit()
// props.props.patchData.front[imgDomIndex].imageUrl = data
let mark = data
let full = props.patchData.front[props.imgDomIndex].undividedLayer
let size = {
width: Math.round(exportWH * ratio[0]),
height: Math.round(exportWH * ratio[1]),
}
canvas.loadFromJSON(canvasState.value, () => {
createSetTimeSubmit()
});
}
let setSubmit = ()=>{
var allObjects = canvas.getObjects('path');
var canvasDom = document.createElement("canvas");
let exportCanvas = new fabric.Canvas(canvasDom, {
width: exportWH * ratio[0],
height: exportWH * ratio[1],
isDrawingMode: false, // 开启绘图模式
});
canvas.backgroundImage.clone((back)=>{
back.scaleToWidth(exportCanvas.width);
back.scaleToHeight(exportCanvas.height);
back.set({
scaleX: exportCanvas.width / back.width,
scaleY: exportCanvas.height / back.height
})
let scale = exportCanvas.height/canvas.height
exportCanvas.backgroundImage = back
allObjects.forEach((item,index)=>{
// let obj = fabric.util.object.clone(item);
if(item.type == 'circle')return
let obj
item.clone((cloned)=>{
obj = cloned
})
obj.set(
{
scaleX:(item.scaleX?item.scaleX:1)*scale,
scaleY:(item.scaleY?item.scaleY:1)*scale,
left:item.left*scale,
top:item.top*scale,
}
)
exportCanvas.add(obj)
})
let data = exportCanvas.toDataURL('png')
cancelDsign()
clearCanvas()
// props.props.patchData.front[imgDomIndex].imageUrl = data
let mark = data
let full = props.patchData.front[imgDomIndex].undividedLayer
let size = {
width: Math.round(exportWH * ratio[0]),
height: Math.round(exportWH * ratio[1]),
}
segmentImage(mark,full,size).then((rv)=>{
// console.log(rv.targetFrontUrl,rv.targetBackUrl)
props.patchData.front[imgDomIndex].imageUrl = rv.targetFrontUrl
props.patchData.back[imgDomIndex].imageUrl = rv.targetBackUrl
props.patchData.front[imgDomIndex].maskUrl = data
})
return
segmentImage(mark,full,size).then((rv)=>{
// console.log(rv.targetFrontUrl,rv.targetBackUrl)
props.patchData.front[props.imgDomIndex].imageUrl = rv.targetFrontUrl
props.patchData.back[props.imgDomIndex].imageUrl = rv.targetBackUrl
props.patchData.front[props.imgDomIndex].maskUrl = data
store.commit('DesignDetailCopy/updataDetailItem',{maskUrl:data})
})
}
let cancelDsign = ()=>{
document.removeEventListener('keydown',canvasKeyDown);
document.removeEventListener('keyup', canvasKeyUp);
}
onBeforeUnmount(()=>{
frontBackCanvasObj.canvasClear()
document.removeEventListener('mousemove', mouseMove);
document.removeEventListener('touchmove', touchmove);
document.removeEventListener('mousedown', mousedown);
document.removeEventListener('mouseup', mouseup);
})
return {
frontBackCanvasObj,
presentState,
loadingShow,
imgData,
pencilbtnStyle,
t,
...toRefs(canvasBtn),
rgba,
setBackground,
init,
setOperation,
setOperationColor,
setPencilWidth,
historyState,
setSubmit,
setClone,
cancelDsign,
};
},
data() {
@@ -529,13 +375,13 @@ export default defineComponent({
}
}
.exportCanvasBox_center_box{
padding: 3rem;
height: 100%;
flex: 1;
position: relative;
overflow: hidden;
width: 100%;
background: #e6e6e6;
cursor: auto;
&:hover{
cursor: none;
}
@@ -554,12 +400,12 @@ export default defineComponent({
height: 100%;
position: relative;
// overflow: scroll;
cursor: none;
:deep(.canvas-container){
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
opacity: .5;
// opacity: .5;
// background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC);
}
.editFrontBack_bgImg{

298
src/component/DetailCopy/canvas/argument.vue
View File

@@ -1,81 +1,124 @@
<template>
<div class="canvasArgument">
<div class="label_item wH">
<!-- <div class="label_item wH">
<div class="title">{{ $t('exportModel.Width') }}</div>
<input type="number" @input="canvasGeneral.setCanvasWH('width')" v-model="canvasGeneral.canvasWH.width">
</div>
<div class="label_item wH">
<div class="title">{{ $t('exportModel.Height') }}</div>
<input type="number" @input="canvasGeneral.setCanvasWH('height')" v-model="canvasGeneral.canvasWH.height">
</div> -->
<div v-show="isEditFrontBack" class="frontBack">
<div class="label_item" @click.stop="setOperation('print')">
<div class="title">color</div>
<a-select
v-model:value="frontBackData"
:options="frontBackDataList"
size="large"
:fieldNames="{ label: 'name', value: 'value' }"
style="width:12rem;"
@change="changeFrontBackData"
>
<template #suffixIcon
><span
class="icon iconfont icon-xiala"
style="color: #343579"
></span
></template>
</a-select>
</div>
<div class="label_item">
<div class="titile">{{ $t('exportModel.Size') }}:</div>
<input @change="frontBackCanvas.setFontFamily" type="range" @input="frontBackCanvas.setPencilWidth" min="3" max="50" v-model="frontBackCanvas.brushwork.width[frontBackCanvas.operation]">
<!-- <input type="range" @input="frontBackCanvas.setPencilWidth" min="3" max="50" v-model="frontBackCanvas.brushwork.width[frontBackCanvas.operation]"> -->
</div>
</div>
<div class="label_item" v-show="
canvasGeneral.operation != 'movePosition' &&
canvasGeneral.operation != 'move' &&
canvasGeneral.operation != 'eraser' &&
canvasGeneral.operation != 'texture' &&
canvasGeneral.operation != 'zoomIn' &&
canvasGeneral.operation != 'zoomOut' &&
canvasGeneral.operation != 'dashedPencil' &&
canvasGeneral.operation != 'dashed'">
<div class="title">{{ $t('exportModel.Color') }}</div>
<input type="color" @input="canvasGeneral.setPencilColor" v-model="canvasGeneral.brushwork.color">
<span class="icon iconfont icon-xiala" @click.stop="setOperation('color')" :class="{active: operation == 'color'}"></span>
<div class="labelHover_show" v-show="operation == 'color'" @click.stop="">
<div v-for="item in canvasGeneral.colorHistoryList" :style="{'background':item}" @click="canvasGeneral.setColorHistory(item)"></div>
</div>
</div>
<div class="label_item" v-show="
canvasGeneral.operation != 'movePosition' &&
canvasGeneral.operation != 'move' &&
canvasGeneral.brushwork.value != 'RibbonBrush' &&
canvasGeneral.brushwork.value != 'LongfurBrush'&&
canvasGeneral.operation != 'zoomIn' &&
canvasGeneral.operation != 'zoomOut' &&
canvasGeneral.operation != 'dashedPencil' &&
canvasGeneral.operation != 'dashed'">
<div >{{ $t('exportModel.Size') }}:</div>
<input @change="canvasGeneral.setFontFamily" type="range" @input="canvasGeneral.setPencilWidth" min="3" max="50" v-model="canvasGeneral.brushwork.width[canvasGeneral.operation]">
</div>
<div class="label_item" v-show="canvasGeneral.operation == 'pencil'">
<div >{{ $t('exportModel.Brushwork') }}:</div>
<a-select ref="select" class="label_select" size="small" v-model:value="canvasGeneral.brushwork.value"
style="width: 12rem "
@change="canvasGeneral.brushworkChange"
>
<a-select-option class="label_select_item" v-for="item in canvasGeneral.pencilList.brushList" :value="item.value">
<img style="width: 100%;" :src="item.url" alt="">
</a-select-option>
</a-select>
</div>
<div class="label_item texture" v-show="canvasGeneral.operation == 'texture'">
<div >{{ $t('exportModel.Texture') }}:</div>
<a-select ref="select" class="label_select" size="small" v-model:value="canvasGeneral.texture.value"
style="width: 12rem "
@change="canvasGeneral.textureValueChange"
>
<a-select-option class="label_select_item" v-for="item in canvasGeneral.texture.list" :value="item.value">
<img :src="item.url" alt="">
</a-select-option>
</a-select>
</div>
<div class="label_item" v-show="
canvasGeneral.operation != 'pencil' &&
canvasGeneral.operation != 'eraser'&&
canvasGeneral.operation != 'movePosition' &&
canvasGeneral.operation != 'move'&&
canvasGeneral.operation != 'text'&&
canvasGeneral.operation != 'texture'&&
canvasGeneral.operation != ''&&
canvasGeneral.operation != 'zoomIn' &&
canvasGeneral.operation != 'zoomOut' &&
canvasGeneral.operation != 'dashedPencil' &&
canvasGeneral.operation != 'dashed'">
<div >{{ $t('exportModel.FillBack') }}:</div>
<div class="leftAlign">
<i class="icon iconfont icon-tuceng1" @click="canvasGeneral.setOperationMode('fill')" :class="{active:canvasGeneral.operationMode == 'fill'}"></i>
<i class="icon iconfont icon-tuceng" @click="canvasGeneral.setOperationMode('border')" :class="{active:canvasGeneral.operationMode == 'border'}"></i>
</div>
<div v-show="!isEditFrontBack" class="sketch">
<div class="label_item" @click.stop="setOperation('print')">
<div class="title">print</div>
<div class="current"></div>
<div class="drop" v-show="operation == 'print'">
<selectList @selectImgItem="selectImgItem" type="print" :catecoryList="printCatecoryList"></selectList>
</div>
</div>
<div class="label_item" @click.stop="setOperation('element')">
<div class="title">element</div>
<div class="current"></div>
<div class="drop" v-show="operation == 'element'">
<selectList @selectImgItem="selectImgItem" type="element" :catecoryList="designElementsType"></selectList>
</div>
</div>
<div class="label_item" v-show="
canvasGeneral.operation != 'movePosition' &&
canvasGeneral.operation != 'move' &&
canvasGeneral.operation != 'eraser' &&
canvasGeneral.operation != 'texture' &&
canvasGeneral.operation != 'zoomIn' &&
canvasGeneral.operation != 'zoomOut' &&
canvasGeneral.operation != 'dashedPencil' &&
canvasGeneral.operation != 'dashed'">
<div class="title">{{ $t('exportModel.Color') }}</div>
<input style="width: 7rem;" type="color" @input="canvasGeneral.setPencilColor" v-model="canvasGeneral.brushwork.color">
<span class="icon iconfont icon-xiala" @click.stop="setOperation('color')" :class="{active: operation == 'color'}"></span>
<div class="labelHover_show" v-show="operation == 'color'" @click.stop="">
<div v-for="item in canvasGeneral.colorHistoryList" :style="{'background':item}" @click="canvasGeneral.setColorHistory(item)"></div>
</div>
</div>
<div class="label_item" v-show="
canvasGeneral.operation != 'movePosition' &&
canvasGeneral.operation != 'move' &&
canvasGeneral.brushwork.value != 'RibbonBrush' &&
canvasGeneral.brushwork.value != 'LongfurBrush'&&
canvasGeneral.operation != 'zoomIn' &&
canvasGeneral.operation != 'zoomOut' &&
canvasGeneral.operation != 'dashedPencil' &&
canvasGeneral.operation != 'dashed'">
<div class="title">{{ $t('exportModel.Size') }}:</div>
<input @change="canvasGeneral.setFontFamily" type="range" @input="canvasGeneral.setPencilWidth" min="3" max="50" v-model="canvasGeneral.brushwork.width[canvasGeneral.operation]">
</div>
<div class="label_item" v-show="canvasGeneral.operation == 'pencil'">
<div class="title">{{ $t('exportModel.Brushwork') }}:</div>
<a-select ref="select" class="label_select" size="small" v-model:value="canvasGeneral.brushwork.value"
style="width: 12rem "
@change="canvasGeneral.brushworkChange"
>
<a-select-option class="label_select_item" v-for="item in canvasGeneral.pencilList.brushList" :value="item.value">
<img style="width: 100%;" :src="item.url" alt="">
</a-select-option>
</a-select>
</div>
<div class="label_item texture" v-show="canvasGeneral.operation == 'texture'">
<div class="title">{{ $t('exportModel.Texture') }}:</div>
<a-select ref="select" class="label_select" size="small" v-model:value="canvasGeneral.texture.value"
style="width: 12rem "
@change="canvasGeneral.textureValueChange"
>
<a-select-option class="label_select_item" v-for="item in canvasGeneral.texture.list" :value="item.value">
<img :src="item.url" alt="">
</a-select-option>
</a-select>
</div>
<div class="label_item" v-show="
canvasGeneral.operation != 'pencil' &&
canvasGeneral.operation != 'eraser'&&
canvasGeneral.operation != 'movePosition' &&
canvasGeneral.operation != 'move'&&
canvasGeneral.operation != 'text'&&
canvasGeneral.operation != 'texture'&&
canvasGeneral.operation != ''&&
canvasGeneral.operation != 'zoomIn' &&
canvasGeneral.operation != 'zoomOut' &&
canvasGeneral.operation != 'dashedPencil' &&
canvasGeneral.operation != 'dashed'">
<div class="title">{{ $t('exportModel.FillBack') }}:</div>
<div class="leftAlign">
<i class="icon iconfont icon-tuceng1" @click="canvasGeneral.setOperationMode('fill')" :class="{active:canvasGeneral.operationMode == 'fill'}"></i>
<i class="icon iconfont icon-tuceng" @click="canvasGeneral.setOperationMode('border')" :class="{active:canvasGeneral.operationMode == 'border'}"></i>
</div>
</div>
</div>
<!-- <div class="label_item" v-show="canvasGeneral.operation == 'movePosition'">
<div >{{ $t('exportModel.Layer') }}:</div>
<div class="leftAlign">
@@ -85,32 +128,55 @@
<i class="icon iconfont icon-shangyiceng1" @click="canvasGeneral.setLayerIndex('Back')"></i>
</div>
</div> -->
<div class="label_item" v-show="(canvasGeneral.operation == '' || canvasGeneral.operation == 'text' || canvasGeneral.createPatterning.textDataShow) && canvasGeneral.operation != 'movePosition' && canvasGeneral.operation != 'move'">
<div>Font Family</div>
<a-select ref="select" class="label_select" size="small" v-model:value="canvasGeneral.fontFamily"
style="flex: 1;width: 15rem;"
@change="canvasGeneral.setFontFamily"
:style="{'font-family':canvasGeneral.fontFamily}"
>
<a-select-option class="label_select_item" v-for="item in canvasGeneral.pencilList.textFontFamilyList" :style="{'font-family':item.value}" :value="item.value">
{{item.name}}
</a-select-option>
</a-select>
</div>
</div>
</template>
<script lang="ts">
import { defineComponent,ref,reactive,nextTick,toRefs,inject} from 'vue'
import { defineComponent,ref,reactive,computed,toRefs,inject, watch, nextTick} from 'vue'
import library from '../detailLeft/module/libraryList.vue'
import upload from '../detailLeft/module/uploadList.vue'
import selectList from '../detailLeft/module/selectList.vue'
import { useStore } from "vuex";
export default defineComponent({
components:{},
setup(){
components:{selectList},
props: ['isEditFrontBack'],
emits: ['setFrontBackColor'],
setup(props,{emit}){
const store = useStore();
let testModal = ref(true)
let canvasGeneral:any = inject('canvasObj')
let frontBackCanvas:any = inject('frontBackCanvasObj')
const data = reactive({
colorHistoryList:[],
operation:'',
printCatecoryList:computed(()=>{
return store.state.UserHabit.printType
}),
designElementsType:computed(()=>{
return store.state.UserHabit.designElementsType;
}),
frontBackData:'#ff0000',
frontBackDataList:[
{
name:'正面',
value:'#ff0000'
},{
name:'反面',
value:'#00ff00'
},{
name:'背景',
value:'background'
},
]
})
watch(()=>props.isEditFrontBack,(newVal)=>{
if(newVal){
nextTick(()=>{
data.frontBackData = '#ff0000'
})
}
})
const setOperation = (str:any)=>{
data.operation = str
}
@@ -121,12 +187,22 @@
const closeModal = ()=>{
document.removeEventListener('click',setOper)
}
const selectImgItem = (data:any)=>{
data.minioUrl = data.url
canvasGeneral.addPartImg(data,'print')
}
const changeFrontBackData = (value:any)=>{
emit('setFrontBackColor',value)
}
return {
canvasGeneral,
frontBackCanvas,
...toRefs(data),
testModal,
setOperation,
closeModal,
selectImgItem,
changeFrontBackData,
}
}
});
@@ -134,9 +210,11 @@
<style lang='less' scoped>
.canvasArgument{
display: flex;
flex-wrap: wrap;
height: 100%;
>div{
display: flex;
flex-wrap: wrap;
}
.label_item{
margin-right: 2rem;
position: relative;
@@ -145,6 +223,24 @@
.leftAlign{
display: flex;
}
> .current{
border-radius: 3rem;
height: 3rem;
width: 7rem;
border: 1px solid #000;
}
> .drop{
position: absolute;
z-index: 22;
top: 4rem;
background: #fff;
border: 1px solid #000;
border-radius: 2rem;
padding: 2.4rem;
width: 40rem;
height: 50rem;
display: flex;
}
.labelHover_show{
position: absolute;
width: 100%;
@@ -166,22 +262,48 @@
}
}
input{
height: 100%;
height: 100%;
border-radius: 3rem;
width: 12rem;
background: #fff;
height: 3rem;
border: 1px solid #000;
}
&.wH input{
width: 5rem;
}
.title{
margin-right: 1rem;
font-weight: 600;
font-size: 1.8rem;
}
.icon-xiala{
:deep(.ant-select){
height: 3rem;
border-radius: 3rem;
.ant-select-selector{
height: 100%;
border-radius: 3rem;
border: 1px solid;
.ant-select-selection-item{
display: flex;
font-size: 2rem;
line-height: 3rem;
}
}
}
}
&.sketch{
.icon-xiala{
cursor: pointer;
transform: rotate(0deg);
height: 4rem;
width: 4rem;
transition: all .3s;
line-height: 4rem;
line-height: 1;
text-align: center;
display: flex;
align-items: center;
&.active{
transform: rotate(180deg);
}

125
src/component/DetailCopy/canvas/canvasContent.vue
View File

@@ -1,12 +1,8 @@
<template>
<div class="canvasContent_box">
<div class="canvasContent" ref="canvasScaleDom">
<div v-if="isPresuppose" class="generalCanvas_center presuppose">
<div class="presuppose16-9" @click="setPresuppose('16/9')">16 : 9</div>
<div class="presuppose1-1" @click="setPresuppose('1/1')">1 : 1</div>
<div class="presuppose9-16" @click="setPresuppose('9/16')">9 : 16</div>
</div>
<div v-else class="generalCanvas_center canvas" ref="canvasDom">
<div class="generalCanvas_center canvas" ref="canvasDom">
<div class="editFrontBack_pencilbtn" v-show="!isShowMark"></div>
<div class="editFrontBack_pencilbtn" v-show="!isShowMark" :style="canvasGeneral.pencilbtnStyle"></div>
</div>
</div>
@@ -14,30 +10,54 @@
</template>
<script lang="ts">
import { defineComponent,ref,reactive,nextTick,toRefs,inject,createVNode, onMounted} from 'vue'
import { defineComponent,computed,reactive,nextTick,toRefs,inject,createVNode, onMounted, onBeforeUnmount} from 'vue'
import { Modal,message } from 'ant-design-vue';
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { useStore } from "vuex";
import { useI18n } from 'vue-i18n'
export default defineComponent({
component:{},
setup(){
let {t} = useI18n()
const store = useStore();
let {t} = useI18n()
let canvasType = inject('canvasType')
let canvasGeneral:any = inject('canvasObj')
const data:any = reactive({
canvasScaleDom:null,
canvasDom:null,
isPresuppose:false,
isShowMark:false,
pencilbtnStyle:{},
selectDetail:computed(()=>store.state.DesignDetailCopy.selectDetail),
})
const createCanvas = (canvasSize:any)=>{
data.isPresuppose = false
nextTick(()=>{
canvasGeneral.canvasInit(data.canvasDom,canvasSize)
console.log(canvasGeneral);
nextTick(async ()=>{
let img = data.selectDetail.undividedLayer
let WH = {
width:data.canvasDom.offsetWidth,
height:data.canvasDom.offsetHeight,
}
let image = new Image()
image.onload = async ()=>{
let wScale = 1
let hScale = 1
wScale = image.width/image.height
// if(image.width>image.height){
// hScale = image.height/image.width
// }else{
// wScale = mnnmmmimage.width/image.height
// }
let size = {
width:WH.height*wScale,
height:WH.height*hScale,
}
let editGroupImg = data.selectDetail.partialDesign.partialDesignPath
await canvasGeneral.canvasInit(data.canvasDom,size,img,editGroupImg)
}
image.src = img
// canvasGeneral.canvasInit(data.canvasDom,canvasSize)
})
}
const openMode = (data:any)=>{
@@ -60,53 +80,15 @@
yes()
}
// canvasGeneral.openMode.fun = openMode
const setPresuppose = (presuppose:any)=>{
let canvasDomSize = {
width:data.canvasScaleDom.offsetWidth,
height:data.canvasScaleDom.offsetHeight,
}
let width,height
let scale = [0,0]
if(presuppose == '16/9'){
// scale[0] = 16
// scale[1] = 9
width = 1600
height = 900
}else if(presuppose == '1/1'){
// scale[0] = 1
// scale[1] = 1
width = 1000
height = 1000
}else if(presuppose == '9/16'){
// scale[0] = 9
// scale[1] = 16
width = 900
height = 1600
}
// let mbHeight = canvasDomSize.width / scale[0] * scale[1]
// if(mbHeight < canvasDomSize.height){
// width = canvasDomSize.width
// height = mbHeight
// }else{
// width = canvasDomSize.height / scale[1] * scale[0]
// height = canvasDomSize.height
// }
let canvasSize = {width,height}
createCanvas(canvasSize)
}
onMounted(()=>{
if(canvasType == 'export'){
data.isPresuppose = true
}else{
createCanvas({})
}
createCanvas({})
})
onBeforeUnmount(()=>{
canvasGeneral.canvasClear()
})
return {
canvasGeneral,
...toRefs(data),
setPresuppose,
}
}
});
@@ -132,39 +114,6 @@
overflow: hidden;
&.canvas{
}
&.presuppose{
display: flex;
align-items: center;
justify-content: center;
> div{
border: 1rem solid #6b6b6b;
color: #6b6b6b;
display: flex;
margin-right: 2rem;
display: flex;
align-items: center;
justify-content: center;
font-size: 3rem;
font-weight: 900;
cursor: pointer;
border-radius: 4px;
&:last-child{
margin-right: 0;
}
&.presuppose16-9{
height: calc(30rem / 16 * 9);
width: 30rem;
}
&.presuppose1-1{
height: 30rem;
width: 30rem;
}
&.presuppose9-16{
height: 30rem;
width: calc(30rem / 16 * 9);
}
}
}
.editFrontBack_pencilbtn{
position: absolute;
z-index: 1;

162
src/component/DetailCopy/canvas/index.vue
View File

@@ -4,13 +4,36 @@
<!-- :class="[driver__.driver?'hideEvents':'']" -->
<div class="canvasContent">
<div class="argument-box">
<argument ref="argument" v-if="canvasObj.canvas"></argument>
<argument
ref="argument"
class="argument"
v-if="canvasObj.id || frontBackCanvasObj.id"
@toolLiquefaction="toolLiquefaction"
@setFrontBackColor="setFrontBackColor"
:isEditFrontBack="isEditFrontBack">
</argument>
</div>
<div class="canvas">
<tool ref="tool" v-if="canvasObj.canvas" @toolLiquefaction="toolLiquefaction"></tool>
<div class="canvas">
<canvasContent ref="canvasContent"></canvasContent>
<div class="content-bottom">
<div class="tool-box">
<tool ref="tool" class="tool" v-if="canvasObj.id || frontBackCanvasObj.id" @toolLiquefaction="toolLiquefaction" @editFront="editFront" :isEditFrontBack="isEditFrontBack"></tool>
</div>
<div class="contet">
<div class="canvas" v-show="!isEditFrontBack" @click.stop>
<canvasContent ref="canvasContent"></canvasContent>
</div>
<div class="editFrontBack" v-if="isEditFrontBack" @click.stop>
<editFrontBack
:patchData="frontBack"
:imgDomIndex="imgDomIndex"
ref="editFrontBack">
</editFrontBack>
</div>
</div>
<!-- <div class="Finish">
<div class="gallery_btn" @click="privewDetail">Finish</div>
</div> -->
</div>
</div>
@@ -21,12 +44,14 @@
</template>
<script lang="ts">
import { defineComponent,computed,onBeforeUnmount,provide,nextTick,createVNode,toRefs, reactive} from 'vue'
import { defineComponent,computed,onBeforeUnmount,provide,nextTick,watch,toRefs, reactive} from 'vue'
import { Https } from "@/tool/https";
import { Modal,message } from 'ant-design-vue';
import {getUploadUrl,isMoible,setGradual} from '@/tool/util'
import { useStore } from "vuex";
import { useI18n } from 'vue-i18n'
import editFrontBack from '@/component/Detail/editFrontBack.vue'
import canvasGeneral from "@/tool/canvasGeneralCopy";
import argument from './argument.vue'
@@ -35,36 +60,84 @@ import tool from "./tool.vue"
export default defineComponent({
components:{
tool,argument,canvasContent,
tool,argument,canvasContent,editFrontBack
},
setup(props,{emit}) {
const store = useStore();
const {t} = useI18n();
const detailDom = reactive({
model:null
editFrontBack:null as any,
model:null,
})
const userDetail = computed(()=>{
return store.state.UserHabit.userDetail
})
const detailData = reactive({
canvasObj:canvasGeneral,
designDetail:computed(()=>store.state.DesignDetailCopy.designDetail),
currentDetailType:computed(()=>store.state.DesignDetailCopy.currentDetailType),
selectDetail:computed(()=>store.state.DesignDetailCopy.selectDetail),
designDetailShow:false,
loadingShow:false,
isEditPattern:{
value:false,
},// 是否编辑图案
canvasObj:new canvasGeneral('aa'),
frontBackCanvasObj:new canvasGeneral('vv'),
isShowMark:false,
liquefactionData:null as any,
liquefaction:null as any,
canvasType:'export',
imgDomIndex:-1,
isEditFrontBack:false,
selectDetail:computed(()=>store.state.DesignDetailCopy.selectDetail),
frontBack:computed(()=>store.state.DesignDetailCopy.frontBack),
})
watch(()=>detailData.selectDetail,(newValue,oldValue)=>{
detailData.imgDomIndex = detailData.frontBack.front.findIndex((item:any)=>item.id == newValue.id)
},{immediate: true})
provide('frontBackCanvasObj',detailData.frontBackCanvasObj)
provide('canvasObj',detailData.canvasObj)
provide('isShowMark',detailData.isShowMark)
provide('canvasType',detailData.canvasType)
const setLiquefaction = async ()=>{//进入液化页面
detailData.canvasObj.getLiquefactionImgObj().then((data)=>{
if(data?.img){
detailData.liquefactionData = data
detailData.liquefaction.init(data.img)
}else {
message.info(t('exportModel.jsContent6'))
return null;
}
})
}
const toolLiquefaction = ()=>{//工具点击按钮
setLiquefaction()
}
const editFront = ()=>{//编辑前后片
detailData.isEditFrontBack = !detailData.isEditFrontBack
if(detailData.isEditFrontBack){
nextTick(()=>{
detailDom.editFrontBack.init(detailData.frontBack.front[detailData.imgDomIndex],'')
//关闭开启键盘事件
detailData.canvasObj.currentOperation = false
detailData.frontBackCanvasObj.currentOperation = true
})
}else{
detailData.canvasObj.currentOperation = true
detailData.frontBackCanvasObj.currentOperation = false
}
}
const privewDetail = async ()=>{
let data = await detailData.canvasObj.detailSubmit()
detailData.selectDetail.partialDesign.partialDesignBase64 = data
}
const setFrontBackColor = (data:any)=>{
detailDom.editFrontBack.setBackground(data)
}
onBeforeUnmount(()=>{
privewDetail()
})
return{
...toRefs(detailDom),
...toRefs(detailData),
toolLiquefaction,
editFront,
privewDetail,
setFrontBackColor,
}
},
provide() {
@@ -83,9 +156,29 @@ export default defineComponent({
// top: -100%;
display: flex;
align-items: center;
.tool-box{
width: 4rem;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
}
.Finish{
margin-top: auto;
> .gallery_btn{
cursor: pointer;
}
}
.argument-box{
height: 4rem;
width: 100%;
margin-bottom: 3rem;
margin-left: 4rem;
}
.argument-box,
.canvas,
.content-bottom,
.detail-box{
:deep(i){
font-size: 2.5rem;
cursor: pointer;
@@ -107,6 +200,11 @@ export default defineComponent({
&.icon-xialaActive{
transform: rotate(90deg);
}
&.eventNone{
cursor: no-drop;
border: none;
opacity: .5;
}
}
}
.canvasContent{
@@ -115,6 +213,28 @@ export default defineComponent({
border: 2px solid #000;
border-radius: 3rem;
padding: 4rem;
display: flex;
flex-direction: column;
}
.content-bottom{
flex: 1;
overflow: hidden;
display: flex;
> .contet{
flex: 1;
overflow: hidden;
position: relative;
.canvas,.editFrontBack{
width: 100%;
height: 100%;
}
.editFrontBack{
z-index: 2;
position: absolute;
top: 0;
left: 0;
}
}
}
}

55
src/component/DetailCopy/canvas/tool.vue
View File

@@ -1,32 +1,36 @@
<template>
<div class="canvasTool">
<i class="icon iconfont icon-chehui" @click="historyState('')"></i>
<i class="icon iconfont icon-fanchehui" @click="historyState('reverse')"></i>
<i class="icon iconfont icon-bianji" @click="setOperation('pencil')" :class="{active:canvasGeneral.operation == 'pencil'}"></i>
<i class="icon iconfont icon-caizhi" @click="setOperation('texture')" :class="{active:canvasGeneral.operation == 'texture'}"></i>
<i class="fi fi-rr-hand-paper" @click="setOperation('move')" :class="{active:canvasGeneral.operation == 'move'}"></i>
<i class="icon iconfont icon-move" @click="setOperation('movePosition')" :class="{active:canvasGeneral.operation == 'movePosition'}"></i>
<i class="icon iconfont icon-xiangpi_huaban1" @click="setOperation('eraser')" :class="{active:canvasGeneral.operation == 'eraser'}"></i>
<!-- <i class="icon iconfont icon-xiala" :class="closeNav.tool?'icon-rotate':''" @click.stop="setCloseNav('tool')"></i> -->
<i class="fi fi-rr-square-dashed" @click="setOperation('dashed')" :class="{active:canvasGeneral.operation == 'dashed'}"></i>
<i class="fi fi-rr-scalpel-path" @click="setOperation('dashedPencil')" :class="{active:canvasGeneral.operation == 'dashedPencil'}"></i>
<i class="fi fi-rr-zoom-in" @click="setOperation('zoomIn')" :class="{active:canvasGeneral.operation == 'zoomIn'}"></i>
<i class="fi fi-rr-zoom-out" @click="setOperation('zoomOut')" :class="{active:canvasGeneral.operation == 'zoomOut'}"></i>
<i class="icon iconfont icon-IC-yehua" @click="setLiquefaction()"></i>
<div class="label_item uploadImage">
<i class="icon iconfont icon-bianji" @click="setOperation('pencil')" :class="{active:canvasGeneral.operation == 'pencil',eventNone:isEditFrontBack}"></i>
<i class="icon iconfont icon-caizhi" @click="setOperation('texture')" :class="{active:canvasGeneral.operation == 'texture',eventNone:isEditFrontBack}"></i>
<i class="fi fi-rr-hand-paper" @click="setOperation('move')" :class="{active:canvasGeneral.operation == 'move',eventNone:isEditFrontBack}"></i>
<i class="icon iconfont icon-move" @click="setOperation('movePosition')" :class="{active:canvasGeneral.operation == 'movePosition',eventNone:isEditFrontBack}"></i>
<i class="icon iconfont icon-xiangpi_huaban1" @click="setOperation('eraser')" :class="{active:canvasGeneral.operation == 'eraser',eventNone:isEditFrontBack}"></i>
<i class="fi fi-rr-square-dashed" @click="setOperation('dashed')" :class="{active:canvasGeneral.operation == 'dashed',eventNone:isEditFrontBack}"></i>
<i class="fi fi-rr-scalpel-path" @click="setOperation('dashedPencil')" :class="{active:canvasGeneral.operation == 'dashedPencil',eventNone:isEditFrontBack}"></i>
<i class="fi fi-rr-zoom-in" @click="setOperation('zoomIn')" :class="{active:canvasGeneral.operation == 'zoomIn',eventNone:isEditFrontBack}"></i>
<i class="fi fi-rr-zoom-out" @click="setOperation('zoomOut')" :class="{active:canvasGeneral.operation == 'zoomOut',eventNone:isEditFrontBack}"></i>
<!-- <div v-show="isEditFrontBack">
<i class="icon iconfont icon-chehui" @click="historyState('')"></i>
<i class="icon iconfont icon-fanchehui" @click="historyState('reverse')"></i>
</div> -->
<i @click="setEditFront" :class="{active:isEditFrontBack || false}" class="fi fi-sr-layers"></i>
<!-- <i class="icon iconfont icon-IC-yehua" @click="setLiquefaction()"></i> -->
<!-- <div class="label_item uploadImage">
<i class="icon fi fi-br-upload" ></i>
<input type="file" @change="uploadImage">
</div>
<i class="icon iconfont" @click="setOperation('text')" :class="{active:canvasGeneral.operation == 'text'}">T</i>
</div> -->
<!-- <i class="icon iconfont" @click="setOperation('text')" :class="{active:canvasGeneral.operation == 'text'}">T</i>
<i class="icon iconfont icon-xiala" :class="{'icon-xialaActive':isMove}" @click.stop="openMore"></i>
<div class="btnModal" v-show="isMove" :style="moveStyle">
<!-- <i class="icon iconfont icon-xian" @click="setOperation('fold')" :class="{active:canvasGeneral.operation == 'fold'}"></i> -->
<i class="icon iconfont icon-checkbox-full" @click="setOperation('rect')" :class="{active:canvasGeneral.operation == 'rect'}"></i>
<!-- <i class="icon iconfont icon-zhixian" @click="setOperation('line')" :class="{active:canvasGeneral.operation == 'line'}"></i> -->
<!-- <i class="icon iconfont icon-circle" @click="setOperation('circle')" :class="{active:canvasGeneral.operation == 'circle'}"></i> -->
<i class="icon iconfont icon-sanjiaoxing" @click="setOperation('triangle')" :class="{active:canvasGeneral.operation == 'triangle'}"></i>
<i class="icon iconfont icon-tx-fill-tuoyuanxing" @click="setOperation('ellipse')" :class="{active:canvasGeneral.operation == 'ellipse'}"></i>
</div>
</div> -->
</div>
</template>
@@ -36,16 +40,18 @@ import {base64ToFile} from '@/tool/util'
import { Https } from "@/tool/https";
export default defineComponent({
component:{},
emits:['toolLiquefaction'],
emits:['toolLiquefaction','editFront'],
props: ['isEditFrontBack'],
setup(props,{emit}){
let canvasGeneral:any = inject('canvasObj')
let isShowMark:any = inject('isShowMark')
const data:any = reactive({
isMove:false,
moveStyle:{},
isShowMark,
})
const uploadImage = (event:any)=>{
isShowMark.value = true
data.isShowMark = true
const file = event.target.files[0];
let input = event.target
setOperation('movePosition')
@@ -58,7 +64,7 @@ import { Https } from "@/tool/https";
let config = {headers:{'Content-Type':'multipart/form-data','Accept':'*/*' }}
Https.axiosPost(Https.httpUrls.canvasElementUpload, formData,config).then((rv)=>{
rv.imgUrl = rv.minioUrl
isShowMark.value = false
data.isShowMark = false
canvasGeneral.addImage(rv)
})
input.value = ''
@@ -70,6 +76,7 @@ import { Https } from "@/tool/https";
canvasGeneral.historyState(str)
}
const setOperation = (str:any)=>{
if(props.isEditFrontBack)return
canvasGeneral.setOperation(str)
}
const openMore = (e:any)=>{
@@ -94,6 +101,10 @@ import { Https } from "@/tool/https";
const closeModal = ()=>{
document.removeEventListener('click',setMore)
}
const setEditFront = ()=>{
emit('editFront')
// setOperation('movePosition')
}
return {
canvasGeneral,
...toRefs(data),
@@ -103,6 +114,7 @@ import { Https } from "@/tool/https";
openMore,
closeModal,
setLiquefaction,
setEditFront,
}
}
});
@@ -123,7 +135,6 @@ import { Https } from "@/tool/https";
&.leftAlign{
justify-content: flex-start;
}
.uploadImage{
width: 3rem;
height: 3rem;

34
src/component/DetailCopy/designDetail.vue
View File

@@ -42,11 +42,12 @@
</div>
</div>
<div class="item detailLeft" :class="{isEditPattern:isEditPattern.value}">
<detailLeft v-if="selectDetail && selectDetail.id && currentDetailType"></detailLeft>
<detailLeft v-if="currentDetailType"></detailLeft>
<!-- <detailLeft v-if="selectDetail && selectDetail.id && currentDetailType"></detailLeft> -->
</div>
<div class="item model">
<model ref="model" @detailEdit="detailEdit"></model>
<model ref="model" @canvasReload="canvasReload" @detailEdit="detailEdit" @addSketch="()=>isEditPattern.value=false"></model>
<div class="btn">
<div class="gallery_btn" @click="submit">Submit</div>
<div class="gallery_btn" @click="previwe">Preview</div>
@@ -55,11 +56,11 @@
<div class="item detailRight">
<div class="submit">
</div>
<div class="contentRight" v-if="selectDetail && selectDetail.id && currentDetailType && !isEditPattern.value">
<div class="contentRight" v-if="currentDetailType && !isEditPattern.value">
<detailRight></detailRight>
</div>
<div class="contentRight" v-if="selectDetail && selectDetail.id && currentDetailType && isEditPattern.value">
<canvasBox></canvasBox>
<canvasBox ref="canvasBox" :key="childKey"></canvasBox>
</div>
<!-- 画布 -->
<!-- <div class="content" v-else-if="selectDetail && selectDetail.id">
@@ -101,7 +102,8 @@ export default defineComponent({
const store = useStore();
const detailDom = reactive({
model:null
model:null,
canvasBox,
})
const userDetail = computed(()=>{
return store.state.UserHabit.userDetail
@@ -115,6 +117,7 @@ export default defineComponent({
isEditPattern:{
value:false,
},// 是否编辑图案
childKey:0,
})
provide('isEditPattern',detailData.isEditPattern)
const closeModal = ()=>{
@@ -179,6 +182,7 @@ export default defineComponent({
let clothesList:any = []
for(let i = 0;i<list.length;i++){
let {scale,offset,priority,maskUrl,maskMinioUrl} = (detailDom.model as any).getSubmitData(list[i])
await (detailDom.canvasBox as any).privewDetail()
let gradient = null
let newData = list[i]?.newDetail?.[detailData.currentDetailType]
let isCurrent = list[i].id == detailData?.selectDetail?.id
@@ -189,14 +193,16 @@ export default defineComponent({
id:(newData && detailData.currentDetailType == 'sketch' && isCurrent)?newData.id:list[i].id,
// maskMinioUrl:'',
// maskUrl:'',
maskUrl:list[i].maskUrl?list[i].maskUrl:null,
offset,
partialDesign:list[i].partialDesign,
path:(newData && detailData.currentDetailType == 'sketch' && isCurrent)?newData.minIOPath:list[i].minIOPath,
printObject:list[i].printObject,
printObject:list[i].printObject?list[i].printObject:{prints:[]},
priority,
scale,
type:(newData && detailData.currentDetailType == 'sketch' && isCurrent)?newData.level2Type:list[i].type,
sketchString:'',
trims:list[i].trims,
trims:list[i].trims?list[i].trims:{prints:null},
}
if((list[i].color?.gradient || list[i].newDetail?.color?.gradient)){
gradient = list[i].newDetail?.color?.gradient || list[i].color.gradient
@@ -209,6 +215,7 @@ export default defineComponent({
}
const getSubmitData = async (str:string)=>{
let workspace = store.state.Workspace.workspace
if(!detailData.selectDetail.path && !detailData.selectDetail.newDetail?.sketch?.minIOPath)return
let clothes:any = await setClothes([detailData.selectDetail])
let data = {
designItemId:detailData.designDetail.designItemId,
@@ -269,13 +276,13 @@ export default defineComponent({
store.dispatch('DesignDetailCopy/setSubmit',data)
}
const detailEdit = (str:any)=>{
console.log(str);
if(str == 'edit'){
detailData.isEditPattern.value = !detailData.isEditPattern.value
console.log(detailData.isEditPattern);
}
}
const canvasReload = ()=>{
detailData.childKey += 1
}
onBeforeUnmount(()=>{
store.commit('DesignDetailCopy/clearDesignDetail')
})
@@ -288,6 +295,7 @@ export default defineComponent({
previwe,
submit,
detailEdit,
canvasReload,
}
},
provide() {
@@ -348,9 +356,9 @@ export default defineComponent({
transform: translate(-50%,-50%);
z-index: 2;
:deep(.ant-modal-wrap){
position: absolute;
top: 0;
left: 0;
// position: absolute;
// top: 0;
// left: 0;
}
.content{
display: flex;

14
src/component/DetailCopy/detailLeft/colorBox/index.vue
View File

@@ -87,11 +87,13 @@ export default defineComponent({
}
})
watch(()=>colorData.selectDetail.id,(newVal,oldVal)=>{
if(!newVal)return
if(!colorData.colorList?.list?.[newVal]){
colorData.colorList.list[newVal] = []
}else{
return
}
let isNoSelect = false
let isOneChecked = false
for (let index = 0; index < 9; index++) {
@@ -100,9 +102,9 @@ export default defineComponent({
item = colorData.allBoardData.colorBoards[index]
if(
colorData.allBoardData.colorBoards?.[index] &&
colorData.selectDetail.color.rgba.r == colorData.allBoardData.colorBoards?.[index]?.rgba?.[0] &&
colorData.selectDetail.color.rgba.g == colorData.allBoardData.colorBoards?.[index]?.rgba?.[1] &&
colorData.selectDetail.color.rgba.b == colorData.allBoardData.colorBoards?.[index]?.rgba?.[2] &&
colorData.selectDetail.color.rgba?.r == colorData.allBoardData.colorBoards?.[index]?.rgba?.[0] &&
colorData.selectDetail.color.rgba?.g == colorData.allBoardData.colorBoards?.[index]?.rgba?.[1] &&
colorData.selectDetail.color.rgba?.b == colorData.allBoardData.colorBoards?.[index]?.rgba?.[2] &&
JSON.stringify(colorData.selectDetail.color.gradient) == JSON.stringify(colorData.allBoardData.colorBoards?.[index]?.gradient)
){
if(!isOneChecked){
@@ -136,15 +138,15 @@ export default defineComponent({
item = {}
}
}
console.log(12312);
colorData.colorList.list[newVal].push(item)
}
},{immediate: true})
const selectImgItem = ()=>{
}
const getColorName = (color:any)=>{
let rgb:any = [color.r, color.g, color.b];
let hsv = rgbToHsv(rgb);
let data = [{
@@ -163,8 +165,6 @@ export default defineComponent({
resolve({name:'--',tcx:'--'})
});
})
}
const selectUplpadColor = (item:any)=>{
colorData.selectColor = JSON.parse(JSON.stringify(item))

20
src/component/DetailCopy/detailLeft/index.vue
View File

@@ -1,10 +1,10 @@
<template>
<div class="detailLeft">
<sketch v-show="currentDetailType == 'sketch'"></sketch>
<sketch v-show="currentDetailType == 'sketch'" @addDetail="addDetail"></sketch>
<print v-show="currentDetailType == 'print'"></print>
<color v-show="currentDetailType == 'color'"></color>
<addDetails ref="addDetails" @setSloganData="setSloganData"></addDetails>
</div>
</template>
<script lang="ts">
import { defineComponent,computed,ref,provide,nextTick,createVNode,toRefs, reactive} from 'vue'
@@ -16,10 +16,11 @@ import { useI18n } from 'vue-i18n'
import sketch from './sketch.vue'
import print from './print.vue'
import color from './colorBox/index.vue'
import addDetails from '@/component/Detail/addDetails.vue'
export default defineComponent({
components:{
sketch,print,color
sketch,print,color,addDetails
},
setup(props,{emit}) {
const store = useStore();
@@ -34,15 +35,22 @@ export default defineComponent({
currentPage:1,
})
const getDetailListDom = reactive({
libraryList:null as any,
addDetails:null as any,
})
const addDetail = () =>{
let addDetails:any = getDetailListDom.addDetails
addDetails.init(detailData.selectDetail,'')
}
const setSloganData = (data:any)=>{
detailData.selectDetail.sketchString = data
}
return{
...toRefs(detailData),
...toRefs(getDetailListData),
...toRefs(getDetailListDom),
addDetail,
setSloganData,
}
},

5
src/component/DetailCopy/detailLeft/module/currentList.vue
View File

@@ -31,6 +31,7 @@ export default defineComponent({
required:true
}
},
emits:['selectImgItem'],
setup(props,{emit}) {
const {t} = useI18n();
const store = useStore();
@@ -50,11 +51,11 @@ export default defineComponent({
})
const selectImgItem = (file:any)=>{
if(!file.resData.minIOPath)file.resData.minIOPath = getMinioUrl(file.resData.url)
store.commit('DesignDetailCopy/setNewDetail',file.resData)
// store.commit('DesignDetailCopy/setNewDetail',file.resData)
emit('selectImgItem',file)
}
onMounted(()=>{
console.log(detailData.allBoardData);
detailData.currentList = {
sketch:detailData.allBoardData.sketchboardFiles,
print:detailData.allBoardData.printboardFiles,

18
src/component/DetailCopy/detailLeft/module/libraryList.vue
View File

@@ -51,8 +51,14 @@ export default defineComponent({
type:Object,
default:()=>[] as any,
required:true
}
},
type:{
type:String,
default:'' as any,
required:true
},
},
emits:['selectImgItem'],
setup(props,{emit}) {
const store = useStore();
const detailData = reactive({
@@ -84,7 +90,8 @@ export default defineComponent({
}
const selectImgItem = (file:any)=>{
let randomNum = Math.floor(100 + Math.random() * 900);
let type = store.state.DesignDetailCopy.currentDetailType
let type = props.type
// let type = store.state.DesignDetailCopy.currentDetailType
let id = file.id
if(type == 'sketch'){
id = Number(file.id + (randomNum + ''))
@@ -95,13 +102,15 @@ export default defineComponent({
}
let data = JSON.parse(JSON.stringify(file))
data.id = id
store.commit('DesignDetailCopy/setNewDetail',data)
emit('selectImgItem',data)
// store.commit('DesignDetailCopy/setNewDetail',data)
}
const getLibraryList = ()=>{
detailData.isShowLoading = true
let level2Type = ''
let workspace = store.state.Workspace.workspace
let type = store.state.DesignDetailCopy.currentDetailType
let type = props.type
// let type = store.state.DesignDetailCopy.currentDetailType
let leve1Type
if(type == 'sketch'){
leve1Type = 'Sketchboard'
@@ -246,6 +255,7 @@ export default defineComponent({
> .material_content_list_loding{
width: 100%;
height: calc((34rem - 2rem) / 2);
overflow: hidden;
}
}
}

158
src/component/DetailCopy/detailLeft/module/selectList.vue Normal file
View File

@@ -0,0 +1,158 @@
<template>
<div class="selectList">
<div class="switch_type_list">
<div
v-if="type != 'element'"
@click.stop="openCurrent()"
class="switch_type_item"
:class="[selectTitle == 'current' ? 'select_swtich' : '',]"
>
<span class="detailText">{{ $t('DesignDetailAlter.current') }}</span>
</div>
<div
@click.stop="openUpload()"
class="switch_type_item"
:class="[selectTitle == 'upload' ? 'select_swtich' : '',]"
>
<span class="detailText">{{ $t('DesignDetailAlter.Upload') }}</span>
</div>
<div
@click.stop="openLibrary()"
class="switch_type_item"
:class="[selectTitle == 'library' ? 'select_swtich' : '']"
>
<span class="detailText">{{ $t('DesignDetailAlter.Library') }}</span>
</div>
</div>
<div class="print_content_list">
<div class="content_item" v-show="selectTitle == 'current'" v-if="type != 'element'">
<currentList ref="currentList" @selectImgItem="selectImgItem" :catecoryList="catecoryList"></currentList>
</div>
<div class="content_item" v-show="selectTitle == 'upload'">
<uploadList @selectImgItem="selectImgItem" :catecoryList="catecoryList"></uploadList>
</div>
<div class="content_item" v-show="selectTitle == 'library'">
<libraryList @selectImgItem="selectImgItem" :type="type" ref="libraryList" :catecoryList="catecoryList"></libraryList>
</div>
</div>
</div>
</template>
<script lang="ts">
import { defineComponent,computed,ref,watch,nextTick,createVNode,toRefs, reactive} from 'vue'
// import setDesignItem from '@/component/Detail/setDesignItem2.vue'
import { useStore } from "vuex";
import { useI18n } from 'vue-i18n'
// import sketchCategory from "@/component/HomePage/sketchCategory.vue";
import libraryList from './libraryList.vue'
import uploadList from './uploadList.vue'
import currentList from './currentList.vue'
export default defineComponent({
components:{
currentList,
libraryList,
uploadList,
},
props:{
catecoryList:{
type:Array,
default:()=>[]
},
type:{
type:String,
default:'' as any,
required:true
},
},
emits:['selectImgItem'],
setup(props,{emit}) {
const store = useStore();
const detailData = reactive({
selectTitle: props.type == 'element'?'upload':'current',
printList:[]
})
const getDetailListDom = reactive({
libraryList:null as any,
})
const openCurrent = ()=>{
detailData.selectTitle = 'current'
}
const openUpload = ()=>{
detailData.selectTitle = 'upload'
}
const openLibrary = ()=>{
detailData.selectTitle = 'library'
getDetailListDom.libraryList.init()
}
const selectImgItem = (data:any)=>{
emit('selectImgItem',data)
}
return{
...toRefs(detailData),
...toRefs(getDetailListDom),
openCurrent,
openUpload,
openLibrary,
selectImgItem,
}
},
provide() {
return {
}
},
})
</script>
<style lang="less" scoped>
.selectList{
// width: 34rem;
flex: 1;
overflow: hidden;
width: 100%;
height: auto;
display: flex;
flex-direction: column;
> .switch_type_list{
display: flex;
margin-bottom: 2.5rem;
> .switch_type_item:last-child{
margin-right: 0;
}
> .switch_type_item{
position: relative;
cursor: pointer;
margin-right: 6.5rem;
}
> .switch_type_item::before {
position: absolute;
content: "";
display: block;
background: #000;
height: calc(.4rem*1.2);
left: 50%;
transform: translateX(-50%);
bottom: -.5rem;
width: 0px;
transition: 0.3s all;
}
> .select_swtich {
color: #000;
font-weight: 600;
}
> .select_swtich::before {
width: 100%;
}
}
> .print_content_list{
flex: 1;
overflow: hidden;
> .content_item{
height: 100%;
margin-top: 1rem;
}
}
}
</style>

4
src/component/DetailCopy/detailLeft/module/uploadList.vue
View File

@@ -60,6 +60,7 @@ export default defineComponent({
required:true
}
},
emits:['selectImgItem'],
setup(props,{emit}) {
const {t} = useI18n();
const store = useStore();
@@ -82,7 +83,8 @@ export default defineComponent({
})
const selectImgItem = (file:any)=>{
// let data = JSON.parse(JSON.stringify(file))
store.commit('DesignDetailCopy/setNewDetail',file)
// store.commit('DesignDetailCopy/setNewDetail',file)
emit('selectImgItem',file)
}
const upFileUploadChange = (data:any)=>{
let file = data.file;

95
src/component/DetailCopy/detailLeft/print.vue
View File

@@ -9,40 +9,7 @@
<i class="fi fi-rr-picture centent"></i>
</div>
</div>
<div class="switch_type_list">
<div
@click.stop="openCurrent()"
class="switch_type_item"
:class="[selectTitle == 'current' ? 'select_swtich' : '',]"
>
<span class="detailText">{{ $t('DesignDetailAlter.current') }}</span>
</div>
<div
@click.stop="openUpload()"
class="switch_type_item"
:class="[selectTitle == 'upload' ? 'select_swtich' : '',]"
>
<span class="detailText">{{ $t('DesignDetailAlter.Upload') }}</span>
</div>
<div
@click.stop="openLibrary()"
class="switch_type_item"
:class="[selectTitle == 'library' ? 'select_swtich' : '']"
>
<span class="detailText">{{ $t('DesignDetailAlter.Library') }}</span>
</div>
</div>
<div class="print_content_list">
<div class="content_item" v-show="selectTitle == 'current'">
<currentList ref="currentList" :catecoryList="sketchCatecoryList"></currentList>
</div>
<div class="content_item" v-show="selectTitle == 'upload'">
<uploadList :catecoryList="sketchCatecoryList"></uploadList>
</div>
<div class="content_item" v-show="selectTitle == 'library'">
<libraryList ref="libraryList" :catecoryList="sketchCatecoryList"></libraryList>
</div>
</div>
<selectList @selectImgItem="selectImgItem" :type="currentDetailType" :catecoryList="printCatecoryList"></selectList>
</div>
</template>
@@ -54,26 +21,24 @@ import { Https } from "@/tool/https";
import { useStore } from "vuex";
import { useI18n } from 'vue-i18n'
// import sketchCategory from "@/component/HomePage/sketchCategory.vue";
import libraryList from './module/libraryList.vue'
import uploadList from './module/uploadList.vue'
import currentList from './module/currentList.vue'
import selectList from './module/selectList.vue'
export default defineComponent({
components:{
currentList,
libraryList,
uploadList,
selectList,
},
setup(props,{emit}) {
const store = useStore();
const detailData = reactive({
selectTitle:'current',
selectDetail:computed(()=>store.state.DesignDetailCopy.selectDetail),
sketchCatecoryList:computed(()=>{
printCatecoryList:computed(()=>{
return store.state.UserHabit.printType
}),
printList:[]
printList:[],
currentDetailType:computed(()=>store.state.DesignDetailCopy.currentDetailType)
})
watch(()=>detailData.selectDetail?.printObject?.prints,(newVal,oldVal)=>{
watch(()=>detailData?.selectDetail?.printObject?.prints,(newVal,oldVal)=>{
if(!newVal)return
detailData.printList = newVal.reduce((acc:any, curr:any) => {
if (!acc.some((item:any) => item.id === curr.id)) {
acc.push(curr);
@@ -100,8 +65,8 @@ export default defineComponent({
detailData.selectTitle = 'library'
getDetailListDom.libraryList.init()
}
const selectImgItem = ()=>{
const selectImgItem = (data:any)=>{
store.commit('DesignDetailCopy/setNewDetail',data)
}
return{
@@ -171,45 +136,5 @@ export default defineComponent({
}
}
}
> .switch_type_list{
display: flex;
margin-bottom: 2.5rem;
> .switch_type_item:last-child{
margin-right: 0;
}
> .switch_type_item{
position: relative;
cursor: pointer;
margin-right: 6.5rem;
}
> .switch_type_item::before {
position: absolute;
content: "";
display: block;
background: #000;
height: calc(.4rem*1.2);
left: 50%;
transform: translateX(-50%);
bottom: -.5rem;
width: 0px;
transition: 0.3s all;
}
> .select_swtich {
color: #000;
font-weight: 600;
transform: scale(1.15);
}
> .select_swtich::before {
width: 100%;
}
}
> .print_content_list{
flex: 1;
overflow: hidden;
> .content_item{
height: 100%;
margin-top: 1rem;
}
}
}
</style>

85
src/component/DetailCopy/detailLeft/sketch.vue
View File

@@ -1,45 +1,18 @@
<template>
<div class="sketch">
<div class="detailText">Current Print</div>
<div class="select_sketch">
<img :src="selectDetail.path" alt="">
<div class="select_sketch" v-if="selectDetail.id">
<!-- <img :src="selectDetail?.sketchString?selectDetail?.sketchString:selectDetail.path" alt=""> -->
<img :src="selectDetail.sketchString || selectDetail.path" alt="">
<i :title="$t('DesignDetail.editSketchTitle')" class="fi fi-rs-pencil-paintbrush" @click.stop="openAddDetail"></i>
</div>
<div class="switch_type_list">
<div
@click.stop="openCurrent()"
class="switch_type_item"
:class="[selectTitle == 'current' ? 'select_swtich' : '',]"
>
<span class="detailText">{{ $t('DesignDetailAlter.current') }}</span>
</div>
<div
@click.stop="openUpload()"
class="switch_type_item"
:class="[selectTitle == 'upload' ? 'select_swtich' : '',]"
>
<span class="detailText">{{ $t('DesignDetailAlter.Upload') }}</span>
</div>
<div
@click.stop="openLibrary()"
class="switch_type_item"
:class="[selectTitle == 'library' ? 'select_swtich' : '']"
>
<span class="detailText">{{ $t('DesignDetailAlter.Library') }}</span>
</div>
</div>
<div class="sketch_content_list">
<div class="content_item" v-show="selectTitle == 'current'">
<currentList ref="currentList" :catecoryList="sketchCatecoryList"></currentList>
</div>
<div class="content_item" v-show="selectTitle == 'upload'">
<uploadList :catecoryList="sketchCatecoryList"></uploadList>
</div>
<div class="content_item" v-show="selectTitle == 'library'">
<libraryList ref="libraryList" :catecoryList="sketchCatecoryList"></libraryList>
<div class="select_sketch" v-else>
<div>
<i class="fi fi-rr-picture centent"></i>
</div>
</div>
<selectList @selectImgItem="selectImgItem" :type="currentDetailType" :catecoryList="sketchCatecoryList"></selectList>
</div>
</template>
<script lang="ts">
import { defineComponent,computed,ref,provide,nextTick,createVNode,toRefs, reactive} from 'vue'
@@ -49,15 +22,13 @@ import { Https } from "@/tool/https";
import { useStore } from "vuex";
import { useI18n } from 'vue-i18n'
// import sketchCategory from "@/component/HomePage/sketchCategory.vue";
import libraryList from './module/libraryList.vue'
import uploadList from './module/uploadList.vue'
import currentList from './module/currentList.vue'
import selectList from './module/selectList.vue'
export default defineComponent({
components:{
currentList,
libraryList,
uploadList,
selectList,
},
emit:['addDetail'],
setup(props,{emit}) {
const store = useStore();
const detailData = reactive({
@@ -65,7 +36,8 @@ export default defineComponent({
selectDetail:computed(()=>store.state.DesignDetailCopy.selectDetail),
sketchCatecoryList:computed(()=>{
return store.state.Workspace.workspacePosition
})
}),
currentDetailType:computed(()=>store.state.DesignDetailCopy.currentDetailType)
})
const getDetailListData = reactive({
total:0,
@@ -85,10 +57,12 @@ export default defineComponent({
detailData.selectTitle = 'library'
getDetailListDom.libraryList.init()
}
const selectImgItem = ()=>{
const selectImgItem = (data:any)=>{
store.commit('DesignDetailCopy/setNewDetail',data)
}
const openAddDetail = ()=>{
emit('addDetail')
}
return{
...toRefs(detailData),
...toRefs(getDetailListData),
@@ -98,6 +72,7 @@ export default defineComponent({
openUpload,
openLibrary,
selectImgItem,
openAddDetail,
}
},
@@ -126,6 +101,7 @@ export default defineComponent({
border-radius: .5rem;
// border: 1px dashed #202020;
border: 1px dashed transparent;
position: relative;
background: linear-gradient(#fff, #fff) padding-box,repeating-linear-gradient(-45deg,#fff 0,#fff 0.3em, #000 0,#000 0.6em);
margin-bottom: 3rem;
> img{
@@ -133,6 +109,24 @@ export default defineComponent({
height: 100%;
object-fit: contain;
}
> i{
position: absolute;
left: auto;
right: 1rem;
top: 2rem;
font-size: 2rem;
cursor: pointer;
}
> div{
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
> i{
font-size: 10rem;
}
}
}
> .switch_type_list{
display: flex;
@@ -160,7 +154,6 @@ export default defineComponent({
> .select_swtich {
color: #000;
font-weight: 600;
transform: scale(1.15);
}
> .select_swtich::before {
width: 100%;

125
src/component/DetailCopy/detailRight/editPrintElement.vue Normal file
View File

@@ -0,0 +1,125 @@
<template>
<div class="editPrintElement">
<div class="printOverallBtn">
<div class="overallSlogin">
<div
class="habit_Overal_Single_text"
:class="{ active: !overallSingle }"
>
{{ $t('DesignPrintOperation.Overall') }}
</div>
<a-switch v-model:checked="overallSingle" @change="setOveralSingle"/>
<div
class="habit_Overal_Single_text"
:class="{ active: overallSingle }"
>
{{ $t('DesignPrintOperation.Single') }}
</div>
</div>
<div v-show="!overallSingle" class="habit_System_Designer">
<div class="habit_System_Designer_text">{{ $t('DesignPrintOperation.Scale') }}</div>
<a-slider id="system_silder"
class="system_silder"
:min="20"
:max="1000"
v-model:value="systemDesignerPercentage"
:tip-formatter="formatter"
>
</a-slider>
</div>
</div>
<div></div>
</div>
</template>
<script lang="ts">
import { defineComponent,computed,ref,provide,nextTick,createVNode,toRefs, reactive} from 'vue'
// import setDesignItem from '@/component/Detail/setDesignItem2.vue'
import { useStore } from "vuex";
export default defineComponent({
components:{
},
props: {
type: {
type: String,
default: 'print',
}
},
setup(props,{emit}) {
const store = useStore();
const editPrintElementDom = reactive({
})
const editPrintElementData = reactive({
selectDetail:computed(()=>store.state.DesignDetailCopy.selectDetail),
currentDetailType:computed(()=>store.state.DesignDetailCopy.currentDetailType),
overallSingle:false,
systemDesignerPercentage:0,
})
const setOveralSingle = ()=>{}
const formatter = (value:any)=>{
return `${value}%`;
}
return{
...toRefs(editPrintElementDom),
...toRefs(editPrintElementData),
setOveralSingle,
formatter,
}
},
provide() {
return {
}
},
})
</script>
<style lang="less" scoped>
.editPrintElement{
height: 100%;
width: 100%;
display: flex;
flex: 1;
overflow: hidden;
flex-direction: column;
> .printOverallBtn{
display: flex;
> .overallSlogin{
display: flex;
}
.habit_Overal_Single_text {
font-weight: 600;
color: rgba(0, 0, 0, 0.5);
&.active {
color: rgba(0, 0, 0, 0.7);
// font-weight: 900;
// transform: scale(1.2);
}
}
.habit_System_Designer {
transform: scale(.8);
width: 100%;
.ant-slider-track,
.ant-slider-rail {
background-color: #e1e1e1;
border-radius: calc(0.5rem*1.2);
}
.ant-slider .ant-slider-handle:not(.ant-tooltip-open),
.ant-slider-handle {
background-color: #2d2e76 !important;
border: none !important;
}
.ant-slider-handle:hover{
box-shadow: 0 0 0 5px rgba(45, 46, 118, 0.2);
}
.habit_System_Designer_text{
font-size: calc(1.6rem*1.2);
color: rgba(0, 0, 0, 0.7);
font-weight: 600;
}
}
}
}
</style>

9
src/component/DetailCopy/detailRight/index.vue
View File

@@ -5,8 +5,9 @@
<img src="https://develop.aida.com.hk/img/aida_logo_centent.b8a50882.jpg" alt="">
</div> -->
<sketchType v-if="currentDetailType === 'sketch'"></sketchType>
<printType v-if="currentDetailType === 'print'"></printType>
<elementType v-if="currentDetailType === 'element'"></elementType>
<!-- <printType v-if="currentDetailType === 'print'"></printType> -->
<!-- <elementType v-if="currentDetailType === 'element'"></elementType> -->
<editPrintElement v-if="currentDetailType === 'print' || currentDetailType === 'element'" :type="currentDetailType"></editPrintElement>
</div>
</template>
@@ -16,10 +17,11 @@ import { defineComponent,computed,ref,provide,nextTick,createVNode,toRefs, react
import { useStore } from "vuex";
import sketchType from './sketchType.vue'
import printType from './printType.vue'
import editPrintElement from './editPrintElement.vue'
import elementType from './elementType.vue'
export default defineComponent({
components:{
sketchType,printType,elementType
sketchType,printType,elementType,editPrintElement
},
setup(props,{emit}) {
const store = useStore();
@@ -89,7 +91,6 @@ export default defineComponent({
> .select_swtich {
color: #000;
font-weight: 600;
transform: scale(1.15);
}
> .select_swtich::before {
width: 100%;

24
src/component/DetailCopy/model/index.vue
View File

@@ -1,14 +1,17 @@
<template>
<div class="modelindex">
<div class="modelindex_left">
<modelNav></modelNav>
<modelNav @canvasReload="()=>$emit('canvasReload')" @addSketch="()=>$emit('addSketch')"></modelNav>
</div>
<div class="modelindex_right">
<div class="detail_btn">
<!-- 全屏 -->
<i class="fi fi-bs-expand-arrows-alt" @click="showDesignImgDetail('2')"></i>
<!-- <i class="fi fi-bs-expand-arrows-alt" @click="showDesignImgDetail('2')"></i> -->
<!-- 编辑 -->
<i class="fi fi-rr-edit" :class="{active:isEditPattern.value}" :title="$t('DesignDetail.editTitle')" @click="showDesignImgDetail('edit')"></i>
<i class="fi fi-rr-edit" :title="$t('DesignDetail.editTitle')" :class="{active:isEditPattern.value}" @click="showDesignImgDetail('edit')"></i>
<i class="fi fi-rr-copy" :title="$t('DesignDetail.compareTitle')" :class="{active:imgDesignImg}" @click="mousedownDesignImg"></i>
<!-- <i v-show="!body && !deleteShow" :title="$t('DesignDetail.DetailTitle')" class="fi fi-rr-trash" @click="deleteNav(0)"></i>
<i v-show="!body && deleteShow" class="fi fi-br-check" @click="deleteNav(1)"></i> -->
@@ -17,7 +20,7 @@
<!-- <i v-show="revocationShow>1" class="icon iconfont icon-chehui" @click="revocation"></i>
<i v-show="oppositeRevocationShow>=1" class="icon iconfont icon-fanchehui" @click="oppositeRevocation"></i> -->
</div>
<position ref="position"></position>
<position ref="position" :imgDesignImg=imgDesignImg></position>
</div>
</div>
@@ -35,7 +38,7 @@ export default defineComponent({
components:{
position,modelNav
},
emits:['detailEdit'],
emits:['detailEdit','canvasReload','addSketch'],
setup(props,{emit}) {
const store = useStore();
const detailData = reactive({
@@ -46,7 +49,8 @@ export default defineComponent({
pageSize:10,
currentPage:1,
designDetail:computed(()=>store.state.DesignDetailCopy.designDetail),
isEditPattern:inject('isEditPattern') as any
isEditPattern:inject('isEditPattern') as any,
imgDesignImg:false,
})
const getDetailListDom = reactive({
libraryList:null as any,
@@ -58,8 +62,10 @@ export default defineComponent({
const showDesignImgDetail = (str:any)=>{
emit('detailEdit',str)
}
const deleteNav = ()=>{
//图片按下样子
const mousedownDesignImg = ()=>{
getDetailListData.imgDesignImg = !getDetailListData.imgDesignImg
}
return{
...toRefs(detailData),
@@ -67,7 +73,7 @@ export default defineComponent({
...toRefs(getDetailListDom),
getSubmitData,
showDesignImgDetail,
deleteNav,
mousedownDesignImg,
}
},

36
src/component/DetailCopy/model/modelNav.vue
View File

@@ -1,9 +1,10 @@
<template>
<div class="modelNav">
<div class="modelNav_item" v-for="item,index in designvDetail.clothes" :class="{active:(selectDetail && item.id == selectDetail.id)}" @click="selectDetailItem(item,index)">
<div class="modelNav_item" v-for="item,index in designDetail.clothes" :class="{active:(selectDetail && item.id == selectDetail.id)}" @click="selectDetailItem(item,index)">
<i v-if="item?.id != selectDetail?.id" class="fi fi-rr-trash" @click.stop="deleteDetailItem(item?.id)"></i>
<img :src="item.path" alt="">
</div>
<div class="modelNav_item add" @click="">
<div v-if="currentDetailType == 'sketch' || currentDetailType == ''" :class="{active:!selectDetail?.id && currentDetailType == 'sketch'}" class="modelNav_item add" @click="addSketch">
+
</div>
</div>
@@ -21,13 +22,15 @@ export default defineComponent({
components:{
position,
},
emits:['canvasReload','addSketch'],
setup(props,{emit}) {
const store = useStore();
const {t} = useI18n()
const detailData = reactive({
selectDetail:computed(()=>store.state.DesignDetailCopy.selectDetail),
frontBack_:computed(()=>store.state.DesignDetailCopy.frontBack),
designvDetail:computed(()=>store.state.DesignDetailCopy.designDetail),
designDetail:computed(()=>store.state.DesignDetailCopy.designDetail),
currentDetailType:computed(()=>store.state.DesignDetailCopy.currentDetailType),
frontBack:{} as any,
isEditPattern:inject('isEditPattern') as any
})
@@ -46,6 +49,7 @@ export default defineComponent({
centered:true,
onOk() {
resolve(true)
emit('canvasReload')
},
onCancel(){
resolve(false)
@@ -58,12 +62,24 @@ export default defineComponent({
if(rv)store.commit('DesignDetailCopy/setDesignColthes',item.id)
})
}
const deleteDetailItem = (id:number)=>{
detailData.designDetail.clothes = detailData.designDetail.clothes.filter((item:any)=>item.id != id)
detailData.frontBack_.back = detailData.frontBack_.back.filter((item:any)=>item.id != id)
detailData.frontBack_.front = detailData.frontBack_.front.filter((item:any)=>item.id != id)
}
const addSketch = ()=>{
if(detailData.currentDetailType != 'sketch')store.commit('DesignDetailCopy/setCurrentDetailType','sketch')
store.commit('DesignDetailCopy/addDesignColthes')
emit('addSketch')
}
// onBeforeUnmount(()=>{
// detailData.selectIndex = -1
// })
return{
...toRefs(detailData),
selectDetailItem,
deleteDetailItem,
addSketch,
}
},
@@ -84,6 +100,20 @@ export default defineComponent({
border: 2px solid #B4B4B4;
margin-bottom: 1.5rem;
cursor: pointer;
position: relative;
&:hover{
> i{
display: block;
}
}
> i{
display: none;
position: absolute;
right: 1rem;
top: 1rem;
cursor: pointer;
font-size: 2rem;
}
&:last-child{
margin-bottom: 0;
}

41
src/component/DetailCopy/model/modelPosition.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="molepositon">
<div class="molepositon" :class="{active:!imgDesignImg}">
<div class="designOpenrtion_imgMask" v-if="frontBack?.body" :style="frontBack?.body?.style">
<div class="designOpenrtion_print" v-for="item,index in frontBack.back" @mousedown.stop="itemMoveMousedown(index,getMousePosition($event,false))" @touchstart.passive="itemMoveMousedown(index,getMousePosition($event,true))" @click="setpitch(item,index)" :style="frontBack.front[index].style">
<img :style="item.imageUrl?'':'display:none;'" :src="item.imageUrl" alt="">
@@ -21,6 +21,13 @@
<img src="" alt="">
</div>
</div>
<div class="molepositon" :class="{active:imgDesignImg}">
<div class="designOpenrtion_imgMask">
<div class="detail_modal_item_front">
<img :src="designDetail.designItemUrl" alt="">
</div>
</div>
</div>
</template>
<script lang="ts">
import { defineComponent,computed,inject,watch,nextTick,createVNode,toRefs, reactive} from 'vue'
@@ -34,6 +41,12 @@ import newFollowVue from '@/component/Account/message/newFollow.vue';
export default defineComponent({
components:{
},
props:{
imgDesignImg:{
default:false,
type:Boolean,
}
},
setup(props,{emit}) {
const store = useStore();
const detailData = reactive({
@@ -211,23 +224,27 @@ export default defineComponent({
item.priority = num++
})
let data:any = {
scale:[],
offset:[],
priority:-1,
scale:null,
offset:null,
priority:'',
maskUrl:'',
maskMinioUrl:'',
}
let state = false
for (let index = 0; index < arr.length; index++) {
if(value.id == arr[index].id){
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 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)
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,top]
data.offset = [left?left:0,top?top:0]
// data.offset = [left?left:0,top?top:0]
data.maskUrl = arr[index].maskUrl
data.maskMinioUrl = arr[index].maskMinioUrl
// data.priority = arr[index].style.zIndex
@@ -237,7 +254,11 @@ export default defineComponent({
break
}
}
if(!state){
data.scale = [1,1]
data.offset = [0,0]
data.priority = 10+arr.length
}
return data
}
const deleteNav = ()=>{
@@ -304,6 +325,12 @@ export default defineComponent({
flex-direction: column;
// margin: auto 0;
padding-top: 3rem;
position: relative;
display: none;
&.active{
display: block;
z-index: 2;
}
> .designOpenrtion_imgMask{
width: auto;
height: auto;
@@ -341,7 +368,7 @@ export default defineComponent({
z-index: 1 !important;
}
> .designOpenrtion_btn{
z-index: 9999;
z-index: 99;
ul{
list-style: none;
// width: 100%;

163
src/store/Detail/designDetailCopy.ts
View File

@@ -34,6 +34,8 @@ const DesignDetailCopy : Module<DesignDetailCopy,RootState> = {
let back:any = []
// let printZIndex =
data.clothes.forEach((v:any,index:any)=>{
// if(!v?.partialDesignDTO){
// }
for (let i = v.layersObject.length-1; i >= 0; i--) {
v.layersObject[i].style = {
top:v.layersObject[i].position?.[0],
@@ -67,6 +69,17 @@ const DesignDetailCopy : Module<DesignDetailCopy,RootState> = {
state.frontBack.back = back
state.designDetail = data
},
updataDetailItem(state,data){
state.designDetail.clothes.forEach((item:any) => {
if(item.id == state.selectDetail.id){
console.log(data);
for (const key in data) {
item[key] = data[key]
}
}
});
},
clearDesignDetail(state){
state.designDetail = null
state.designPreviewData = {}
@@ -103,20 +116,21 @@ const DesignDetailCopy : Module<DesignDetailCopy,RootState> = {
}
},
setCurrentDetailType(state,data){
if(state.selectDetail && state.selectDetail.id)state.currentDetailType = data
if(state.selectDetail && state.selectDetail.id){
state.currentDetailType = data
}else if(state.selectDetail && data == 'sketch'){
state.currentDetailType = data
}
},
setDesignColthes(state,data){
if(!state.currentDetailType)state.currentDetailType = 'sketch'
if(state.selectDetail && state.selectDetail.id == data){
return
}
//切换选择
// state.currentDetailType = ''
// state.designDetail.clothes[data.index] = data.clothes
state.designDetail.clothes.forEach((item:any) => {
if(item.id == data){
state.selectDetail = item
state.frontBack.front.forEach((v:any)=>{
state.frontBack.front.forEach((v:any,index:any)=>{
v.designOpenrtionBtn = false
if(v.id == data){
v.designOpenrtionBtn = true
@@ -125,10 +139,91 @@ const DesignDetailCopy : Module<DesignDetailCopy,RootState> = {
}
});
},
setPraeview(state,data){//preview
data.clothes.forEach((item:any) => {
if(!item.id)return
let id_ = state.selectDetail.id
addDesignColthes(state){
let data = {
changed:null,
color:{rgba:{
r:255,
g:255,
b:255,
}},
designType:null,
gradient:null,
id:null,
partialDesign:{
layers:[],
partialDesignPath:'',
partialDesignMinioPath:'',
partialDesignBase64:''
},
layersObject:null,
newDetail:{},
level1Type:'Sketchboard',
minIOPath:null,
path:null,
printObject:null,
trims:null,
type:null,
undividedLayer:null,
}
if(!state.currentDetailType)state.currentDetailType = 'sketch'
state.designDetail.clothes.forEach((item:any) => {
state.frontBack.front.forEach((v:any,index:any)=>{
v.designOpenrtionBtn = false
})
});
state.selectDetail = data
},
async setPraeview(state,data){//preview
for (let j = 0; j < data.clothes.length; j++) {
const item = data.clothes[j];
if(!item.id)continue
if(item.id == state.selectDetail.id || state.selectDetail.newDetail?.sketch?.id == item.id){
}
let id_ = state.selectDetail.id || state.selectDetail.newDetail?.sketch?.id
let el:any = document.querySelector('.molepositon .perview_img')
await new Promise((resolve, reject) => {
const img = new Image();
img.src = state.frontBack.body.path;
img.onload = () => {
let scale:any = el.parentNode.offsetWidth / img.width;
if(state.selectDetail.newDetail?.sketch?.id && !state.selectDetail.id){
state.frontBack.front.push({id:state.selectDetail.newDetail?.sketch?.id})
state.frontBack.back.push({id:state.selectDetail.newDetail?.sketch?.id})
}
state.frontBack.front.forEach((v:any,index:any)=>{
if(v.id == id_){
for (let i = item.layersObject.length-1; i >= 0; i--) {
item.layersObject[i].style = {
top:item.layersObject[i].position?.[0] * scale + 'px',
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:state.frontBack.front.length
}
item.layersObject[i].centers={
left:0,
top:0,
}
item.layersObject[i].designOpenrtionBtn = false
if(item.layersObject[i].imageCategory.indexOf("back") == -1){
state.frontBack.front[index] = item.layersObject[i]
// state.frontBack.front[index].style.zIndex = v.priority
state.frontBack.front[index].id = item.id
state.frontBack.front[index].undividedLayer = item.undividedLayer
}else{
state.frontBack.back[index] = item.layersObject[i]
// state.frontBack.back[index].style.zIndex = v.priority
state.frontBack.back[index].id = item.id
state.frontBack.back[index].undividedLayer = item.undividedLayer
}
}
}
})
resolve('')
};
})
state.selectDetail.change = item.change
if(state.selectDetail?.newDetail?.color){
state.selectDetail.color = state.selectDetail?.newDetail?.color
@@ -136,9 +231,7 @@ const DesignDetailCopy : Module<DesignDetailCopy,RootState> = {
}
state.selectDetail.designType = item.designType
state.selectDetail.gradient = item.gradient
state.selectDetail.id = item.id
state.selectDetail.layersObject = item.layersObject
state.selectDetail.newDetail[state.currentDetailType] = null
state.selectDetail.path = item.path
state.selectDetail.minIOPath = item.minIOPath
state.selectDetail.scale = [1,1]
@@ -146,54 +239,20 @@ const DesignDetailCopy : Module<DesignDetailCopy,RootState> = {
state.selectDetail.printObject = item.printObject
state.selectDetail.type = item.type
state.selectDetail.undividedLayer = item.undividedLayer
// if(state.currentDetailType == 'sketch'){//如果是sketch更新front和back
let el:any = document.querySelector('.molepositon .perview_img')
const img = new Image();
img.onload = () => {
let scale:any = el.parentNode.offsetWidth / img.width
state.frontBack.front.forEach((v:any,index:any)=>{
if(v.id == id_){
for (let i = item.layersObject.length-1; i >= 0; i--) {
item.layersObject[i].style = {
top:item.layersObject[i].position?.[0] * scale + 'px',
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
}
item.layersObject[i].centers={
left:0,
top:0,
}
item.layersObject[i].designOpenrtionBtn = false
if(item.layersObject[i].imageCategory.indexOf("back") == -1){
state.frontBack.front[index] = item.layersObject[i]
// state.frontBack.front[index].style.zIndex = v.priority
state.frontBack.front[index].id = item.id
state.frontBack.front[index].undividedLayer = item.undividedLayer
}else{
state.frontBack.back[index] = item.layersObject[i]
// state.frontBack.back[index].style.zIndex = v.priority
state.frontBack.back[index].id = item.id
state.frontBack.back[index].undividedLayer = item.undividedLayer
}
}
}
})
};
img.src = state.frontBack.body.path;
// }
})
if(state.selectDetail.newDetail?.sketch?.id && !state.selectDetail.id){
state.designDetail.clothes.push(state.selectDetail)
}
state.selectDetail.id = item.id
if(state.selectDetail.newDetail?.[state.currentDetailType])state.selectDetail.newDetail[state.currentDetailType] = null
}
},
// setDesignItemOthers(state,data){
// state.designDetail.others[data.index] = data.others
// },
},
actions:{
async setSubmit({ commit },str) {
console.log(str);
// setTimeout(() => {
// const message = 'Hello from Vuex';

856
src/tool/canvasGeneralCopy.js
View File

File diff suppressed because it is too large Load Diff

2
src/views/HomeMain.vue
View File

@@ -92,7 +92,7 @@
<!-- <i @click="Assignment" class="fi fi-rr-gift" title="Assignment"></i> -->
<i @click="UpgradePlan" title="Purchase" class="fi fi-rr-shop"></i>
</div>
<div v-if="userDetail.systemUser == 0 || userDetail.systemUser != 3" class="gallery_btn" style="margin-left: 3rem;" @click="subscribe">{{$t('Header.SubscribeNow')}}</div>
<div v-if="userDetail.systemUser == 0 || userDetail.systemUser == 3" class="gallery_btn" style="margin-left: 3rem;" @click="subscribe">{{$t('Header.SubscribeNow')}}</div>
<div v-else style="width: 30rem;"></div>
</div>
<navRouter :routerList="navRouterList"></navRouter>