thib8956/js-canvas-playground
1
0
Fork 0
Code Issues Pull Requests Activity

handle touch events

Browse Source
This commit is contained in:
Thibaud Gasser 2025-02-02 12:01:19 +01:00
parent 5152ea259e
commit a87bfef4f6
2 changed files with 69 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
bezier-2.ts
View File

@ -35,7 +35,17 @@ function init() {
const bezier = cubicBezier(...points); const bezier = cubicBezier(...points);
drawCurve(ctx, bezier); drawCurve(ctx, bezier);
canvas.onmousedown = (evt) => { canvas.ontouchstart = (evt: TouchEvent) => {
console.assert(evt.touches.length === 1, "Multiple touch points are not supported");
const { clientX, clientY } = evt.touches[0];
for (const p of points) {
if (Math.abs(p.x - clientX) < 10 && Math.abs(p.y - clientY) < 10) {
selection = points.indexOf(p);
}
}
};
canvas.onmousedown = (evt: MouseEvent) => {
const { clientX, clientY } = evt; const { clientX, clientY } = evt;
for (const p of points) { for (const p of points) {
if (Math.abs(p.x - clientX) < 10 && Math.abs(p.y - clientY) < 10) { if (Math.abs(p.x - clientX) < 10 && Math.abs(p.y - clientY) < 10) {
@ -44,7 +54,22 @@ function init() {
} }
}; };
canvas.onmousemove = (evt) => { canvas.ontouchmove = (evt: TouchEvent) => {
console.assert(evt.touches.length === 1, "Multiple touch points are not supported");
const { clientX, clientY } = evt.touches[0];
if (selection !== undefined) {
points[selection].x = clientX;
points[selection].y = clientY;
// redraw
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
const bezier = cubicBezier(...points);
drawCurve(ctx, bezier);
drawPoints(ctx, points);
}
};
canvas.onmousemove = (evt: MouseEvent) => {
if (selection !== undefined) { if (selection !== undefined) {
points[selection].x = evt.clientX; points[selection].x = evt.clientX;
points[selection].y = evt.clientY; points[selection].y = evt.clientY;
@ -56,6 +81,11 @@ function init() {
} }
}; };
canvas.ontouchend = () => {
selection = undefined;
};
canvas.onmouseup = () => { canvas.onmouseup = () => {
selection = undefined; selection = undefined;
}; };

39
spline.ts
View File

@ -60,7 +60,8 @@ function init() {
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height); ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
draw(ctx, points); draw(ctx, points);
}; };
canvas.onmousedown = (evt) => {
canvas.onmousedown = (evt: MouseEvent) => {
const { clientX, clientY } = evt; const { clientX, clientY } = evt;
for (const p of points) { for (const p of points) {
if (Math.abs(p.x - clientX) < 10 && Math.abs(p.y - clientY) < 10) { if (Math.abs(p.x - clientX) < 10 && Math.abs(p.y - clientY) < 10) {
@ -76,7 +77,24 @@ function init() {
} }
}; };
canvas.onmousemove = (evt) => { canvas.ontouchstart = (evt: TouchEvent) => {
console.assert(evt.touches.length === 1, "Multiple touch points are not supported");
const { clientX, clientY } = evt.touches[0];
for (const p of points) {
if (Math.abs(p.x - clientX) < 10 && Math.abs(p.y - clientY) < 10) {
selection = points.indexOf(p);
}
}
if (selection === undefined) {
points.push({ x: clientX, y: clientY });
// redraw
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
draw(ctx, points);
}
};
canvas.onmousemove = (evt: MouseEvent) => {
if (selection !== undefined) { if (selection !== undefined) {
points[selection].x = evt.clientX; points[selection].x = evt.clientX;
points[selection].y = evt.clientY; points[selection].y = evt.clientY;
@ -86,9 +104,26 @@ function init() {
} }
}; };
canvas.ontouchmove = (evt: TouchEvent) => {
console.assert(evt.touches.length === 1, "Multiple touch points are not supported");
const { clientX, clientY } = evt.touches[0];
if (selection !== undefined) {
points[selection].x = clientX;
points[selection].y = clientY;
// redraw
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
draw(ctx, points);
}
};
canvas.onmouseup = () => { canvas.onmouseup = () => {
selection = undefined; selection = undefined;
}; };
canvas.ontouchend = () => {
selection = undefined;
};
} }
init(); init();