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

6
index.js
Unescape Escape View File

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

3
package.json
Unescape Escape View File

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

110
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>
<title>untitled</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>drawing</title>
<style>
body{
margin: 0 auto;
}
#drawing{
display: block;
margin-top: 100px;
margin-right: auto;
margin-left: auto;
border: 1px solid #000;
box-shadow: 0px 0px 10px #000;
}
.center{
text-align: center;
}
#drawing{
border: 1px solid #000;
box-shadow: 0px 0px 10px #000;
margin-left: 10px;
}
</style>
</head>
<body>
<canvas id="drawing" width="400" height="400" ></canvas>
Width:<input type="range" min="1" max="20" value="5" id="lineWidth">
Color:<input type="color" id="color" value="#000000" />
<h1 class="center">drawing editor</h1>
<canvas id="drawing" width="400" height="400"></canvas><br>
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>
<script src="/socket.io/socket.io.js"></script>
<script>
var socket = io();
var lineWidth = 1;
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 };
var lineWidth = 5;
var color = "#000000";
var pos = {x: 0, y: 0};
document.addEventListener('mousemove', draw);
document.addEventListener('mousedown', setPosition);
document.addEventListener('mouseenter', setPosition);
function setPosition(e) {
function setPosition(e){
pos.x = e.clientX - canvas.offsetLeft;
pos.y = e.clientY - canvas.offsetTop;
}
function draw(e) {
if (e.buttons !== 1) return;
ctx.beginPath();
function draw(e){
if(e.buttons !== 1) return;
ctx.lineWidth = lineWidth;
ctx.lineCap = 'round';
ctx.lineCap = brush;
ctx.strokeStyle = color;
ctx.moveTo(pos.x, pos.y);
var oldpos = { x: pos.x, y: pos.y };
ctx.beginPath();
ctx.moveTo(pos.x,pos.y);
var startPos = {x: pos.x, y: pos.y};
setPosition(e);
ctx.lineTo(pos.x, pos.y);
ctx.stroke();
socket.emit('draw', {oldpos, pos, lineWidth, color});
ctx.lineTo(pos.x,pos.y);
ctx.stroke();
socket.emit("picture", {
startPos,
pos,
color,
lineWidth
});
}
document.getElementById("lineWidth").addEventListener('change', function(){
lineWidth = this.value;
});
document.getElementById("color").addEventListener('change', function(){
color = this.value;
socket.on("dingdong", (line) => {
console.log(line);
ctx.lineWidth = line.lineWidth;
ctx.strokeStyle = line.color;
ctx.beginPath();
ctx.moveTo(line.startPos.x, line.startPos.y);
ctx.lineTo(line.pos.x, line.pos.y);
ctx.stroke();
});
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();
});
</script>
</html>

Write Preview
Loading…
Cancel
Save