@nasser-sw/fabric 7.0.1-beta3 → 7.0.1-beta4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/0 +0 -0
- package/dist/index.js +323 -155
- package/dist/index.js.map +1 -1
- package/dist/index.min.js +1 -1
- package/dist/index.min.js.map +1 -1
- package/dist/index.min.mjs +1 -1
- package/dist/index.min.mjs.map +1 -1
- package/dist/index.mjs +323 -155
- package/dist/index.mjs.map +1 -1
- package/dist/index.node.cjs +323 -155
- package/dist/index.node.cjs.map +1 -1
- package/dist/index.node.mjs +323 -155
- package/dist/index.node.mjs.map +1 -1
- package/dist/package.json.min.mjs +1 -1
- package/dist/package.json.mjs +1 -1
- package/dist/src/shapes/Line.d.ts +31 -86
- package/dist/src/shapes/Line.d.ts.map +1 -1
- package/dist/src/shapes/Line.min.mjs +1 -1
- package/dist/src/shapes/Line.min.mjs.map +1 -1
- package/dist/src/shapes/Line.mjs +323 -154
- package/dist/src/shapes/Line.mjs.map +1 -1
- package/dist-extensions/src/shapes/CustomLine.d.ts +10 -0
- package/dist-extensions/src/shapes/CustomLine.d.ts.map +1 -0
- package/dist-extensions/src/shapes/Line.d.ts +31 -86
- package/dist-extensions/src/shapes/Line.d.ts.map +1 -1
- package/fabric-test-editor.html +157 -8
- package/fabric-test2.html +513 -0
- package/fabric.ts +182 -182
- package/package.json +1 -1
- package/src/shapes/Line.ts +372 -158
- package/debug/konva/CHANGELOG.md +0 -1474
- package/debug/konva/LICENSE +0 -22
- package/debug/konva/README.md +0 -205
- package/debug/konva/gulpfile.mjs +0 -110
- package/debug/konva/package.json +0 -139
- package/debug/konva/release.sh +0 -65
- package/debug/konva/resources/doc-includes/ContainerParams.txt +0 -6
- package/debug/konva/resources/doc-includes/NodeParams.txt +0 -20
- package/debug/konva/resources/doc-includes/ShapeParams.txt +0 -53
- package/debug/konva/resources/jsdoc.conf.json +0 -28
- package/debug/konva/rollup.config.mjs +0 -32
- package/debug/konva/src/Animation.ts +0 -237
- package/debug/konva/src/BezierFunctions.ts +0 -826
- package/debug/konva/src/Canvas.ts +0 -193
- package/debug/konva/src/Container.ts +0 -649
- package/debug/konva/src/Context.ts +0 -1017
- package/debug/konva/src/Core.ts +0 -5
- package/debug/konva/src/DragAndDrop.ts +0 -173
- package/debug/konva/src/Factory.ts +0 -246
- package/debug/konva/src/FastLayer.ts +0 -29
- package/debug/konva/src/Global.ts +0 -210
- package/debug/konva/src/Group.ts +0 -31
- package/debug/konva/src/Layer.ts +0 -546
- package/debug/konva/src/Node.ts +0 -3477
- package/debug/konva/src/PointerEvents.ts +0 -67
- package/debug/konva/src/Shape.ts +0 -2081
- package/debug/konva/src/Stage.ts +0 -1000
- package/debug/konva/src/Tween.ts +0 -811
- package/debug/konva/src/Util.ts +0 -1123
- package/debug/konva/src/Validators.ts +0 -210
- package/debug/konva/src/_CoreInternals.ts +0 -85
- package/debug/konva/src/_FullInternals.ts +0 -171
- package/debug/konva/src/canvas-backend.ts +0 -36
- package/debug/konva/src/filters/Blur.ts +0 -388
- package/debug/konva/src/filters/Brighten.ts +0 -48
- package/debug/konva/src/filters/Brightness.ts +0 -30
- package/debug/konva/src/filters/Contrast.ts +0 -75
- package/debug/konva/src/filters/Emboss.ts +0 -207
- package/debug/konva/src/filters/Enhance.ts +0 -154
- package/debug/konva/src/filters/Grayscale.ts +0 -25
- package/debug/konva/src/filters/HSL.ts +0 -108
- package/debug/konva/src/filters/HSV.ts +0 -106
- package/debug/konva/src/filters/Invert.ts +0 -23
- package/debug/konva/src/filters/Kaleidoscope.ts +0 -274
- package/debug/konva/src/filters/Mask.ts +0 -220
- package/debug/konva/src/filters/Noise.ts +0 -44
- package/debug/konva/src/filters/Pixelate.ts +0 -107
- package/debug/konva/src/filters/Posterize.ts +0 -46
- package/debug/konva/src/filters/RGB.ts +0 -82
- package/debug/konva/src/filters/RGBA.ts +0 -103
- package/debug/konva/src/filters/Sepia.ts +0 -27
- package/debug/konva/src/filters/Solarize.ts +0 -29
- package/debug/konva/src/filters/Threshold.ts +0 -44
- package/debug/konva/src/index.ts +0 -3
- package/debug/konva/src/shapes/Arc.ts +0 -176
- package/debug/konva/src/shapes/Arrow.ts +0 -231
- package/debug/konva/src/shapes/Circle.ts +0 -76
- package/debug/konva/src/shapes/Ellipse.ts +0 -121
- package/debug/konva/src/shapes/Image.ts +0 -319
- package/debug/konva/src/shapes/Label.ts +0 -386
- package/debug/konva/src/shapes/Line.ts +0 -364
- package/debug/konva/src/shapes/Path.ts +0 -1013
- package/debug/konva/src/shapes/Rect.ts +0 -79
- package/debug/konva/src/shapes/RegularPolygon.ts +0 -167
- package/debug/konva/src/shapes/Ring.ts +0 -94
- package/debug/konva/src/shapes/Sprite.ts +0 -370
- package/debug/konva/src/shapes/Star.ts +0 -125
- package/debug/konva/src/shapes/Text.ts +0 -1065
- package/debug/konva/src/shapes/TextPath.ts +0 -583
- package/debug/konva/src/shapes/Transformer.ts +0 -1889
- package/debug/konva/src/shapes/Wedge.ts +0 -129
- package/debug/konva/src/skia-backend.ts +0 -35
- package/debug/konva/src/types.ts +0 -84
- package/debug/konva/tsconfig.json +0 -31
- package/debug/konva/tsconfig.test.json +0 -7
|
@@ -1,207 +0,0 @@
|
|
|
1
|
-
import { Factory } from '../Factory.ts';
|
|
2
|
-
import type { Filter } from '../Node.ts';
|
|
3
|
-
import { Node } from '../Node.ts';
|
|
4
|
-
import { getNumberValidator } from '../Validators.ts';
|
|
5
|
-
/**
|
|
6
|
-
* Emboss Filter.
|
|
7
|
-
* @function
|
|
8
|
-
* @memberof Konva.Filters
|
|
9
|
-
* @param {Object} imageData
|
|
10
|
-
* @example
|
|
11
|
-
* node.cache();
|
|
12
|
-
* node.filters([Konva.Filters.Emboss]);
|
|
13
|
-
* node.embossStrength(0.8);
|
|
14
|
-
* node.embossWhiteLevel(0.3);
|
|
15
|
-
* node.embossDirection('right');
|
|
16
|
-
* node.embossBlend(true);
|
|
17
|
-
*/
|
|
18
|
-
export const Emboss: Filter = function (imageData) {
|
|
19
|
-
const data = imageData.data;
|
|
20
|
-
const w = imageData.width;
|
|
21
|
-
const h = imageData.height;
|
|
22
|
-
|
|
23
|
-
// Inputs from Konva node
|
|
24
|
-
const strength01 = Math.min(1, Math.max(0, this.embossStrength?.() ?? 0.5)); // [0..1]
|
|
25
|
-
const whiteLevel01 = Math.min(
|
|
26
|
-
1,
|
|
27
|
-
Math.max(0, this.embossWhiteLevel?.() ?? 0.5)
|
|
28
|
-
); // [0..1]
|
|
29
|
-
// Convert string direction to degrees
|
|
30
|
-
const directionMap = {
|
|
31
|
-
'top-left': 315,
|
|
32
|
-
top: 270,
|
|
33
|
-
'top-right': 225,
|
|
34
|
-
right: 180,
|
|
35
|
-
'bottom-right': 135,
|
|
36
|
-
bottom: 90,
|
|
37
|
-
'bottom-left': 45,
|
|
38
|
-
left: 0,
|
|
39
|
-
};
|
|
40
|
-
const directionDeg =
|
|
41
|
-
directionMap[this.embossDirection?.() ?? 'top-left'] ?? 315; // degrees
|
|
42
|
-
const blend = !!(this.embossBlend?.() ?? false);
|
|
43
|
-
|
|
44
|
-
// Internal mapping:
|
|
45
|
-
// - "strength" was 0..10; we honor your 0..1 API and scale accordingly.
|
|
46
|
-
// - Sobel directional response is roughly in [-1020..1020] for 8-bit luminance; scale to ~±128.
|
|
47
|
-
const strength = strength01 * 10;
|
|
48
|
-
const bias = whiteLevel01 * 255;
|
|
49
|
-
const dirRad = (directionDeg * Math.PI) / 180;
|
|
50
|
-
const cx = Math.cos(dirRad);
|
|
51
|
-
const cy = Math.sin(dirRad);
|
|
52
|
-
const SCALE = (128 / 1020) * strength; // ≈0.1255 * strength
|
|
53
|
-
|
|
54
|
-
// Precompute luminance (Rec.709)
|
|
55
|
-
const src = new Uint8ClampedArray(data); // snapshot
|
|
56
|
-
const lum = new Float32Array(w * h);
|
|
57
|
-
for (let p = 0, i = 0; i < data.length; i += 4, p++) {
|
|
58
|
-
lum[p] = 0.2126 * src[i] + 0.7152 * src[i + 1] + 0.0722 * src[i + 2];
|
|
59
|
-
}
|
|
60
|
-
|
|
61
|
-
// Sobel kernels (flattened)
|
|
62
|
-
const Gx = [-1, 0, 1, -2, 0, 2, -1, 0, 1];
|
|
63
|
-
const Gy = [-1, -2, -1, 0, 0, 0, 1, 2, 1];
|
|
64
|
-
|
|
65
|
-
// neighbor offsets around center pixel in lum space
|
|
66
|
-
const OFF = [-w - 1, -w, -w + 1, -1, 0, 1, w - 1, w, w + 1];
|
|
67
|
-
|
|
68
|
-
// Helpers
|
|
69
|
-
const clamp8 = (v) => (v < 0 ? 0 : v > 255 ? 255 : v);
|
|
70
|
-
|
|
71
|
-
// Process: leave a 1px border unchanged (faster/cleaner)
|
|
72
|
-
for (let y = 1; y < h - 1; y++) {
|
|
73
|
-
for (let x = 1; x < w - 1; x++) {
|
|
74
|
-
const p = y * w + x;
|
|
75
|
-
|
|
76
|
-
// Directional derivative = (cosθ * Gx + sinθ * Gy) • neighborhood(lum)
|
|
77
|
-
let sx = 0,
|
|
78
|
-
sy = 0;
|
|
79
|
-
// unroll loop for speed
|
|
80
|
-
sx += lum[p + OFF[0]] * Gx[0];
|
|
81
|
-
sy += lum[p + OFF[0]] * Gy[0];
|
|
82
|
-
sx += lum[p + OFF[1]] * Gx[1];
|
|
83
|
-
sy += lum[p + OFF[1]] * Gy[1];
|
|
84
|
-
sx += lum[p + OFF[2]] * Gx[2];
|
|
85
|
-
sy += lum[p + OFF[2]] * Gy[2];
|
|
86
|
-
sx += lum[p + OFF[3]] * Gx[3];
|
|
87
|
-
sy += lum[p + OFF[3]] * Gy[3];
|
|
88
|
-
// center has 0 weights in both Sobel masks; can skip if desired
|
|
89
|
-
sx += lum[p + OFF[5]] * Gx[5];
|
|
90
|
-
sy += lum[p + OFF[5]] * Gy[5];
|
|
91
|
-
sx += lum[p + OFF[6]] * Gx[6];
|
|
92
|
-
sy += lum[p + OFF[6]] * Gy[6];
|
|
93
|
-
sx += lum[p + OFF[7]] * Gx[7];
|
|
94
|
-
sy += lum[p + OFF[7]] * Gy[7];
|
|
95
|
-
sx += lum[p + OFF[8]] * Gx[8];
|
|
96
|
-
sy += lum[p + OFF[8]] * Gy[8];
|
|
97
|
-
|
|
98
|
-
const r = cx * sx + cy * sy; // directional response
|
|
99
|
-
const outGray = clamp8(bias + r * SCALE); // biased, scaled, clamped
|
|
100
|
-
|
|
101
|
-
const o = p * 4;
|
|
102
|
-
if (blend) {
|
|
103
|
-
// Add the emboss "relief" around chosen bias to original RGB
|
|
104
|
-
const delta = outGray - bias; // symmetric around whiteLevel
|
|
105
|
-
data[o] = clamp8(src[o] + delta);
|
|
106
|
-
data[o + 1] = clamp8(src[o + 1] + delta);
|
|
107
|
-
data[o + 2] = clamp8(src[o + 2] + delta);
|
|
108
|
-
data[o + 3] = src[o + 3];
|
|
109
|
-
} else {
|
|
110
|
-
// Grayscale embossed output
|
|
111
|
-
data[o] = data[o + 1] = data[o + 2] = outGray;
|
|
112
|
-
data[o + 3] = src[o + 3];
|
|
113
|
-
}
|
|
114
|
-
}
|
|
115
|
-
}
|
|
116
|
-
|
|
117
|
-
// Copy border (untouched) to keep edges clean
|
|
118
|
-
// top & bottom rows
|
|
119
|
-
for (let x = 0; x < w; x++) {
|
|
120
|
-
let oTop = x * 4,
|
|
121
|
-
oBot = ((h - 1) * w + x) * 4;
|
|
122
|
-
data[oTop] = src[oTop];
|
|
123
|
-
data[oTop + 1] = src[oTop + 1];
|
|
124
|
-
data[oTop + 2] = src[oTop + 2];
|
|
125
|
-
data[oTop + 3] = src[oTop + 3];
|
|
126
|
-
data[oBot] = src[oBot];
|
|
127
|
-
data[oBot + 1] = src[oBot + 1];
|
|
128
|
-
data[oBot + 2] = src[oBot + 2];
|
|
129
|
-
data[oBot + 3] = src[oBot + 3];
|
|
130
|
-
}
|
|
131
|
-
// left & right columns
|
|
132
|
-
for (let y = 1; y < h - 1; y++) {
|
|
133
|
-
let oL = y * w * 4,
|
|
134
|
-
oR = (y * w + (w - 1)) * 4;
|
|
135
|
-
data[oL] = src[oL];
|
|
136
|
-
data[oL + 1] = src[oL + 1];
|
|
137
|
-
data[oL + 2] = src[oL + 2];
|
|
138
|
-
data[oL + 3] = src[oL + 3];
|
|
139
|
-
data[oR] = src[oR];
|
|
140
|
-
data[oR + 1] = src[oR + 1];
|
|
141
|
-
data[oR + 2] = src[oR + 2];
|
|
142
|
-
data[oR + 3] = src[oR + 3];
|
|
143
|
-
}
|
|
144
|
-
|
|
145
|
-
return imageData;
|
|
146
|
-
};
|
|
147
|
-
|
|
148
|
-
Factory.addGetterSetter(
|
|
149
|
-
Node,
|
|
150
|
-
'embossStrength',
|
|
151
|
-
0.5,
|
|
152
|
-
getNumberValidator(),
|
|
153
|
-
Factory.afterSetFilter
|
|
154
|
-
);
|
|
155
|
-
/**
|
|
156
|
-
* get/set emboss strength. Use with {@link Konva.Filters.Emboss} filter.
|
|
157
|
-
* @name Konva.Node#embossStrength
|
|
158
|
-
* @method
|
|
159
|
-
* @param {Number} level between 0 and 1. Default is 0.5
|
|
160
|
-
* @returns {Number}
|
|
161
|
-
*/
|
|
162
|
-
|
|
163
|
-
Factory.addGetterSetter(
|
|
164
|
-
Node,
|
|
165
|
-
'embossWhiteLevel',
|
|
166
|
-
0.5,
|
|
167
|
-
getNumberValidator(),
|
|
168
|
-
Factory.afterSetFilter
|
|
169
|
-
);
|
|
170
|
-
/**
|
|
171
|
-
* get/set emboss white level. Use with {@link Konva.Filters.Emboss} filter.
|
|
172
|
-
* @name Konva.Node#embossWhiteLevel
|
|
173
|
-
* @method
|
|
174
|
-
* @param {Number} embossWhiteLevel between 0 and 1. Default is 0.5
|
|
175
|
-
* @returns {Number}
|
|
176
|
-
*/
|
|
177
|
-
|
|
178
|
-
Factory.addGetterSetter(
|
|
179
|
-
Node,
|
|
180
|
-
'embossDirection',
|
|
181
|
-
'top-left',
|
|
182
|
-
undefined,
|
|
183
|
-
Factory.afterSetFilter
|
|
184
|
-
);
|
|
185
|
-
/**
|
|
186
|
-
* get/set emboss direction. Use with {@link Konva.Filters.Emboss} filter.
|
|
187
|
-
* @name Konva.Node#embossDirection
|
|
188
|
-
* @method
|
|
189
|
-
* @param {String} embossDirection can be top-left, top, top-right, right, bottom-right, bottom, bottom-left or left
|
|
190
|
-
* The default is top-left
|
|
191
|
-
* @returns {String}
|
|
192
|
-
*/
|
|
193
|
-
|
|
194
|
-
Factory.addGetterSetter(
|
|
195
|
-
Node,
|
|
196
|
-
'embossBlend',
|
|
197
|
-
false,
|
|
198
|
-
undefined,
|
|
199
|
-
Factory.afterSetFilter
|
|
200
|
-
);
|
|
201
|
-
/**
|
|
202
|
-
* get/set emboss blend. Use with {@link Konva.Filters.Emboss} filter.
|
|
203
|
-
* @name Konva.Node#embossBlend
|
|
204
|
-
* @method
|
|
205
|
-
* @param {Boolean} embossBlend
|
|
206
|
-
* @returns {Boolean}
|
|
207
|
-
*/
|
|
@@ -1,154 +0,0 @@
|
|
|
1
|
-
import { Factory } from '../Factory.ts';
|
|
2
|
-
import type { Filter } from '../Node.ts';
|
|
3
|
-
import { Node } from '../Node.ts';
|
|
4
|
-
import { getNumberValidator } from '../Validators.ts';
|
|
5
|
-
|
|
6
|
-
function remap(
|
|
7
|
-
fromValue: number,
|
|
8
|
-
fromMin: number,
|
|
9
|
-
fromMax: number,
|
|
10
|
-
toMin: number,
|
|
11
|
-
toMax: number
|
|
12
|
-
) {
|
|
13
|
-
// Compute the range of the data
|
|
14
|
-
const fromRange = fromMax - fromMin,
|
|
15
|
-
toRange = toMax - toMin;
|
|
16
|
-
|
|
17
|
-
// If either range is 0, then the value can only be mapped to 1 value
|
|
18
|
-
if (fromRange === 0) {
|
|
19
|
-
return toMin + toRange / 2;
|
|
20
|
-
}
|
|
21
|
-
if (toRange === 0) {
|
|
22
|
-
return toMin;
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
// (1) untranslate, (2) unscale, (3) rescale, (4) retranslate
|
|
26
|
-
let toValue = (fromValue - fromMin) / fromRange;
|
|
27
|
-
toValue = toRange * toValue + toMin;
|
|
28
|
-
|
|
29
|
-
return toValue;
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
/**
|
|
33
|
-
* Enhance Filter. Adjusts the colors so that they span the widest
|
|
34
|
-
* possible range (ie 0-255). Performs w*h pixel reads and w*h pixel
|
|
35
|
-
* writes.
|
|
36
|
-
* @function
|
|
37
|
-
* @name Enhance
|
|
38
|
-
* @memberof Konva.Filters
|
|
39
|
-
* @param {Object} imageData
|
|
40
|
-
* @author ippo615
|
|
41
|
-
* @example
|
|
42
|
-
* node.cache();
|
|
43
|
-
* node.filters([Konva.Filters.Enhance]);
|
|
44
|
-
* node.enhance(0.4);
|
|
45
|
-
*/
|
|
46
|
-
export const Enhance: Filter = function (imageData) {
|
|
47
|
-
const data = imageData.data,
|
|
48
|
-
nSubPixels = data.length;
|
|
49
|
-
let rMin = data[0],
|
|
50
|
-
rMax = rMin,
|
|
51
|
-
r,
|
|
52
|
-
gMin = data[1],
|
|
53
|
-
gMax = gMin,
|
|
54
|
-
g,
|
|
55
|
-
bMin = data[2],
|
|
56
|
-
bMax = bMin,
|
|
57
|
-
b;
|
|
58
|
-
|
|
59
|
-
// If we are not enhancing anything - don't do any computation
|
|
60
|
-
const enhanceAmount = this.enhance();
|
|
61
|
-
if (enhanceAmount === 0) {
|
|
62
|
-
return;
|
|
63
|
-
}
|
|
64
|
-
|
|
65
|
-
// 1st Pass - find the min and max for each channel:
|
|
66
|
-
for (let i = 0; i < nSubPixels; i += 4) {
|
|
67
|
-
r = data[i + 0];
|
|
68
|
-
if (r < rMin) {
|
|
69
|
-
rMin = r;
|
|
70
|
-
} else if (r > rMax) {
|
|
71
|
-
rMax = r;
|
|
72
|
-
}
|
|
73
|
-
g = data[i + 1];
|
|
74
|
-
if (g < gMin) {
|
|
75
|
-
gMin = g;
|
|
76
|
-
} else if (g > gMax) {
|
|
77
|
-
gMax = g;
|
|
78
|
-
}
|
|
79
|
-
b = data[i + 2];
|
|
80
|
-
if (b < bMin) {
|
|
81
|
-
bMin = b;
|
|
82
|
-
} else if (b > bMax) {
|
|
83
|
-
bMax = b;
|
|
84
|
-
}
|
|
85
|
-
//a = data[i + 3];
|
|
86
|
-
//if (a < aMin) { aMin = a; } else
|
|
87
|
-
//if (a > aMax) { aMax = a; }
|
|
88
|
-
}
|
|
89
|
-
|
|
90
|
-
// If there is only 1 level - don't remap
|
|
91
|
-
if (rMax === rMin) {
|
|
92
|
-
rMax = 255;
|
|
93
|
-
rMin = 0;
|
|
94
|
-
}
|
|
95
|
-
if (gMax === gMin) {
|
|
96
|
-
gMax = 255;
|
|
97
|
-
gMin = 0;
|
|
98
|
-
}
|
|
99
|
-
if (bMax === bMin) {
|
|
100
|
-
bMax = 255;
|
|
101
|
-
bMin = 0;
|
|
102
|
-
}
|
|
103
|
-
|
|
104
|
-
let rGoalMax: number,
|
|
105
|
-
rGoalMin: number,
|
|
106
|
-
gGoalMax: number,
|
|
107
|
-
gGoalMin: number,
|
|
108
|
-
bGoalMax: number,
|
|
109
|
-
bGoalMin: number;
|
|
110
|
-
|
|
111
|
-
// If the enhancement is positive - stretch the histogram
|
|
112
|
-
if (enhanceAmount > 0) {
|
|
113
|
-
rGoalMax = rMax + enhanceAmount * (255 - rMax);
|
|
114
|
-
rGoalMin = rMin - enhanceAmount * (rMin - 0);
|
|
115
|
-
gGoalMax = gMax + enhanceAmount * (255 - gMax);
|
|
116
|
-
gGoalMin = gMin - enhanceAmount * (gMin - 0);
|
|
117
|
-
bGoalMax = bMax + enhanceAmount * (255 - bMax);
|
|
118
|
-
bGoalMin = bMin - enhanceAmount * (bMin - 0);
|
|
119
|
-
// If the enhancement is negative - compress the histogram
|
|
120
|
-
} else {
|
|
121
|
-
const rMid = (rMax + rMin) * 0.5;
|
|
122
|
-
rGoalMax = rMax + enhanceAmount * (rMax - rMid);
|
|
123
|
-
rGoalMin = rMin + enhanceAmount * (rMin - rMid);
|
|
124
|
-
const gMid = (gMax + gMin) * 0.5;
|
|
125
|
-
gGoalMax = gMax + enhanceAmount * (gMax - gMid);
|
|
126
|
-
gGoalMin = gMin + enhanceAmount * (gMin - gMid);
|
|
127
|
-
const bMid = (bMax + bMin) * 0.5;
|
|
128
|
-
bGoalMax = bMax + enhanceAmount * (bMax - bMid);
|
|
129
|
-
bGoalMin = bMin + enhanceAmount * (bMin - bMid);
|
|
130
|
-
}
|
|
131
|
-
|
|
132
|
-
// Pass 2 - remap everything, except the alpha
|
|
133
|
-
for (let i = 0; i < nSubPixels; i += 4) {
|
|
134
|
-
data[i + 0] = remap(data[i + 0], rMin, rMax, rGoalMin, rGoalMax);
|
|
135
|
-
data[i + 1] = remap(data[i + 1], gMin, gMax, gGoalMin, gGoalMax);
|
|
136
|
-
data[i + 2] = remap(data[i + 2], bMin, bMax, bGoalMin, bGoalMax);
|
|
137
|
-
//data[i + 3] = remap(data[i + 3], aMin, aMax, aGoalMin, aGoalMax);
|
|
138
|
-
}
|
|
139
|
-
};
|
|
140
|
-
|
|
141
|
-
/**
|
|
142
|
-
* get/set enhance. Use with {@link Konva.Filters.Enhance} filter. -1 to 1 values
|
|
143
|
-
* @name Konva.Node#enhance
|
|
144
|
-
* @method
|
|
145
|
-
* @param {Float} amount
|
|
146
|
-
* @returns {Float}
|
|
147
|
-
*/
|
|
148
|
-
Factory.addGetterSetter(
|
|
149
|
-
Node,
|
|
150
|
-
'enhance',
|
|
151
|
-
0,
|
|
152
|
-
getNumberValidator(),
|
|
153
|
-
Factory.afterSetFilter
|
|
154
|
-
);
|
|
@@ -1,25 +0,0 @@
|
|
|
1
|
-
import type { Filter } from '../Node.ts';
|
|
2
|
-
|
|
3
|
-
/**
|
|
4
|
-
* Grayscale Filter
|
|
5
|
-
* @function
|
|
6
|
-
* @memberof Konva.Filters
|
|
7
|
-
* @param {Object} imageData
|
|
8
|
-
* @example
|
|
9
|
-
* node.cache();
|
|
10
|
-
* node.filters([Konva.Filters.Grayscale]);
|
|
11
|
-
*/
|
|
12
|
-
export const Grayscale: Filter = function (imageData) {
|
|
13
|
-
const data = imageData.data,
|
|
14
|
-
len = data.length;
|
|
15
|
-
|
|
16
|
-
for (let i = 0; i < len; i += 4) {
|
|
17
|
-
const brightness = 0.34 * data[i] + 0.5 * data[i + 1] + 0.16 * data[i + 2];
|
|
18
|
-
// red
|
|
19
|
-
data[i] = brightness;
|
|
20
|
-
// green
|
|
21
|
-
data[i + 1] = brightness;
|
|
22
|
-
// blue
|
|
23
|
-
data[i + 2] = brightness;
|
|
24
|
-
}
|
|
25
|
-
};
|
|
@@ -1,108 +0,0 @@
|
|
|
1
|
-
import { Factory } from '../Factory.ts';
|
|
2
|
-
import type { Filter } from '../Node.ts';
|
|
3
|
-
import { Node } from '../Node.ts';
|
|
4
|
-
import { getNumberValidator } from '../Validators.ts';
|
|
5
|
-
|
|
6
|
-
Factory.addGetterSetter(
|
|
7
|
-
Node,
|
|
8
|
-
'hue',
|
|
9
|
-
0,
|
|
10
|
-
getNumberValidator(),
|
|
11
|
-
Factory.afterSetFilter
|
|
12
|
-
);
|
|
13
|
-
/**
|
|
14
|
-
* get/set hsv hue in degrees. Use with {@link Konva.Filters.HSV} or {@link Konva.Filters.HSL} filter.
|
|
15
|
-
* @name Konva.Node#hue
|
|
16
|
-
* @method
|
|
17
|
-
* @param {Number} hue value between 0 and 359
|
|
18
|
-
* @returns {Number}
|
|
19
|
-
*/
|
|
20
|
-
|
|
21
|
-
Factory.addGetterSetter(
|
|
22
|
-
Node,
|
|
23
|
-
'saturation',
|
|
24
|
-
0,
|
|
25
|
-
getNumberValidator(),
|
|
26
|
-
Factory.afterSetFilter
|
|
27
|
-
);
|
|
28
|
-
/**
|
|
29
|
-
* get/set hsv saturation. Use with {@link Konva.Filters.HSV} or {@link Konva.Filters.HSL} filter.
|
|
30
|
-
* @name Konva.Node#saturation
|
|
31
|
-
* @method
|
|
32
|
-
* @param {Number} saturation 0 is no change, -1.0 halves the saturation, 1.0 doubles, etc..
|
|
33
|
-
* @returns {Number}
|
|
34
|
-
*/
|
|
35
|
-
|
|
36
|
-
Factory.addGetterSetter(
|
|
37
|
-
Node,
|
|
38
|
-
'luminance',
|
|
39
|
-
0,
|
|
40
|
-
getNumberValidator(),
|
|
41
|
-
Factory.afterSetFilter
|
|
42
|
-
);
|
|
43
|
-
/**
|
|
44
|
-
* get/set hsl luminance. Use with {@link Konva.Filters.HSL} filter.
|
|
45
|
-
* @name Konva.Node#luminance
|
|
46
|
-
* @method
|
|
47
|
-
* @param {Number} value from -1 to 1
|
|
48
|
-
* @returns {Number}
|
|
49
|
-
*/
|
|
50
|
-
|
|
51
|
-
/**
|
|
52
|
-
* HSL Filter. Adjusts the hue, saturation and luminance (or lightness)
|
|
53
|
-
* @function
|
|
54
|
-
* @memberof Konva.Filters
|
|
55
|
-
* @param {Object} imageData
|
|
56
|
-
* @author ippo615
|
|
57
|
-
* @example
|
|
58
|
-
* image.filters([Konva.Filters.HSL]);
|
|
59
|
-
* image.luminance(0.2);
|
|
60
|
-
*/
|
|
61
|
-
|
|
62
|
-
export const HSL: Filter = function (imageData) {
|
|
63
|
-
const data = imageData.data,
|
|
64
|
-
nPixels = data.length,
|
|
65
|
-
v = 1,
|
|
66
|
-
s = Math.pow(2, this.saturation()),
|
|
67
|
-
h = Math.abs(this.hue() + 360) % 360,
|
|
68
|
-
l = this.luminance() * 127;
|
|
69
|
-
|
|
70
|
-
// Basis for the technique used:
|
|
71
|
-
// http://beesbuzz.biz/code/hsv_color_transforms.php
|
|
72
|
-
// V is the value multiplier (1 for none, 2 for double, 0.5 for half)
|
|
73
|
-
// S is the saturation multiplier (1 for none, 2 for double, 0.5 for half)
|
|
74
|
-
// H is the hue shift in degrees (0 to 360)
|
|
75
|
-
// vsu = V*S*cos(H*PI/180);
|
|
76
|
-
// vsw = V*S*sin(H*PI/180);
|
|
77
|
-
//[ .299V+.701vsu+.168vsw .587V-.587vsu+.330vsw .114V-.114vsu-.497vsw ] [R]
|
|
78
|
-
//[ .299V-.299vsu-.328vsw .587V+.413vsu+.035vsw .114V-.114vsu+.292vsw ]*[G]
|
|
79
|
-
//[ .299V-.300vsu+1.25vsw .587V-.588vsu-1.05vsw .114V+.886vsu-.203vsw ] [B]
|
|
80
|
-
|
|
81
|
-
// Precompute the values in the matrix:
|
|
82
|
-
const vsu = v * s * Math.cos((h * Math.PI) / 180),
|
|
83
|
-
vsw = v * s * Math.sin((h * Math.PI) / 180);
|
|
84
|
-
// (result spot)(source spot)
|
|
85
|
-
const rr = 0.299 * v + 0.701 * vsu + 0.167 * vsw,
|
|
86
|
-
rg = 0.587 * v - 0.587 * vsu + 0.33 * vsw,
|
|
87
|
-
rb = 0.114 * v - 0.114 * vsu - 0.497 * vsw;
|
|
88
|
-
const gr = 0.299 * v - 0.299 * vsu - 0.328 * vsw,
|
|
89
|
-
gg = 0.587 * v + 0.413 * vsu + 0.035 * vsw,
|
|
90
|
-
gb = 0.114 * v - 0.114 * vsu + 0.293 * vsw;
|
|
91
|
-
const br = 0.299 * v - 0.3 * vsu + 1.25 * vsw,
|
|
92
|
-
bg = 0.587 * v - 0.586 * vsu - 1.05 * vsw,
|
|
93
|
-
bb = 0.114 * v + 0.886 * vsu - 0.2 * vsw;
|
|
94
|
-
|
|
95
|
-
let r: number, g: number, b: number, a: number;
|
|
96
|
-
|
|
97
|
-
for (let i = 0; i < nPixels; i += 4) {
|
|
98
|
-
r = data[i + 0];
|
|
99
|
-
g = data[i + 1];
|
|
100
|
-
b = data[i + 2];
|
|
101
|
-
a = data[i + 3];
|
|
102
|
-
|
|
103
|
-
data[i + 0] = rr * r + rg * g + rb * b + l;
|
|
104
|
-
data[i + 1] = gr * r + gg * g + gb * b + l;
|
|
105
|
-
data[i + 2] = br * r + bg * g + bb * b + l;
|
|
106
|
-
data[i + 3] = a; // alpha
|
|
107
|
-
}
|
|
108
|
-
};
|
|
@@ -1,106 +0,0 @@
|
|
|
1
|
-
import { Factory } from '../Factory.ts';
|
|
2
|
-
import type { Filter } from '../Node.ts';
|
|
3
|
-
import { Node } from '../Node.ts';
|
|
4
|
-
import { getNumberValidator } from '../Validators.ts';
|
|
5
|
-
|
|
6
|
-
/**
|
|
7
|
-
* HSV Filter. Adjusts the hue, saturation and value
|
|
8
|
-
* @function
|
|
9
|
-
* @name HSV
|
|
10
|
-
* @memberof Konva.Filters
|
|
11
|
-
* @param {Object} imageData
|
|
12
|
-
* @author ippo615
|
|
13
|
-
* @example
|
|
14
|
-
* image.filters([Konva.Filters.HSV]);
|
|
15
|
-
* image.value(200);
|
|
16
|
-
*/
|
|
17
|
-
|
|
18
|
-
export const HSV: Filter = function (imageData) {
|
|
19
|
-
const data = imageData.data,
|
|
20
|
-
nPixels = data.length,
|
|
21
|
-
v = Math.pow(2, this.value()),
|
|
22
|
-
s = Math.pow(2, this.saturation()),
|
|
23
|
-
h = Math.abs(this.hue() + 360) % 360;
|
|
24
|
-
|
|
25
|
-
// Basis for the technique used:
|
|
26
|
-
// http://beesbuzz.biz/code/hsv_color_transforms.php
|
|
27
|
-
// V is the value multiplier (1 for none, 2 for double, 0.5 for half)
|
|
28
|
-
// S is the saturation multiplier (1 for none, 2 for double, 0.5 for half)
|
|
29
|
-
// H is the hue shift in degrees (0 to 360)
|
|
30
|
-
// vsu = V*S*cos(H*PI/180);
|
|
31
|
-
// vsw = V*S*sin(H*PI/180);
|
|
32
|
-
//[ .299V+.701vsu+.168vsw .587V-.587vsu+.330vsw .114V-.114vsu-.497vsw ] [R]
|
|
33
|
-
//[ .299V-.299vsu-.328vsw .587V+.413vsu+.035vsw .114V-.114vsu+.292vsw ]*[G]
|
|
34
|
-
//[ .299V-.300vsu+1.25vsw .587V-.588vsu-1.05vsw .114V+.886vsu-.203vsw ] [B]
|
|
35
|
-
|
|
36
|
-
// Precompute the values in the matrix:
|
|
37
|
-
const vsu = v * s * Math.cos((h * Math.PI) / 180),
|
|
38
|
-
vsw = v * s * Math.sin((h * Math.PI) / 180);
|
|
39
|
-
// (result spot)(source spot)
|
|
40
|
-
const rr = 0.299 * v + 0.701 * vsu + 0.167 * vsw,
|
|
41
|
-
rg = 0.587 * v - 0.587 * vsu + 0.33 * vsw,
|
|
42
|
-
rb = 0.114 * v - 0.114 * vsu - 0.497 * vsw;
|
|
43
|
-
const gr = 0.299 * v - 0.299 * vsu - 0.328 * vsw,
|
|
44
|
-
gg = 0.587 * v + 0.413 * vsu + 0.035 * vsw,
|
|
45
|
-
gb = 0.114 * v - 0.114 * vsu + 0.293 * vsw;
|
|
46
|
-
const br = 0.299 * v - 0.3 * vsu + 1.25 * vsw,
|
|
47
|
-
bg = 0.587 * v - 0.586 * vsu - 1.05 * vsw,
|
|
48
|
-
bb = 0.114 * v + 0.886 * vsu - 0.2 * vsw;
|
|
49
|
-
|
|
50
|
-
for (let i = 0; i < nPixels; i += 4) {
|
|
51
|
-
const r = data[i + 0];
|
|
52
|
-
const g = data[i + 1];
|
|
53
|
-
const b = data[i + 2];
|
|
54
|
-
const a = data[i + 3];
|
|
55
|
-
|
|
56
|
-
data[i + 0] = rr * r + rg * g + rb * b;
|
|
57
|
-
data[i + 1] = gr * r + gg * g + gb * b;
|
|
58
|
-
data[i + 2] = br * r + bg * g + bb * b;
|
|
59
|
-
data[i + 3] = a; // alpha
|
|
60
|
-
}
|
|
61
|
-
};
|
|
62
|
-
|
|
63
|
-
Factory.addGetterSetter(
|
|
64
|
-
Node,
|
|
65
|
-
'hue',
|
|
66
|
-
0,
|
|
67
|
-
getNumberValidator(),
|
|
68
|
-
Factory.afterSetFilter
|
|
69
|
-
);
|
|
70
|
-
/**
|
|
71
|
-
* get/set hsv hue in degrees. Use with {@link Konva.Filters.HSV} or {@link Konva.Filters.HSL} filter.
|
|
72
|
-
* @name Konva.Node#hue
|
|
73
|
-
* @method
|
|
74
|
-
* @param {Number} hue value between 0 and 359
|
|
75
|
-
* @returns {Number}
|
|
76
|
-
*/
|
|
77
|
-
|
|
78
|
-
Factory.addGetterSetter(
|
|
79
|
-
Node,
|
|
80
|
-
'saturation',
|
|
81
|
-
0,
|
|
82
|
-
getNumberValidator(),
|
|
83
|
-
Factory.afterSetFilter
|
|
84
|
-
);
|
|
85
|
-
/**
|
|
86
|
-
* get/set hsv saturation. Use with {@link Konva.Filters.HSV} or {@link Konva.Filters.HSL} filter.
|
|
87
|
-
* @name Konva.Node#saturation
|
|
88
|
-
* @method
|
|
89
|
-
* @param {Number} saturation 0 is no change, -1.0 halves the saturation, 1.0 doubles, etc..
|
|
90
|
-
* @returns {Number}
|
|
91
|
-
*/
|
|
92
|
-
|
|
93
|
-
Factory.addGetterSetter(
|
|
94
|
-
Node,
|
|
95
|
-
'value',
|
|
96
|
-
0,
|
|
97
|
-
getNumberValidator(),
|
|
98
|
-
Factory.afterSetFilter
|
|
99
|
-
);
|
|
100
|
-
/**
|
|
101
|
-
* get/set hsv value. Use with {@link Konva.Filters.HSV} filter.
|
|
102
|
-
* @name Konva.Node#value
|
|
103
|
-
* @method
|
|
104
|
-
* @param {Number} value 0 is no change, -1.0 halves the value, 1.0 doubles, etc..
|
|
105
|
-
* @returns {Number}
|
|
106
|
-
*/
|
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
import type { Filter } from '../Node.ts';
|
|
2
|
-
/**
|
|
3
|
-
* Invert Filter
|
|
4
|
-
* @function
|
|
5
|
-
* @memberof Konva.Filters
|
|
6
|
-
* @param {Object} imageData
|
|
7
|
-
* @example
|
|
8
|
-
* node.cache();
|
|
9
|
-
* node.filters([Konva.Filters.Invert]);
|
|
10
|
-
*/
|
|
11
|
-
export const Invert: Filter = function (imageData) {
|
|
12
|
-
const data = imageData.data,
|
|
13
|
-
len = data.length;
|
|
14
|
-
|
|
15
|
-
for (let i = 0; i < len; i += 4) {
|
|
16
|
-
// red
|
|
17
|
-
data[i] = 255 - data[i];
|
|
18
|
-
// green
|
|
19
|
-
data[i + 1] = 255 - data[i + 1];
|
|
20
|
-
// blue
|
|
21
|
-
data[i + 2] = 255 - data[i + 2];
|
|
22
|
-
}
|
|
23
|
-
};
|