-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathselect.html
162 lines (133 loc) · 4.28 KB
/
select.html
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
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.colors > button.active {
font-weight: bolder;
background-color: gray;
}
</style>
</head>
<body>
<button id="export" onclick="exportData()">Export</button>
<button id="log" onclick="logData()">Log</button>
<div class="colors"></div>
<canvas id="grid" width="1440" height="770"></canvas>
</body>
<script src="fabric.min.js"></script>
<script>
function makeLine(coords) {
return new fabric.Line(coords, {
fill: 'black',
stroke: 'black',
strokeWidth: lineWidth,
selectable: false,
evented: false,
});
}
function makeRect(x, y) {
return new fabric.Rect({
posData: [x, y],
left: x * widthScale - widthScale / 2,
top: y * heightScale - heightScale / 2,
width: widthScale,
height: heightScale,
fill: 'transparent',
selectable: false,
hoverCursor: 'pointer'
})
}
function exportData() {
console.log(data);
}
function logData() {
let log = "";
for (const row of data) {
let line = "";
for (const color of row) {
if (color === null)
line += "0";
else
line += color.substr(0, 1);
}
line += "\n";
log += line
}
console.log(log);
}
function onClick(event) {
console.log(event);
const x = event.target.posData[0];
const y = event.target.posData[1];
const currentFill = event.target.fill;
if (currentFill === activeColor) {
event.target.fill = "transparent";
data[y - 1][x - 1] = null;
} else {
event.target.fill = activeColor;
data[y - 1][x - 1] = activeColor;
}
event.target.dirty = true;
}
/** Anzahl der horizotalen Linien */
const numHorizontal = 9;
/** Anzahl der vertikalen Linien */
const numVertical = 16;
const lineWidth = 3.5;
const canvasGrid = new fabric.Canvas('grid', {
selection: false,
});
const widthScale = canvasGrid.width / (numVertical + 1);
const heightScale = canvasGrid.height / (numHorizontal + 1);
// setzt die Entstehungspunkte jedes neuen Objektes in die Mitte des Objektes (Bsp. bei Kreis: Mittelpunkt ist Entstehungspunkt)
fabric.Object.prototype.originX = fabric.Object.prototype.originY = 'center';
canvasGrid.renderOnAddRemove = false;
let rects = [];
for (let x = 1; x <= numVertical + 1; x++) {
let row = [];
for (let y = 1; y <= numHorizontal + 1; y++) {
let rect = makeRect(x, y);
rect.on("mousedown", onClick);
row.push(rect);
canvasGrid.add(rect)
}
rects.push(row);
}
let data = [];
for (let y = 1; y <= numHorizontal + 1; y++) {
data.push(new Array(numVertical + 1).fill(null));
}
let verticalLines = [];
let horizontalLines = [];
for (let x = 1; x <= numVertical; x++) {
let l = makeLine([x * widthScale, 0, x * widthScale, canvasGrid.height]);
verticalLines.push(l);
canvasGrid.add(l);
}
for (let y = 1; y <= numHorizontal; y++) {
let l = makeLine([0, y * heightScale, canvasGrid.width, y * heightScale]);
horizontalLines.push(l);
canvasGrid.add(l);
}
canvasGrid.renderAll();
canvasGrid.renderOnAddRemove = true;
const colors = ["red", "blue", "green", "purple"];
const buttonContainer = document.querySelector(".colors");
colors.forEach((color) => {
const button = document.createElement("button");
button.textContent = color;
button.addEventListener("click", (event) => {
activeColor = color;
document.querySelectorAll(".colors>button").forEach((button) => {
button.classList.remove("active");
});
event.target.classList.add("active");
});
buttonContainer.appendChild(button);
});
let activeColor = colors[0];
document.querySelector(".colors>button").classList.add("active");
</script>
</html>