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

分割

Browse Source
This commit is contained in:
X1627315083
2024-09-03 16:39:06 +08:00
parent eb54023940 d840d3de35
commit d7a57a39ee
54 changed files with 1298 additions and 723 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -10,6 +10,8 @@
<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:rgba == 'rgb(255,0,0)'}" title="front"></div>
<div class="editFrontBack_center_btn_colorGreen" @click="setOperationColor('rgb(0,255,0)')" :class="{active:rgba == 'rgb(0,255,0)'}" title="back"></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 @click="setSubmit">保存</div>
@@ -48,9 +50,8 @@ export default defineComponent({
// return props.patchData
// })
watch(()=>props.imgDomIndex,(newVal,oldVal)=>{
if(newVal == -1) return
imgDomIndex = newVal
console.log(newVal,oldVal)
console.log(props.patchData);
props.patchData.front.imageUrl= ''
init(props.patchData.front[newVal],'')
})
@@ -112,8 +113,8 @@ export default defineComponent({
fabric.Object.prototype.cornerSize = 10
fabric.Object.prototype.transparentCorners = false
exportUrl = data.imageUrl
fabric.Image.fromURL(data.imageUrl, function(img) {
exportUrl = data.maskUrl
fabric.Image.fromURL(data.maskUrl, function(img) {
// 设置背景图对象的宽度和高度与 canvas 相同
img.scaleToWidth(canvas.width);
img.scaleToHeight(canvas.height);;
@@ -133,24 +134,29 @@ export default defineComponent({
}else{
fabric.Object.prototype.controls.deleteControl.mouseUpHandler = deleteObj
}
setPencilWidth()
updateCanvasState()
loadingShow.value = false
},{ crossOrigin: "Anonymous" });
// 鼠标抬起事件
canvas.on('mouse:up', function(event) {
console.log(event);
if(canvasBtn.canvasState != 'move'){
updateCanvasState('mouseUp')
}
});
//画布上移动
canvas.on("mouse:move", event =>setCanvasMove(event));
canvas.add(brushIndicator)
canvas.on("mouse:down", event=>brushIndicator.bringToFront());
canvas.on('object:added', function() {
brushIndicator.bringToFront();
});
setOperation('pencil')
createSetTimeSubmit()
img.remove()
}
img.src = data.imageUrl
img.src = data.maskUrl
})
}
@@ -171,13 +177,20 @@ export default defineComponent({
})
}
let setClone = ()=>{
// canvasBtn.canvasState = 'move'
// canvasBtn.spreadState = false
let canvasBox = document.querySelector(".exportCanvasBox_center");
let oldCanvasDom = canvasBox.querySelector('.canvas-container')
let oldCanvasDom1 = canvasBox.querySelector('canvas')
if(oldCanvasDom)oldCanvasDom.remove()
if(oldCanvasDom1)oldCanvasDom1.remove()
}
let clearCanvas = ()=>{
canvasBtn.canvasState = 'move'
canvasBtn.spreadState = false
document.removeEventListener("keydown", canvasKeyDown);
document.removeEventListener("keyup", canvasKeyUp);
}
let rgba = 'rgba(0, 0, 0, 1)'
let rgba = ref('rgb(255,0,0)')
let brushIndicator = new fabric.Circle({
radius:2,
fill: 'rgba(0, 0, 0, 0)',
@@ -205,6 +218,7 @@ export default defineComponent({
}
// brushIndicator.fill = canvasPencilColor.value
brushIndicator.set({ left: pointer.x, top: pointer.y, visible: true,radius:(canvasBtn.canvasPencilWidth[canvasBtn.canvasState])/2 });
brushIndicator.bringToFront()
}
canvas.requestRenderAll()
}
@@ -216,12 +230,18 @@ export default defineComponent({
}else if(str == 'pencil'){
setPencil()
if(!canvas.contains(brushIndicator))canvas.add(brushIndicator)
}else if(str == 'eraser'){
setEraser()
rgba.value = ''
if(!canvas.contains(brushIndicator))canvas.add(brushIndicator)
}
}
let setOperationColor = (color)=>{
brushIndicator.set({fill: color});
rgba.value = color
canvas.freeDrawingBrush.color = color
setOperation('pencil')
}
let setMove = ()=>{
canvas.isDrawingMode = false
canvas.forEachObject((obj) =>obj.selectable = true);
@@ -230,8 +250,8 @@ export default defineComponent({
canvas.isDrawingMode = true//开启绘画模式
canvas.freeDrawingBrush = new fabric.PencilBrush(canvas,{});
canvas.freeDrawingBrush.width = Number(canvasBtn.canvasPencilWidth[canvasBtn.canvasState]);
canvas.freeDrawingBrush.color = rgba
brushIndicator.set('fill',rgba)
canvas.freeDrawingBrush.color = rgba.value
brushIndicator.set('fill',rgba.value)
canvas.freeDrawingBrush.isEraser = false
}
let setEraser = ()=>{
@@ -265,10 +285,20 @@ export default defineComponent({
canvas.freeDrawingBrush.width = Number(canvasBtn.canvasPencilWidth[canvasBtn.canvasState])
},300)
}
let setTimeSubmit = null
let createSetTimeSubmit = ()=>{
clearTimeout(setTimeSubmit)
setTimeSubmit = setTimeout(()=>{
setSubmit()
},1000)
}
let updateCanvasState = (str) =>{
if(str != 'mouseUp'){
canvas.remove(brushIndicator)
}else{
createSetTimeSubmit()
}
if(canvas.contains(brushIndicator))canvas.remove(brushIndicator)
const canvasAsJson = JSON.stringify(canvas.toJSON());
normalCanvasState.value.push(canvasAsJson);
}
@@ -287,19 +317,9 @@ export default defineComponent({
return
}
canvas.loadFromJSON(canvasState.value, () => {});
createSetTimeSubmit()
}
let setSubmit = ()=>{
let mark = 'https://www.minio.aida.com.hk:12024/aida-users/83/toProductImageElement/e30c06b3-ce93-4fd8-a381-f3bdb4b5d318.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240822%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240822T083215Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=40356ec75617430e7cef2d8cc0524ff0b18411559f4f52ab6a8f8522d7348250'
let full = 'https://www.minio.aida.com.hk:12024/aida-users/83/toProductImageElement/ad929cf8-61e9-4e73-9d1b-8338d8d151d2.jpg?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240822%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240822T083909Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=7e7facf97ebce6e621f0cd68188fdebef0e238092cd3b3dd4f70ed783433d637'
let size = {
width: exportWH * ratio[0],
height: exportWH * ratio[1],
}
segmentImage(mark,full,size).then((rv)=>{
console.log(rv);
})
return
var allObjects = canvas.getObjects('path');
var canvasDom = document.createElement("canvas");
let exportCanvas = new fabric.Canvas(canvasDom, {
@@ -337,10 +357,21 @@ export default defineComponent({
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]),
}
console.log(data);
props.patchData.front[imgDomIndex].imageUrl = data
// emit('setSloganData',data)
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
})
}
let cancelDsign = ()=>{
@@ -352,11 +383,14 @@ export default defineComponent({
loadingShow,
t,
...toRefs(canvasBtn),
rgba,
init,
setOperation,
setOperationColor,
setPencilWidth,
historyState,
setSubmit,
setClone,
cancelDsign,
};
},
@@ -387,13 +421,15 @@ export default defineComponent({
display: flex;
border: 0.2rem solid #c4c4c4;
width: 25rem;
width: 35rem;
border-radius: 4px; /* 设置圆角半径 */
flex-wrap: wrap;
align-items: center;
.editFrontBack_center_btn_item{
display: flex;
align-items: center;
padding: 1rem 0;
}
}
.exportCanvasBox_center{
@@ -433,6 +469,24 @@ export default defineComponent({
display: block;
}
}
.editFrontBack_center_btn_colorRed,.editFrontBack_center_btn_colorGreen{
width: 4rem;
height: 2rem;
border-radius: 4px;
margin: 0 .5rem;
cursor: pointer;
padding: .5rem 1;
&.active{
border: 2px solid;
border-radius: .4rem;
}
}
.editFrontBack_center_btn_colorRed{
background: rgba(255,0,0);
}
.editFrontBack_center_btn_colorGreen{
background: rgba(0,255,0);
}
i{
font-size: 2.5rem;
cursor: pointer;