joak
/
collective-drawing
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update from Tuesday

Browse Source
main
joak 9 months ago
parent 93d03e0441
commit d0547fb769
3 changed files with 62 additions and 57 deletions
Show Stats Download Patch File Download Diff File

4
index.js
Unescape Escape View File

@ -10,9 +10,9 @@ app.use(express.static('public'));
io.on('connection', (socket) => { io.on('connection', (socket) => {
console.log('a user connected'); console.log('a user connected');
socket.on('draw', (line) => { socket.on('picture', (line) => {
console.log(line); console.log(line);
socket.broadcast.emit("draw",line); socket.broadcast.emit("dingdong",line);
}); });
socket.on('disconnect', () => { socket.on('disconnect', () => {

3
package.json
Unescape Escape View File

@ -4,6 +4,7 @@
"description": "lets draw together", "description": "lets draw together",
"dependencies": { "dependencies": {
"express": "^4.18.2", "express": "^4.18.2",
"socket.io": "^4.7.4" "socket.io": "^4.7.4",
"socketio": "^1.0.0"
} }
} }

102
public/index.html
Unescape Escape View File

@ -1,81 +1,85 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head> <head>
<title>untitled</title> <title>drawing</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<style> <style>
body{ .center{
margin: 0 auto; text-align: center;
} }
#drawing{ #drawing{
display: block;
margin-top: 100px;
margin-right: auto;
margin-left: auto;
border: 1px solid #000; border: 1px solid #000;
box-shadow: 0px 0px 10px #000; box-shadow: 0px 0px 10px #000;
margin-left: 10px;
} }
</style> </style>
</head> </head>
<body> <body>
<canvas id="drawing" width="400" height="400" ></canvas> <h1 class="center">drawing editor</h1>
Width:<input type="range" min="1" max="20" value="5" id="lineWidth"> <canvas id="drawing" width="400" height="400"></canvas><br>
Color:<input type="color" id="color" value="#000000" /> Stroke width: <input type="range" min="0.5" max="50" value="1" id="width"><br>
Color: <input type="color" id="color">
Brush: <select id="linecap">
<option value="square">square</option>
<option value="round">round</option>
<option value="butt">butt</option>
</select>
</body> </body>
<script src="/socket.io/socket.io.js"></script> <script src="/socket.io/socket.io.js"></script>
<script> <script>
var socket = io(); var socket = io();
var canvas = document.getElementById("drawing");
var ctx = canvas.getContext('2d');
var pos = { x: 0, y: 0 }; var lineWidth = 1;
var lineWidth = 5;
var color = "#000000"; var color = "#000000";
var brush = "square";
document.getElementById("linecap").addEventListener('change', function(){
brush = this.value;
});
document.getElementById("color").addEventListener('change', function(){
color = this.value;
});
document.getElementById("width").addEventListener('change', function(){
lineWidth = this.value;
});
var canvas = document.getElementById("drawing");
var ctx = canvas.getContext('2d');
var pos = {x: 0, y: 0};
document.addEventListener('mousemove', draw); document.addEventListener('mousemove', draw);
document.addEventListener('mousedown', setPosition); document.addEventListener('mousedown', setPosition);
document.addEventListener('mouseenter', setPosition);
function setPosition(e) { function setPosition(e){
pos.x = e.clientX - canvas.offsetLeft; pos.x = e.clientX - canvas.offsetLeft;
pos.y = e.clientY - canvas.offsetTop; pos.y = e.clientY - canvas.offsetTop;
} }
function draw(e) { function draw(e){
if (e.buttons !== 1) return; if(e.buttons !== 1) return;
ctx.beginPath();
ctx.lineWidth = lineWidth; ctx.lineWidth = lineWidth;
ctx.lineCap = 'round'; ctx.lineCap = brush;
ctx.strokeStyle = color; ctx.strokeStyle = color;
ctx.moveTo(pos.x, pos.y); ctx.beginPath();
var oldpos = { x: pos.x, y: pos.y }; ctx.moveTo(pos.x,pos.y);
var startPos = {x: pos.x, y: pos.y};
setPosition(e); setPosition(e);
ctx.lineTo(pos.x, pos.y); ctx.lineTo(pos.x,pos.y);
ctx.stroke(); ctx.stroke();
socket.emit('draw', {oldpos, pos, lineWidth, color}); socket.emit("picture", {
startPos,
pos,
color,
lineWidth
});
} }
document.getElementById("lineWidth").addEventListener('change', function(){ socket.on("dingdong", (line) => {
lineWidth = this.value; console.log(line);
}); ctx.lineWidth = line.lineWidth;
ctx.strokeStyle = line.color;
document.getElementById("color").addEventListener('change', function(){ ctx.beginPath();
color = this.value; ctx.moveTo(line.startPos.x, line.startPos.y);
}); ctx.lineTo(line.pos.x, line.pos.y);
socket.on("draw", function(input){
ctx.lineWidth = input.lineWidth;
ctx.strokeStyle = input.color;
ctx.moveTo(input.oldpos.x, input.oldpos.y);
ctx.lineTo(input.pos.x, input.pos.y);
ctx.stroke(); ctx.stroke();
}); });
</script> </script>
</html>

Write Preview
Loading…
Cancel
Save