From baa83adfa97a7fe33c7fe3255b46f9c97bf8b809 Mon Sep 17 00:00:00 2001
From: IchliebedichZhu <54796446@qq.com>
Date: Tue, 5 Mar 2024 12:37:00 +0000
Subject: [PATCH 1/3] feat: convert lineguides component to composition API
---
.../cropper/CropImage/CropImage 2.vue | 107 +++++++++
.../business/cropper/CropImage/index 2.vue | 114 ++++++++++
src/components/modules/layout/lineGuides.vue | 205 ++++++++++--------
3 files changed, 334 insertions(+), 92 deletions(-)
create mode 100644 src/components/business/cropper/CropImage/CropImage 2.vue
create mode 100644 src/components/business/cropper/CropImage/index 2.vue
diff --git a/src/components/business/cropper/CropImage/CropImage 2.vue b/src/components/business/cropper/CropImage/CropImage 2.vue
new file mode 100644
index 0000000..de50847
--- /dev/null
+++ b/src/components/business/cropper/CropImage/CropImage 2.vue
@@ -0,0 +1,107 @@
+
+
+
+
+
![imgBox]()
+
+
+
+
+
+
+
+
diff --git a/src/components/business/cropper/CropImage/index 2.vue b/src/components/business/cropper/CropImage/index 2.vue
new file mode 100644
index 0000000..66d0d32
--- /dev/null
+++ b/src/components/business/cropper/CropImage/index 2.vue
@@ -0,0 +1,114 @@
+
+
+
+
+
![imgBox]()
+
+
+
+
+
+
+
+
diff --git a/src/components/modules/layout/lineGuides.vue b/src/components/modules/layout/lineGuides.vue
index ab3a318..2fe0ad8 100644
--- a/src/components/modules/layout/lineGuides.vue
+++ b/src/components/modules/layout/lineGuides.vue
@@ -10,106 +10,127 @@
diff --git a/src/components/modules/layout/zoomControl/data.ts b/src/components/modules/layout/zoomControl/data.ts
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/modules/layout/zoomControl.vue b/src/components/modules/layout/zoomControl/index.vue
similarity index 100%
rename from src/components/modules/layout/zoomControl.vue
rename to src/components/modules/layout/zoomControl/index.vue
diff --git a/src/utils/plugins/pointImg.ts b/src/utils/plugins/pointImg.ts
index 8186427..1306bc2 100644
--- a/src/utils/plugins/pointImg.ts
+++ b/src/utils/plugins/pointImg.ts
@@ -9,7 +9,7 @@ export default class PointImg {
private canvas: HTMLCanvasElement | undefined
private cvs: CanvasRenderingContext2D | null | undefined
- constructor(img: any) {
+ constructor(img: HTMLImageElement) {
if (img.src) {
try {
this.canvas = document.createElement('canvas')
@@ -33,24 +33,25 @@ export default class PointImg {
*/
const color: Record = {}
try {
- if (!this.cvs) return
- const obj = this.cvs.getImageData(x, y, 1, 1)
- const arr = obj.data.toString().split(',')
+ if (this.cvs) {
+ const obj = this.cvs.getImageData(x, y, 1, 1)
+ const arr = obj.data.toString().split(',')
- let first = parseInt(arr[0], 10).toString(16)
- first = first.length === 2 ? first : first + first
+ let first = parseInt(arr[0], 10).toString(16)
+ first = first.length === 2 ? first : first + first
- let second = parseInt(arr[1], 10).toString(16)
- second = second.length === 2 ? second : second + second
+ let second = parseInt(arr[1], 10).toString(16)
+ second = second.length === 2 ? second : second + second
- let third = parseInt(arr[2], 10).toString(16)
- third = third.length === 2 ? third : third + third
+ let third = parseInt(arr[2], 10).toString(16)
+ third = third.length === 2 ? third : third + third
- let last = parseInt(arr.pop() || '0', 10) / 255
- last = Number(last.toFixed(0))
+ let last = parseInt(arr.pop() || '0', 10) / 255
+ last = Number(last.toFixed(0))
- color['rgba'] = 'rgba(' + arr.join(',') + ',' + last + ')'
- color['#'] = '#' + first + second + third
+ color['rgba'] = 'rgba(' + arr.join(',') + ',' + last + ')'
+ color['#'] = '#' + first + second + third
+ }
} catch (error) {
// console.log('此为解析图片点位异常')
}
diff --git a/src/views/Draw.vue b/src/views/Draw.vue
index dcaed39..aaec167 100644
--- a/src/views/Draw.vue
+++ b/src/views/Draw.vue
@@ -17,7 +17,7 @@ import Preload from '@/utils/plugins/preload'
import FontFaceObserver from 'fontfaceobserver'
import { fontWithDraw, font2style } from '@/utils/widgets/loadFontRule'
import designBoard from '@/components/modules/layout/designBoard.vue'
-import zoomControl from '@/components/modules/layout/zoomControl.vue'
+import zoomControl from '@/components/modules/layout/zoomControl/index.vue'
export default defineComponent({
components: { designBoard, zoomControl },
diff --git a/src/views/Index.vue b/src/views/Index.vue
index f2e4db4..393037e 100644
--- a/src/views/Index.vue
+++ b/src/views/Index.vue
@@ -59,7 +59,7 @@ import { mapActions, mapGetters } from 'vuex'
import RightClickMenu from '@/components/business/right-click-menu/RcMenu.vue'
import Moveable from '@/components/business/moveable/Moveable.vue'
import designBoard from '@/components/modules/layout/designBoard.vue'
-import zoomControl from '@/components/modules/layout/zoomControl.vue'
+import zoomControl from '@/components/modules/layout/zoomControl/index.vue'
import lineGuides from '@/components/modules/layout/lineGuides.vue'
import shortcuts from '@/mixins/shortcuts'
diff --git a/src/views/Psd.vue b/src/views/Psd.vue
index 8eb9029..d3c71e3 100644
--- a/src/views/Psd.vue
+++ b/src/views/Psd.vue
@@ -53,7 +53,7 @@ import wImage from '@/components/modules/widgets/wImage/wImage.vue'
import useLoading from '@/common/methods/loading'
import uploader from '@/components/common/Uploader/index.vue'
import designBoard from '@/components/modules/layout/designBoard.vue'
-import zoomControl from '@/components/modules/layout/zoomControl.vue'
+import zoomControl from '@/components/modules/layout/zoomControl/index.vue'
import HeaderOptions from './components/UploadTemplate.vue'
import ProgressLoading from '@/components/common/ProgressLoading/index.vue'
// import MyWorker from '@/utils/plugins/webWorker'