|
1
|
|
|
/** global: google */ |
|
2
|
|
|
import { IconObject } from "./icon_object.js"; |
|
3
|
|
|
|
|
4
|
|
|
import { getColors } from "./parsers.js"; |
|
5
|
|
View Code Duplication |
const generateGroupedCanvas = function(options) { |
|
|
|
|
|
|
6
|
|
|
let text_x, |
|
7
|
|
|
canvas = options.canvas || document.createElement("canvas"), |
|
8
|
|
|
context = canvas.getContext("2d"), |
|
9
|
|
|
font = options.font || "fontello", |
|
10
|
|
|
fontsize = options.fontsize || 26; |
|
11
|
|
|
|
|
12
|
|
|
canvas.width = 54; |
|
13
|
|
|
canvas.height = 48; |
|
14
|
|
|
context.clearRect(0, 0, canvas.width, canvas.height); |
|
15
|
|
|
|
|
16
|
|
|
let colors = getColors(options), |
|
17
|
|
|
color0 = colors[0]; |
|
18
|
|
|
context.beginPath(); |
|
19
|
|
|
|
|
20
|
|
|
context.font = "normal normal normal " + fontsize + "px " + font; |
|
21
|
|
|
|
|
22
|
|
|
context.textBaseline = "top"; |
|
23
|
|
|
let textWidth = context.measureText(options.unicodelabel); |
|
24
|
|
|
text_x = Math.floor(canvas.width / 2 - textWidth.width / 2); |
|
25
|
|
|
|
|
26
|
|
|
context.shadowOffsetX = -2; |
|
27
|
|
|
context.shadowOffsetY = -2; |
|
28
|
|
|
context.shadowBlur = 0; |
|
29
|
|
|
|
|
30
|
|
|
context.fillStyle = "#FFFFFF"; |
|
31
|
|
|
context.shadowColor = "#666666"; |
|
32
|
|
|
|
|
33
|
|
|
context.fillText(options.unicodelabel, text_x - 4, 2); |
|
34
|
|
|
context.fillText(options.unicodelabel, text_x, 5); |
|
35
|
|
|
context.fillStyle = color0; |
|
36
|
|
|
context.fillText(options.unicodelabel, text_x + 4, 8); |
|
37
|
|
|
|
|
38
|
|
|
context.strokeStyle = "#FFFFFF"; |
|
39
|
|
|
context.strokeText(options.unicodelabel, text_x + 4, 8); |
|
40
|
|
|
|
|
41
|
|
|
canvas.fillColor = color0; |
|
42
|
|
|
|
|
43
|
|
|
return canvas; |
|
44
|
|
|
}; |
|
45
|
|
|
|
|
46
|
|
|
export function createGroupedIcon(theoptions) { |
|
47
|
|
|
theoptions.scale = theoptions.scale || 1; |
|
48
|
|
|
theoptions.fontsize = theoptions.fontsize || 26; |
|
49
|
|
|
|
|
50
|
|
|
let markerCanvas = generateGroupedCanvas(theoptions), |
|
51
|
|
|
markerOpts = {}; |
|
52
|
|
|
|
|
53
|
|
|
let scale = theoptions.scale; |
|
54
|
|
|
|
|
55
|
|
|
theoptions.type = "transparent"; |
|
56
|
|
|
|
|
57
|
|
|
Object.assign(markerOpts, theoptions); |
|
58
|
|
|
|
|
59
|
|
|
Object.assign(markerOpts, { |
|
60
|
|
|
origin: { x: 0, y: 0 }, |
|
61
|
|
|
anchor: { x: 27 * scale, y: 24 * scale }, |
|
62
|
|
|
size: { width: 54, height: 48 }, |
|
63
|
|
|
scaledSize: { width: 54 * scale, height: 48 * scale } |
|
64
|
|
|
}); |
|
65
|
|
|
|
|
66
|
|
|
let url = markerCanvas.toDataURL(), |
|
67
|
|
|
fillColor = markerCanvas.fillColor, |
|
68
|
|
|
iconObj = new IconObject(url, fillColor, markerOpts); |
|
69
|
|
|
|
|
70
|
|
|
return iconObj; |
|
71
|
|
|
} |
|
72
|
|
|
|