Skip to content

Commit 10e53f1

Browse files
author
Valentina Lafchieva
committed
Create 6_graphics.html
1 parent 568085d commit 10e53f1

File tree

1 file changed

+192
-0
lines changed

1 file changed

+192
-0
lines changed

‎experiments/valentina/6_graphics.html

Lines changed: 192 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,192 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Interactive SVG Path Creator</title>
6+
<style>
7+
body {
8+
margin: 0;
9+
padding: 0;
10+
font-family: Lucida Console;
11+
display: flex; /* Make the body a flex container */
12+
height: 100vh;
13+
}
14+
15+
header {
16+
background-color: #003975;
17+
color: white;
18+
text-align: center;
19+
padding: 40px;
20+
font-size: 2.5rem;
21+
width: 100%;
22+
box-sizing: border-box;
23+
}
24+
25+
header p {
26+
font-size: 1.2rem;
27+
margin: 10px 0 0;
28+
}
29+
30+
.sidebar {
31+
width: 150px;
32+
background-color: #f4f4f4;
33+
border-right: 1px solid #ccc;
34+
display: flex;
35+
flex-direction: column;
36+
align-items: center;
37+
padding-top: 20px;
38+
box-sizing: border-box;
39+
}
40+
41+
.color-button {
42+
width: 40px;
43+
height: 40px;
44+
border-radius: 50%;
45+
margin: 10px;
46+
cursor: pointer;
47+
border: 2px solid #ccc;
48+
}
49+
50+
.color-button.selected {
51+
border: 4px solid black;
52+
}
53+
54+
.main {
55+
flex: 1; /* Take remaining space */
56+
display: flex;
57+
flex-direction: column;
58+
}
59+
60+
svg {
61+
flex: 1;
62+
width: 100%; /* Ensure full width */
63+
height: 100%; /* Ensure full height */
64+
background-color: #f9f9f9;
65+
border: 1px solid #ccc;
66+
}
67+
68+
circle {
69+
fill: #007BFF;
70+
cursor: pointer;
71+
}
72+
</style>
73+
</head>
74+
<body>
75+
76+
<div class="sidebar">
77+
<div class="color-button" style="background-color: rgba(0, 123, 255, 0.5);" data-color="rgba(0, 123, 255, 0.5)"></div>
78+
<div class="color-button" style="background-color: rgba(255, 0, 0, 0.5);" data-color="rgba(255, 0, 0, 0.5)"></div>
79+
<div class="color-button" style="background-color: rgba(0, 255, 0, 0.5);" data-color="rgba(0, 255, 0, 0.5)"></div>
80+
<div class="color-button" style="background-color: rgba(255, 255, 0, 0.5);" data-color="rgba(255, 255, 0, 0.5)"></div>
81+
<div class="color-button" style="background-color: rgba(128, 0, 128, 0.5);" data-color="rgba(128, 0, 128, 0.5)"></div>
82+
</div>
83+
84+
<div class="main">
85+
<header>
86+
Interactive SVG Path Creator
87+
<p>Click on the canvas to draw shapes. Use the colors on the left to choose your stroke and fill color.</p>
88+
</header>
89+
<svg xmlns="http://www.w3.org/2000/svg"></svg>
90+
</div>
91+
92+
<script>
93+
const svg = document.querySelector('svg');
94+
const colorButtons = document.querySelectorAll('.color-button');
95+
let points = [];
96+
let currentPath = null;
97+
const pointRadius = 5;
98+
let firstPointElement = null;
99+
let currentColor = 'rgba(0, 123, 255, 0.5)'; // Default color
100+
101+
// Add event listener to color buttons
102+
colorButtons.forEach(button => {
103+
button.addEventListener('click', () => {
104+
// Remove "selected" class from all buttons
105+
colorButtons.forEach(btn => btn.classList.remove('selected'));
106+
// Add "selected" class to the clicked button
107+
button.classList.add('selected');
108+
// Update current color
109+
currentColor = button.getAttribute('data-color');
110+
});
111+
});
112+
113+
// Function to create a new path
114+
function createPath() {
115+
const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
116+
path.setAttribute('d', ''); // Path data
117+
path.setAttribute('stroke', currentColor); // Stroke is the current color
118+
path.setAttribute('stroke-width', '2');
119+
path.setAttribute('fill', 'none'); // No fill initially
120+
svg.appendChild(path);
121+
return path;
122+
}
123+
124+
// Add click event listener to draw points and paths
125+
svg.addEventListener('click', (event) => {
126+
// Ignore clicks on the first point to handle its click separately
127+
if (event.target.tagName === 'circle') return;
128+
129+
// Get the bounding box of the SVG element
130+
const rect = svg.getBoundingClientRect();
131+
const x = event.clientX - rect.left; // Adjust X coordinate
132+
const y = event.clientY - rect.top; // Adjust Y coordinate
133+
134+
// For the first click, add a circle and start the path
135+
if (points.length === 0) {
136+
firstPointElement = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
137+
firstPointElement.setAttribute('cx', x);
138+
firstPointElement.setAttribute('cy', y);
139+
firstPointElement.setAttribute('r', pointRadius);
140+
svg.appendChild(firstPointElement);
141+
142+
// Add a click event listener to the first point
143+
firstPointElement.addEventListener('click', closePath);
144+
}
145+
146+
// Add the point to the points array
147+
points.push({ x, y });
148+
149+
// Draw or update the path
150+
if (!currentPath) {
151+
currentPath = createPath();
152+
}
153+
updatePath();
154+
});
155+
156+
// Function to close the path
157+
function closePath() {
158+
if (!currentPath || points.length < 2) return;
159+
160+
// Explicitly connect back to the first point
161+
const firstX = points[0].x;
162+
const firstY = points[0].y;
163+
const d = currentPath.getAttribute('d') + ` L${firstX},${firstY} Z`;
164+
currentPath.setAttribute('d', d);
165+
166+
// Add the selected fill color when the path is closed
167+
currentPath.setAttribute('fill', currentColor);
168+
currentPath.setAttribute('stroke', currentColor); // Stroke matches fill color
169+
170+
// Reset for the next path
171+
points = [];
172+
currentPath = null;
173+
firstPointElement = null;
174+
}
175+
176+
// Function to update the path's "d" attribute
177+
function updatePath() {
178+
if (points.length === 0) return;
179+
const d = points.map((point, index) =>
180+
index === 0
181+
? `M${point.x},${point.y}` // Move to the first point
182+
: `L${point.x},${point.y}` // Draw line to subsequent points
183+
).join(' ');
184+
currentPath.setAttribute('d', d);
185+
}
186+
</script>
187+
188+
</body>
189+
</html>
190+
191+
192+

0 commit comments

Comments
 (0)