- ![]()
+
-
-
-
-
-
diff --git a/src/component/Detail/setDesignItem.vue b/src/component/Detail/setDesignItem.vue
index 82c5beae..80c0b8b1 100644
--- a/src/component/Detail/setDesignItem.vue
+++ b/src/component/Detail/setDesignItem.vue
@@ -8,7 +8,6 @@
+
@@ -32,6 +34,7 @@ import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
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 { getMousePosition } from "@/tool/mdEvent";
import { useI18n } from "vue-i18n";
export default defineComponent({
components: {
@@ -92,18 +95,14 @@ export default defineComponent({
var canvasDom = document.createElement("canvas");
document.addEventListener("keydown", canvasKeyDown);
document.addEventListener("keyup", canvasKeyUp);
- let oldCanvasDom = canvasBox.querySelector('.canvas-container')
- let oldCanvasDom1 = canvasBox.querySelector('canvas')
- if(oldCanvasDom)oldCanvasDom.remove()
- if(oldCanvasDom)loadingShow.value = false
- if(oldCanvasDom1)oldCanvasDom1.remove()
+ document.removeEventListener('mousemove', mouseMove);
+ document.removeEventListener('touchmove', touchmove);
canvasBox.appendChild(canvasDom);
let img = new Image();
img.onload = function(){
loadingShow.value = true
let height = canvasBox.offsetHeight;
canvasWH.value = height
- console.log(canvasBox.offsetHeight);
canvasBox.style.width = height+'px'
let wScale = 1
let hScale = 1
@@ -117,13 +116,10 @@ export default defineComponent({
exportWH = img.height
}
ratio = [wScale,hScale]
- canvas = new fabric.Canvas(canvasDom, {
- width: canvasWH.value * wScale,
- height: canvasWH.value * hScale,
- isDrawingMode: false, // 开启绘图模式
- });
- JSchangeType(canvas,'init')
- console.log(rgba.value);
+ canvas = canvasGeneral.canvasInit(canvasBox,{
+ width:canvasWH.value * wScale,
+ height:canvasWH.value * hScale,
+ })
pencilbtnStyle.value.background = rgba.value
fabric.Object.prototype.cornerSize = 10
fabric.Object.prototype.transparentCorners = false
@@ -159,7 +155,9 @@ export default defineComponent({
});
//画布上移动
- canvas.on("mouse:move", event =>setCanvasMove(event));
+ // canvas.on("mouse:move", event =>setCanvasMove(event));
+ document.addEventListener('mousemove', mouseMove);
+ document.addEventListener('touchmove', touchmove);
setOperation('pencil')
createSetTimeSubmit()
img.remove()
@@ -186,8 +184,7 @@ export default defineComponent({
}
let setClone = ()=>{
- // canvasBtn.canvasState = 'move'
- // canvasBtn.spreadState = false
+
let canvasBox = document.querySelector(".editFrontBack_center .exportCanvasBox_center");
let oldCanvasDom = canvasBox.querySelector('.canvas-container')
let oldCanvasDom1 = canvasBox.querySelector('canvas')
@@ -200,22 +197,24 @@ export default defineComponent({
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)=>{
- var pointer = canvas.getPointer(event.e);
if(canvas.isDrawingMode){
canvas.setCursor('none');
- // brushIndicator.set({ left: pointer.x, top: pointer.y, visible: true,radius:(canvasBtn.canvasPencilWidth[canvasBtn.canvasState])/2 });
}
- let canvasBox = document.querySelector(".editFrontBack_center .canvas-container");
- const rect = canvasBox.getBoundingClientRect();
- const parentRect = canvasBox.parentElement.getBoundingClientRect();
- let parentX = rect.left - parentRect.left
- let parentY = rect.top - parentRect.top
- // brushIndicator.set({ left: x, top: y, visible: true,radius:(canvasBtn.canvasPencilWidth[canvasBtn.canvasState])/2 });
- pencilbtnStyle.value.left = parentX + pointer.x+'px'
- pencilbtnStyle.value.top = parentY + pointer.y+'px'
- canvas.requestRenderAll()
+ 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)=>{
canvasBtn.canvasState = str
@@ -227,7 +226,7 @@ export default defineComponent({
pencilbtnStyle.value.display = `block`
}else if(str == 'eraser'){
setEraser()
- rgba.value = 'rgb(255,255,255)'
+ // rgba.value = 'rgb(255,255,255)'
pencilbtnStyle.value.display = `block`
}
}
@@ -373,6 +372,7 @@ export default defineComponent({
})
}
let cancelDsign = ()=>{
+
document.removeEventListener('keydown',canvasKeyDown);
document.removeEventListener('keyup', canvasKeyUp);
}
@@ -410,6 +410,7 @@ export default defineComponent({
// width: calc(512px / 2);
// width: 256px;
height: 100%;
+ width: 100%;
display: flex;
flex-direction: column;
// height: calc(512px / 2);
@@ -499,13 +500,30 @@ export default defineComponent({
transform: translate(-50%,0);
}
}
- .exportCanvasBox_center{
+ .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{
margin: 0 auto;
overflow: hidden;
- background: #e6e6e6;
+ height: 100%;
+ position: relative;
// overflow: scroll;
:deep(.canvas-container){
@@ -531,14 +549,7 @@ export default defineComponent({
object-fit: contain;
}
}
- .editFrontBack_pencilbtn{
- position: absolute;
- z-index: 1;
- border-radius: 50%;
- border: 1px solid #000;
- pointer-events: none;
- transform: translate(-50%,-50%);
- }
+
}
.exportCanvasBox_center:hover{
.editFrontBack_center_btn{
diff --git a/src/component/Detail/oldHistoryDetail.vue b/src/component/Detail/oldHistoryDetail.vue
deleted file mode 100644
index 5410056c..00000000
--- a/src/component/Detail/oldHistoryDetail.vue
+++ /dev/null
@@ -1,141 +0,0 @@
-
-
+
+ ![]()
+
-
-
-