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 @@ + + + + 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 @@ + + + + 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'