forked from rezoner/CanvasQuery
/
blending.dart
70 lines (64 loc) · 2.19 KB
/
blending.dart
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
part of examples;
void blending(DivElement parent) {
ImageElement below, above;
int count = 0;
loadImages(['below.png', 'above.png']).then((images) {
below = images[0];
above = images[1];
InputElement mixSlider = querySelector("#mix");
blendAll(mixSlider, below, above, parent);
mixSlider.onChange.listen((_) {
parent.querySelectorAll("canvas").forEach((canvas) => canvas.remove());
blendAll(mixSlider, below, above, parent);
});
});
}
void blendAll(InputElement mixSlider, ImageElement below, ImageElement above, DivElement parent) {
mixSlider.disabled = true;
double mix = double.parse(mixSlider.value);
for (String functionName in blendFunction.keys) {
exampleBlend(below, above, functionName, mix, parent);
}
for (String functionName in specialBlendFunction.keys) {
exampleBlendSpecial(below, above, functionName, mix, parent);
}
mixSlider.disabled = false;
}
void exampleBlend(below, above, String functionName, num mix, DivElement parent) {
var function = blendFunction[functionName];
cq(below)..blend(above, function, mix)
..appendTo(parent)
..canvas.title = '.blend(above, Blend.$functionName, $mix);'
..canvas.classes.add('example');
}
void exampleBlendSpecial(below, above, String functionName, num mix, DivElement parent) {
var function = specialBlendFunction[functionName];
cq(below)..blendSpecial(above, function, mix)
..appendTo(parent)
..canvas.title = '.blendSpecial(above, Blend.$functionName, $mix);'
..canvas.classes.add('example');
}
var blendFunction = {
'normal':Blend.normal,
'overlay': Blend.overlay,
'hardLight': Blend.hardLight,
'softLight': Blend.softLight,
'dodge': Blend.dodge,
'burn': Blend.burn,
'multiply': Blend.multiply,
'divide': Blend.divide,
'screen': Blend.screen,
'grainExtract': Blend.grainExtract,
'grainMerge': Blend.grainMerge,
'difference': Blend.difference,
'addition': Blend.addition,
'substract': Blend.substract,
'darkenOnly': Blend.darkenOnly,
'lightenOnly': Blend.lightenOnly
};
var specialBlendFunction = {
'color': Blend.color,
'hue': Blend.hue,
'value': Blend.value,
'saturation': Blend.saturation
};