jialin
11 months ago
parent
f7c597d957
commit
a7dee45720
@ -0,0 +1,54 @@
|
||||
/// <reference lib="webworker" />
|
||||
|
||||
let offscreenCanvas: OffscreenCanvas;
|
||||
let ctx: OffscreenCanvasRenderingContext2D;
|
||||
|
||||
const COLOR = 'rgba(0, 0, 255, 0.3)';
|
||||
|
||||
type Point = { x: number; y: number; lineWidth: number };
|
||||
type Stroke = Point[];
|
||||
|
||||
self.onmessage = (event) => {
|
||||
const { width, height, strokes, maskStrokes } = event.data;
|
||||
|
||||
if (event.data.type === 'init') {
|
||||
offscreenCanvas = event.data.canvas;
|
||||
ctx = offscreenCanvas!.getContext('2d')!;
|
||||
return;
|
||||
}
|
||||
|
||||
if (event.data.type === 'draw') {
|
||||
ctx.fillStyle = COLOR;
|
||||
ctx.fillRect(0, 0, width, height);
|
||||
|
||||
ctx.globalCompositeOperation = 'destination-out';
|
||||
|
||||
[...strokes].forEach((stroke: Stroke) => {
|
||||
stroke.forEach((point: { x: number; y: number; lineWidth: number }) => {
|
||||
const lineWidth = point.lineWidth;
|
||||
ctx.fillStyle = 'rgba(0,0,0,1)';
|
||||
ctx.beginPath();
|
||||
ctx.arc(point.x, point.y, lineWidth / 2, 0, Math.PI * 2);
|
||||
ctx.fill();
|
||||
});
|
||||
});
|
||||
|
||||
// points
|
||||
maskStrokes?.forEach((stroke: Stroke) => {
|
||||
stroke.forEach((point: { x: number; y: number; lineWidth: number }) => {
|
||||
const lineWidth = 4;
|
||||
ctx.fillStyle = 'rgba(0,0,0,1)';
|
||||
ctx.beginPath();
|
||||
ctx.arc(point.x, point.y, lineWidth / 2, 0, Math.PI * 2);
|
||||
ctx.fill();
|
||||
});
|
||||
});
|
||||
|
||||
const newImageData = ctx.getImageData(0, 0, width, height);
|
||||
self.postMessage({ type: 'done', imageData: newImageData }, [
|
||||
newImageData.data.buffer
|
||||
]);
|
||||
}
|
||||
};
|
||||
|
||||
export {};
|
||||
@ -0,0 +1,111 @@
|
||||
let offscreenCanvas: OffscreenCanvas;
|
||||
let ctx: OffscreenCanvasRenderingContext2D;
|
||||
|
||||
const COLOR = 'rgba(0, 0, 255, 0.3)';
|
||||
|
||||
type Point = { x: number; y: number; lineWidth: number };
|
||||
type Stroke = Point[];
|
||||
|
||||
const postDone = () => {
|
||||
const imageData = ctx.getImageData(
|
||||
0,
|
||||
0,
|
||||
offscreenCanvas.width,
|
||||
offscreenCanvas.height
|
||||
);
|
||||
self.postMessage({ type: 'done', imageData });
|
||||
};
|
||||
|
||||
const drawFillRect = (
|
||||
ctx: OffscreenCanvasRenderingContext2D,
|
||||
stroke: Stroke,
|
||||
options: any
|
||||
) => {
|
||||
const { color } = options;
|
||||
|
||||
stroke?.forEach(({ x, y }) => {
|
||||
const width = options.lineWidth || 10;
|
||||
|
||||
ctx.save();
|
||||
ctx.fillStyle = 'rgba(0,0,0,1)';
|
||||
ctx.globalCompositeOperation = 'destination-out';
|
||||
ctx.fillRect(x - width / 2, y - width / 2, width, width);
|
||||
|
||||
ctx.globalCompositeOperation = 'source-over';
|
||||
ctx.fillStyle = color;
|
||||
ctx.fillRect(x - width / 2, y - width / 2, width, width);
|
||||
ctx.restore();
|
||||
});
|
||||
};
|
||||
|
||||
const drawStrokes = (strokes: Stroke[]) => {
|
||||
strokes?.forEach((stroke) => {
|
||||
drawFillRect(ctx, stroke, {
|
||||
color: COLOR
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
const drawLine = (
|
||||
stroke: Stroke | Point[],
|
||||
options: {
|
||||
lineWidth?: number;
|
||||
color: string;
|
||||
compositeOperation: 'source-over' | 'destination-out';
|
||||
}
|
||||
) => {
|
||||
const { color, compositeOperation } = options;
|
||||
ctx.lineCap = 'round';
|
||||
ctx.lineJoin = 'round';
|
||||
ctx.globalCompositeOperation = compositeOperation;
|
||||
ctx.save();
|
||||
|
||||
ctx.beginPath();
|
||||
|
||||
stroke?.forEach((point, i) => {
|
||||
const { x, y } = point;
|
||||
ctx.lineWidth = point.lineWidth || 10;
|
||||
if (i === 0) {
|
||||
ctx.moveTo(x, y);
|
||||
} else {
|
||||
ctx.lineTo(x, y);
|
||||
}
|
||||
});
|
||||
if (compositeOperation === 'source-over') {
|
||||
ctx.strokeStyle = color;
|
||||
}
|
||||
ctx.stroke();
|
||||
ctx.restore();
|
||||
};
|
||||
|
||||
const drawLines = (strokes: Stroke[]) => {
|
||||
strokes?.forEach((stroke: Point[], index) => {
|
||||
drawLine(stroke, {
|
||||
color: COLOR,
|
||||
compositeOperation: 'destination-out'
|
||||
});
|
||||
|
||||
drawLine(stroke, {
|
||||
color: COLOR,
|
||||
compositeOperation: 'source-over'
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
self.onmessage = (event) => {
|
||||
if (event.data.type === 'init') {
|
||||
offscreenCanvas = event.data.canvas;
|
||||
ctx = offscreenCanvas!.getContext('2d')!;
|
||||
return;
|
||||
}
|
||||
|
||||
if (event.data.type === 'draw') {
|
||||
ctx?.clearRect(0, 0, offscreenCanvas.width, offscreenCanvas.height);
|
||||
const { maskStrokes, strokes } = event.data;
|
||||
drawStrokes(maskStrokes);
|
||||
drawLines(strokes);
|
||||
postDone();
|
||||
}
|
||||
};
|
||||
|
||||
export {};
|
||||
@ -0,0 +1,106 @@
|
||||
import FieldComponent from '@/components/seal-form/field-component';
|
||||
import { useIntl } from '@umijs/max';
|
||||
import { Form } from 'antd';
|
||||
import _ from 'lodash';
|
||||
import React, {
|
||||
forwardRef,
|
||||
memo,
|
||||
useCallback,
|
||||
useEffect,
|
||||
useId,
|
||||
useImperativeHandle,
|
||||
useMemo
|
||||
} from 'react';
|
||||
import { ParamsSchema } from '../config/types';
|
||||
|
||||
type ParamsSettingsProps = {
|
||||
ref?: any;
|
||||
style?: React.CSSProperties;
|
||||
onValuesChange?: (changeValues: any, value: Record<string, any>) => void;
|
||||
paramsConfig?: ParamsSchema[];
|
||||
initialValues?: Record<string, any>;
|
||||
extra?: React.ReactNode;
|
||||
};
|
||||
|
||||
const ParamsSettings: React.FC<ParamsSettingsProps> = forwardRef(
|
||||
({ onValuesChange, style, paramsConfig, initialValues, extra }, ref) => {
|
||||
const intl = useIntl();
|
||||
const [form] = Form.useForm();
|
||||
const formId = useId();
|
||||
|
||||
useImperativeHandle(ref, () => ({
|
||||
form
|
||||
}));
|
||||
|
||||
useEffect(() => {
|
||||
form.setFieldsValue({
|
||||
...initialValues
|
||||
});
|
||||
}, [initialValues]);
|
||||
|
||||
const handleOnFinish = (values: any) => {
|
||||
console.log('handleOnFinish', values);
|
||||
};
|
||||
|
||||
const handleOnFinishFailed = (errorInfo: any) => {
|
||||
console.log('handleOnFinishFailed', errorInfo);
|
||||
};
|
||||
|
||||
const handleValuesChange = useCallback(
|
||||
(changedValues: any, allValues: any) => {
|
||||
onValuesChange?.(changedValues, allValues);
|
||||
},
|
||||
[onValuesChange]
|
||||
);
|
||||
|
||||
const renderFields = useMemo(() => {
|
||||
if (!paramsConfig) {
|
||||
return null;
|
||||
}
|
||||
const formValues = form?.getFieldsValue();
|
||||
return paramsConfig?.map((item: ParamsSchema) => {
|
||||
return (
|
||||
<Form.Item name={item.name} rules={item.rules} key={item.name}>
|
||||
<FieldComponent
|
||||
disabled={
|
||||
item.disabledConfig
|
||||
? item.disabledConfig?.when?.(formValues)
|
||||
: item.disabled
|
||||
}
|
||||
description={
|
||||
item.description?.isLocalized
|
||||
? intl.formatMessage({ id: item.description.text })
|
||||
: item.description?.text
|
||||
}
|
||||
onChange={null}
|
||||
{..._.omit(item, [
|
||||
'name',
|
||||
'rules',
|
||||
'disabledConfig',
|
||||
'description'
|
||||
])}
|
||||
></FieldComponent>
|
||||
</Form.Item>
|
||||
);
|
||||
});
|
||||
}, [paramsConfig, intl]);
|
||||
|
||||
return (
|
||||
<Form
|
||||
style={{ ...style }}
|
||||
name={formId}
|
||||
form={form}
|
||||
onValuesChange={handleValuesChange}
|
||||
onFinish={handleOnFinish}
|
||||
onFinishFailed={handleOnFinishFailed}
|
||||
>
|
||||
<div>
|
||||
{renderFields}
|
||||
{extra}
|
||||
</div>
|
||||
</Form>
|
||||
);
|
||||
}
|
||||
);
|
||||
|
||||
export default memo(ParamsSettings);
|
||||
Loading…
Reference in new issue