Update js

This commit is contained in:
augustin64 2022-04-13 09:52:08 +02:00
parent 71a9a9adf5
commit 6c13237db8
2 changed files with 21 additions and 5 deletions

View File

@ -27,6 +27,10 @@ function init() {
canvas.addEventListener('mousemove', s_mouseMove, false); canvas.addEventListener('mousemove', s_mouseMove, false);
window.addEventListener('mouseup', s_mouseUp, false); window.addEventListener('mouseup', s_mouseUp, false);
document.getElementById('clear').addEventListener("click", clear); document.getElementById('clear').addEventListener("click", clear);
canvas.addEventListener('touchstart', s_mouseDown, false);
canvas.addEventListener('touchmove', s_touchMove, false);
canvas.addEventListener('touchend', s_mouseUp, false);
} }
} }
@ -52,23 +56,25 @@ function draw(ctx, x, y, isDown) {
// Mouse moves // Mouse moves
function s_mouseDown() { function s_mouseDown() {
mouseDown = 1; mouseDown = true;
draw(ctx, mouseX, mouseY, false); draw(ctx, mouseX, mouseY, false);
} }
function s_mouseUp() { function s_mouseUp() {
mouseDown = 0; mouseDown = false;
} }
function s_mouseMove(e) { function s_mouseMove(e) {
// Si la souris bouge et est cliquée, on souhaite dessiner un trait // Si la souris bouge et est cliquée, on souhaite dessiner un trait
getMousePos(e); getMousePos(e);
if (mouseDown == 1) { if (mouseDown) {
draw(ctx, mouseX, mouseY, true); draw(ctx, mouseX, mouseY, true);
} }
} }
function getMousePos(e) { function getMousePos(e) {
e.preventDefault();
e.stopPropagation();
if (e.offsetX) { if (e.offsetX) {
mouseX = e.offsetX; mouseX = e.offsetX;
mouseY = e.offsetY; mouseY = e.offsetY;
@ -78,8 +84,18 @@ function getMousePos(e) {
} }
} }
function s_touchMove(e) {
var touch = e.touches[0];
var mouseEvent = new MouseEvent("mousemove", {
clientX: touch.clientX,
clientY: touch.clientY
});
canvas.dispatchEvent(mouseEvent);
}
function clear() { function clear() {
document.getElementById("result").innerHTML = "";
ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = "black"; ctx.fillStyle = "black";
ctx.fillRect(0, 0, canvas.width, canvas.height); ctx.fillRect(0, 0, canvas.width, canvas.height);

View File

@ -2,7 +2,7 @@
<html lang="fr"> <html lang="fr">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Home page<</title> <title>Home page</title>
<link href="{{ url_for('static',filename='style.css') }}" rel="stylesheet"> <link href="{{ url_for('static',filename='style.css') }}" rel="stylesheet">
</head> </head>