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

Merge remote-tracking branch 'origin/StableVersion' into develop

Browse Source
This commit is contained in:
X1627315083
2024-09-25 11:07:49 +08:00
parent f840b03c0d
commit 309cdf16a9
33 changed files with 3462 additions and 748 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -34,7 +34,12 @@
<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 class="exportCanvasBox_center">
<div class="exportCanvasBox_center_box">
<div class="exportCanvasBox_center">
<!-- <div class="editFrontBack_bgImg" v-show="loadingShow">
<img :src="imgData?.undividedLayer" alt="">
</div> -->
</div>
<div class="editFrontBack_pencilbtn" v-show="loadingShow" :style="pencilbtnStyle"></div>
</div>
</div>
@@ -63,6 +68,7 @@ import allOrder from "@/component/Pay/allOrder.vue";
import creditsDetail from "@/component/Pay/creditsDetail.vue";
import { exportSele,JSRectUpdata,JSchangeType,JScanvasMouseDown,JSSetRemoveImage,JScreateCheck,JSSetTexture } from "@/tool/canvasDrawing";
import { useI18n } from "vue-i18n";
import { getMousePosition } from "@/tool/mdEvent";
export default defineComponent({
components: {
creditsDetail,
@@ -110,15 +116,8 @@ export default defineComponent({
exportWH = 512
nextTick(()=>{
let canvasBox = document.querySelector(".addDetails_modal .exportCanvasBox_center");
let oldCanvasDom = canvasBox.querySelector('.canvas-container')
let oldCanvasDom1 = canvasBox.querySelector('canvas')
var canvasDom = document.createElement("canvas");
document.addEventListener("keydown", canvasKeyDown);
document.addEventListener("keyup", canvasKeyUp);
if(oldCanvasDom)oldCanvasDom.remove()
if(oldCanvasDom)loadingShow.value = false
if(oldCanvasDom1)oldCanvasDom1.remove()
canvasBox.appendChild(canvasDom);
document.removeEventListener('mousemove', mouseMove);
document.removeEventListener('touchmove', touchmove);
let img = new Image();
img.onload = function(){
@@ -136,13 +135,11 @@ export default defineComponent({
exportWH = img.height
}
ratio = [wScale,hScale]
canvas = new fabric.Canvas(canvasDom, {
width: canvasWH.value * wScale,
height: canvasWH.value * hScale,
isDrawingMode: false, // 开启绘图模式
});
canvas = canvasGeneral.canvasInit(canvasBox,{
width:canvasWH.value * wScale,
height:canvasWH.value * hScale,
})
scale = img.height/canvas.height
JSchangeType(canvas,'init')
pencilbtnStyle.value.background = rgba
fabric.Object.prototype.cornerSize = 10
@@ -174,7 +171,8 @@ export default defineComponent({
});
//画布上移动
canvas.on("mouse:move", event =>setCanvasMove(event));
document.addEventListener('mousemove', mouseMove);
document.addEventListener('touchmove', touchmove);
setOperation('pencil')
img.remove()
}
@@ -206,20 +204,24 @@ export default defineComponent({
document.removeEventListener("keyup", canvasKeyUp);
}
let rgba = 'rgba(0, 0, 0, 1)'
let mouseMove = (event)=>{
let e = getMousePosition(event,false)
setCanvasMove(e)
}
let touchmove = (event)=>{
let e = getMousePosition(event,true)
setCanvasMove(e)
}
let setCanvasMove = (event)=>{
var pointer = canvas.getPointer(event.e);
if(canvas.isDrawingMode){
canvas.setCursor('none');
}
let canvasBox = document.querySelector(".addDetails_canvasCenter .canvas-container");
const rect = canvasBox.getBoundingClientRect();
const parentRect = canvasBox.parentElement.getBoundingClientRect();
let parentX = rect.left - parentRect.left
let parentY = rect.top - parentRect.top
pencilbtnStyle.value.left = parentX + pointer.x+'px'
pencilbtnStyle.value.top = parentY + pointer.y+'px'
canvas.requestRenderAll()
let canvasCenterBox = document.querySelector(".addDetails_modal .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)=>{
canvasBtn.canvasState = str
@@ -339,26 +341,17 @@ export default defineComponent({
}
)
exportCanvas.add(obj)
// if(allObjects.length-1 == index){
// let data = exportCanvas.toDataURL('jpg')
// cancelDsign()
// clearCanvas()
// emit('setSloganData',data)
// }
})
let data = exportCanvas.toDataURL('jpg')
cancelDsign()
clearCanvas()
emit('setSloganData',data)
})
}
let cancelDsign = ()=>{
canvas.dispose();
showPayOrder.value = false
document.removeEventListener('keydown',canvasKeyDown);
document.removeEventListener('keyup', canvasKeyUp);
showPayOrder.value = false
}
return {
presentState,
@@ -473,6 +466,25 @@ export default defineComponent({
position: relative;
margin: 0 auto;
}
.exportCanvasBox_center_box{
padding: 3rem;
height: 100%;
flex: 1;
position: relative;
width: 100%;
background: #e6e6e6;
&:hover{
cursor: none;
}
.editFrontBack_pencilbtn{
position: absolute;
z-index: 1;
border-radius: 50%;
border: 1px solid #000;
pointer-events: none;
transform: translate(-50%,-50%);
}
}
.exportCanvasBox_center{
height: 100%;
flex: 1;