1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
|
import { GenerativeFillMathHelpers } from "./GenerativeFillMathHelpers";
import { eraserColor } from "./generativeFillConstants";
import { Point } from "./generativeFillInterfaces";
export class BrushHandler {
static brushCircle = (
x: number,
y: number,
brushRadius: number,
ctx: CanvasRenderingContext2D
) => {
ctx.globalCompositeOperation = "destination-out";
ctx.shadowColor = "#ffffffeb";
ctx.shadowBlur = 5;
ctx.beginPath();
ctx.arc(x, y, brushRadius, 0, 2 * Math.PI);
ctx.fill();
ctx.closePath();
};
static brushCircleOverlay = (
x: number,
y: number,
brushRadius: number,
ctx: CanvasRenderingContext2D,
fillColor: string,
erase: boolean
) => {
ctx.globalCompositeOperation = "destination-out";
// ctx.globalCompositeOperation = erase ? "destination-out" : "source-over";
ctx.fillStyle = fillColor;
ctx.shadowColor = eraserColor;
ctx.shadowBlur = 5;
ctx.beginPath();
ctx.arc(x, y, brushRadius, 0, 2 * Math.PI);
ctx.fill();
ctx.closePath();
};
static createBrushPath = (
startPoint: Point,
endPoint: Point,
brushRadius: number,
ctx: CanvasRenderingContext2D
) => {
const dist = GenerativeFillMathHelpers.distanceBetween(
startPoint,
endPoint
);
for (let i = 0; i < dist; i += 5) {
const s = i / dist;
BrushHandler.brushCircle(
startPoint.x * (1 - s) + endPoint.x * s,
startPoint.y * (1 - s) + endPoint.y * s,
brushRadius,
ctx
);
}
};
static createBrushPathOverlay = (
startPoint: Point,
endPoint: Point,
brushRadius: number,
ctx: CanvasRenderingContext2D,
fillColor: string,
erase: boolean
) => {
const dist = GenerativeFillMathHelpers.distanceBetween(
startPoint,
endPoint
);
for (let i = 0; i < dist; i += 5) {
const s = i / dist;
BrushHandler.brushCircleOverlay(
startPoint.x * (1 - s) + endPoint.x * s,
startPoint.y * (1 - s) + endPoint.y * s,
brushRadius,
ctx,
fillColor,
erase
);
}
};
}
|
