ulith/amputoma-fe
1
0
Fork 0
forked from mirrors/akkoma-fe
Code Pull requests Activity

canvas touch support

Browse source
This commit is contained in:
ulith 2025-03-07 12:34:42 +13:00
parent 905c5917ff
commit 7aa22e839a
1 changed files with 28 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

37
src/components/drawing_canvas/drawingCanvas.vue
View file

@ -1,6 +1,6 @@
<template> <template>
<div class="drawbox" v-if="visible"> <div class="drawbox" v-if="visible">
<canvas width="320" height="320" class="drawCanvas" ref="drawCanvas" @mousedown="startDrawing" @mousemove="draw" @mouseup="stopDrawing" @mouseleave="stopDrawing"></canvas> <canvas width="320" height="320" class="drawCanvas" ref="drawCanvas" @touchstart="startDrawing" @touchmove="draw" @touchend="stopDrawing" @touchcancel="stopDrawing" @mousedown="startDrawing" @mousemove="draw" @mouseup="stopDrawing" @mouseleave="stopDrawing"></canvas>
<div class="toolbar"> <div class="toolbar">
<input type="color" id="brushColour" v-model="colour"/> <input type="color" id="brushColour" v-model="colour"/>
<input type="range" id="brushSize" min="1" max="20" v-model="brushSize"/> <input type="range" id="brushSize" min="1" max="20" v-model="brushSize"/>
@ -28,17 +28,22 @@
}, },
methods: { methods: {
startDrawing(event) { startDrawing(event) {
this.drawing = true;
const canvas = this.$refs.drawCanvas; const canvas = this.$refs.drawCanvas;
const ctx = canvas.getContext('2d'); const ctx = canvas.getContext('2d');
this.drawing = true;
event.preventDefault();
ctx.lineJoin = 'round'; ctx.lineJoin = 'round';
ctx.lineCap = 'round'; ctx.lineCap = 'round';
ctx.lineWidth = this.brushSize;
ctx.strokeStyle = this.colour;
ctx.beginPath(); ctx.beginPath();
ctx.moveTo(event.offsetX, event.offsetY); const { x, y } = this.inputPos(event);
ctx.moveTo(x, y);
this.currentLine = { this.currentLine = {
points: [{ x: event.offsetX, y: event.offsetY }], points: [{ x, y }],
colour: this.colour, colour: this.colour,
brushSize: this.brushSize brushSize: this.brushSize
}; };
@ -47,12 +52,12 @@
if (!this.drawing) return; if (!this.drawing) return;
const canvas = this.$refs.drawCanvas; const canvas = this.$refs.drawCanvas;
const ctx = canvas.getContext('2d'); const ctx = canvas.getContext('2d');
event.preventDefault();
ctx.lineWidth = this.brushSize; const { x, y } = this.inputPos(event);
ctx.strokeStyle = this.colour; ctx.lineTo(x, y);
ctx.lineTo(event.offsetX, event.offsetY);
ctx.stroke(); ctx.stroke();
this.currentLine.points.push({ x: event.offsetX, y: event.offsetY }); this.currentLine.points.push({ x, y });
}, },
stopDrawing() { stopDrawing() {
if (!this.drawing) return; if (!this.drawing) return;
@ -93,7 +98,21 @@
const canvas = this.$refs.drawCanvas; const canvas = this.$refs.drawCanvas;
const dataURL = canvas.toDataURL('image/png'); const dataURL = canvas.toDataURL('image/png');
this.$emit('postDrawing', dataURL); this.$emit('postDrawing', dataURL);
} },
inputPos(event) {
const canvas = this.$refs.drawCanvas;
let x, y;
if (event.touches) {
const touch = event.touches[0];
const rect = canvas.getBoundingClientRect();
x = touch.clientX - rect.left;
y = touch.clientY - rect.top;
} else {
x = event.offsetX;
y = event.offsetY;
}
return { x, y };
},
} }
}; };
</script> </script>