-
Notifications
You must be signed in to change notification settings - Fork 1
/
temp.js
90 lines (78 loc) · 2.65 KB
/
temp.js
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
import Two from 'https://cdn.skypack.dev/two.js@latest'
// Reference to the drawing area div
var drawingArea = document.getElementById('drawing-area')
// Create a Two.js instance within the specific div
var params = {
width: drawingArea.clientWidth,
height: drawingArea.clientHeight,
}
var two = new Two(params).appendTo(drawingArea)
var isDrawing = false
var currentPath
var paths = []
// Handle drawing on the drawing area
drawingArea.addEventListener('mousedown', function (event) {
isDrawing = true
currentPath = new Two.Path()
two.add(currentPath)
paths.push(currentPath)
})
drawingArea.addEventListener('mousemove', function (event) {
if (!isDrawing) return
// Calculate the mouse position relative to the drawing area
var rect = drawingArea.getBoundingClientRect()
var x = event.clientX - rect.left
var y = event.clientY - rect.top
currentPath.vertices.push(new Two.Vector(x, y))
currentPath.vertices[currentPath.vertices.length - 1].command = 'L'
currentPath.noFill()
currentPath.stroke = '#000'
two.update()
})
drawingArea.addEventListener('mouseup', function (event) {
isDrawing = false
})
// Save drawing to local storage
document.getElementById('save').addEventListener('click', function () {
try {
var drawingData = paths.map(function (path) {
return path.vertices.map(function (vertex) {
return { x: vertex.x, y: vertex.y }
})
})
localStorage.setItem('drawing', JSON.stringify(drawingData))
console.log('Drawing saved:', drawingData)
alert('Drawing saved!')
} catch (error) {
console.error('Error saving drawing:', error)
alert('Failed to save drawing.')
}
})
// Load drawing from local storage
document.getElementById('load').addEventListener('click', function () {
try {
var drawingData = JSON.parse(localStorage.getItem('drawing'))
if (!drawingData) {
alert('No saved drawing found.')
return
}
two.clear() // Clear existing paths
paths = [] // Reset paths array
drawingData.forEach(function (pathData) {
var path = new Two.Path()
pathData.forEach(function (point) {
path.vertices.push(new Two.Vector(point.x, point.y))
})
path.noFill()
path.stroke = '#000'
two.add(path)
paths.push(path)
})
two.update()
console.log('Drawing loaded:', drawingData)
alert('Drawing loaded!')
} catch (error) {
console.error('Error loading drawing:', error)
alert('Failed to load drawing.')
}
})