+
+
+
+# color-picker
+
+> TODO: 颜色取色器，适用于 Vue3
+
+
+
+
+
+## Usage
+
+```
+yarn add @palxp/color-picker
+
+import colorPicker from '@palxp/color-picker'
+```
+
+## API
+
+[API Docs 链接](/#/docs)
+
+
diff --git a/packages/color-picker/comps/AngleHandle.vue b/packages/color-picker/comps/AngleHandle.vue
new file mode 100644
index 0000000..5100f31
--- /dev/null
+++ b/packages/color-picker/comps/AngleHandle.vue
@@ -0,0 +1,150 @@
+
+
+
+
+# image-extraction
+
+> TODO:
+
+
+
+## Usage
+
+```
+yarn add @palxp/image-extraction
+
+import image-extraction from '@palxp/image-extraction'
+```
+
+## API
+
+[API Docs 链接](/#/docs)
+
+
diff --git a/packages/image-extraction/assets/eraser.png b/packages/image-extraction/assets/eraser.png
new file mode 100644
index 0000000..2402dcc
Binary files /dev/null and b/packages/image-extraction/assets/eraser.png differ
diff --git a/packages/image-extraction/composables/use-init-listeners.ts b/packages/image-extraction/composables/use-init-listeners.ts
new file mode 100644
index 0000000..184e1c1
--- /dev/null
+++ b/packages/image-extraction/composables/use-init-listeners.ts
@@ -0,0 +1,77 @@
+import { transformedDrawImage } from '../helpers/dom-helper'
+import { initDrawingListeners } from '../helpers/init-drawing-listeners'
+import { initDragListener, initScaleListener } from '../helpers/init-transform-listener'
+import { BoardRect } from '../types/common'
+import { ImageSources, MattingProps, UseInitListenersConfig } from '../types/init-matting'
+import { onBeforeUnmount, watch, watchEffect } from 'vue'
+
+export function useInitDrawingListeners(props: MattingProps, config: UseInitListenersConfig) {
+ const { radius, hardness, isErasing } = props
+ const { boardContexts, transformConfig, mattingSources, draggingInputBoard, initialized, boardRect, listenerManager } = config
+ const { inputCtx } = boardContexts
+ watchEffect(() => {
+ if (initialized.value) {
+ initDrawingListeners({
+ listenerManager,
+ imageSources: mattingSources.value as ImageSources,
+ boardContexts,
+ initDrawingConfig: { radius, hardness, transformConfig },
+ isErasing: isErasing.value,
+ draggingInputBoard: draggingInputBoard.value,
+ boardRect: boardRect.value as BoardRect,
+ })
+ }
+ })
+ onBeforeUnmount(() => {
+ listenerManager.removeMouseListeners((inputCtx.value as CanvasRenderingContext2D).canvas)
+ })
+}
+
+export function useInitTransformListener(config: UseInitListenersConfig) {
+ const { boardContexts, initialized, draggingInputBoard, transformConfig, isDrawing, listenerManager } = config
+ const { inputCtx, inputHiddenCtx, outputCtx, outputHiddenCtx } = boardContexts
+ watch(
+ [initialized, draggingInputBoard, isDrawing],
+ () => {
+ if (initialized.value && !isDrawing.value) {
+ const initConfig = {
+ inputContexts: { ctx: inputCtx.value as CanvasRenderingContext2D, hiddenCtx: inputHiddenCtx.value },
+ outputContexts: { ctx: outputCtx.value as CanvasRenderingContext2D, hiddenCtx: outputHiddenCtx.value },
+ draggingInputBoard: draggingInputBoard.value,
+ listenerManager,
+ transformConfig,
+ }
+ initDragListener(initConfig)
+ initScaleListener(initConfig)
+ // 触发重新绑定绘制监听器,必须输入画板拖动结束时才能重新绑定，否则绘制监听器会覆盖拖动监听器
+ if (!draggingInputBoard.value) {
+ transformConfig.positionRange = { ...transformConfig.positionRange }
+ }
+ }
+ },
+ { deep: true },
+ )
+ watch([transformConfig], async () => {
+ if (initialized.value) {
+ const { positionRange, scaleRatio } = transformConfig
+ const commonConfig = { positionRange, scaleRatio }
+ transformedDrawImage({
+ ctx: inputCtx.value as CanvasRenderingContext2D,
+ hiddenCtx: inputHiddenCtx.value,
+ ...commonConfig,
+ })
+ transformedDrawImage({
+ ctx: outputCtx.value as CanvasRenderingContext2D,
+ hiddenCtx: outputHiddenCtx.value,
+ withBorder: true,
+ ...commonConfig,
+ })
+ }
+ })
+ onBeforeUnmount(() => {
+ if (initialized.value) {
+ listenerManager.removeMouseListeners((outputCtx.value as CanvasRenderingContext2D).canvas)
+ listenerManager.removeWheelListeners()
+ }
+ })
+}
diff --git a/packages/image-extraction/composables/use-init-matting.ts b/packages/image-extraction/composables/use-init-matting.ts
new file mode 100644
index 0000000..6377797
--- /dev/null
+++ b/packages/image-extraction/composables/use-init-matting.ts
@@ -0,0 +1,62 @@
+import { EventType, UPDATE_BOARDRECT_DEBOUNCE_TIME } from '../constants'
+import { resizeCanvas } from '../helpers/dom-helper'
+import { computeBoardRect } from '../helpers/init-compute'
+import { initMatting } from '../helpers/init-matting'
+import { MattingProps, UseInitMattingBoardsConfig } from '../types/init-matting'
+import { debounce } from 'throttle-debounce'
+import { onMounted, onUnmounted, watch } from 'vue'
+
+export function useInitMattingBoards(props: MattingProps, useInitMattingBoardsConfig: UseInitMattingBoardsConfig) {
+ const { picFile } = props
+ const {
+ boardContexts,
+ boardContexts: { inputCtx, outputCtx, inputHiddenCtx, outputHiddenCtx },
+ } = useInitMattingBoardsConfig
+ const { initMattingResult, width, height, initialized } = useInitMattingBoardsConfig
+ const { boardRect, transformConfig, mattingSources } = useInitMattingBoardsConfig
+ const updateBoardRect = () => {
+ boardRect.value = computeBoardRect((inputCtx.value as CanvasRenderingContext2D).canvas)
+ }
+ const resizeBoards = () => {
+ requestAnimationFrame(() => {
+ const commonConfig = { targetHeight: height.value, targetWidth: width.value, transformConfig }
+ resizeCanvas({
+ ctx: inputCtx.value as CanvasRenderingContext2D,
+ hiddenCtx: inputHiddenCtx.value,
+ ...commonConfig,
+ })
+ resizeCanvas({
+ ctx: outputCtx.value as CanvasRenderingContext2D,
+ hiddenCtx: outputHiddenCtx.value,
+ withBorder: true,
+ ...commonConfig,
+ })
+ })
+ }
+ watch([picFile], async () => {
+ if (picFile.value && width.value && height.value) {
+ initialized.value = false
+ initMattingResult.value = await initMatting({
+ boardContexts,
+ picFile: picFile.value,
+ targetSize: { width: width.value, height: height.value },
+ transformConfig: {},
+ imageSources: {},
+ })
+ const { raw, mask, orig, positionRange, scaleRatio } = initMattingResult.value
+ transformConfig.positionRange = positionRange
+ transformConfig.scaleRatio = scaleRatio
+ mattingSources.value = { raw, mask, orig }
+ updateBoardRect()
+ resizeBoards()
+ initialized.value = true
+ }
+ })
+ onMounted(() => {
+ window.addEventListener(EventType.Resize, resizeBoards)
+ window.addEventListener('scroll', debounce(UPDATE_BOARDRECT_DEBOUNCE_TIME, updateBoardRect))
+ })
+ onUnmounted(() => {
+ window.removeEventListener(EventType.Resize, resizeBoards)
+ })
+}
diff --git a/packages/image-extraction/composables/use-matting-cursor.ts b/packages/image-extraction/composables/use-matting-cursor.ts
new file mode 100644
index 0000000..0a54759
--- /dev/null
+++ b/packages/image-extraction/composables/use-matting-cursor.ts
@@ -0,0 +1,111 @@
+import { ERASE_POINT_INNER_COLOR, ERASE_POINT_OUTER_COLOR, EventType, INITIAL_HARDNESS, INITIAL_RADIUS, REPAIR_POINT_INNER_COLOR, REPAIR_POINT_OUTER_COLOR } from '../constants'
+import { drawBrushPoint, getLoadedImage } from '../helpers/dom-helper'
+import { DrawingCircularConfig } from '../types/dom'
+import { computed, reactive, ref, Ref, UnwrapRef, watch, watchEffect } from 'vue'
+import iconEraser from '../assets/eraser.png'
+import { CursorStyle, UseCursorConfig } from '../types/cursor'
+
+export class MattingCursor {
+ ctx: CanvasRenderingContext2D
+ cursorImage: Ref