143 lines
3.4 KiB
Vue
143 lines
3.4 KiB
Vue
<script lang="ts" setup>
|
|
import { onMounted, ref } from 'vue';
|
|
import SignaturePad from 'signature_pad';
|
|
|
|
defineExpose({ clearCanvas });
|
|
|
|
let canvasRef: HTMLCanvasElement | null = null;
|
|
const signaturePad = ref();
|
|
const currentColor = ref('blue');
|
|
const tab = ref('draw');
|
|
|
|
const initializeSignaturePad = () => {
|
|
if (canvasRef) {
|
|
signaturePad.value = new SignaturePad(canvasRef, {
|
|
backgroundColor: 'rgb(248,249,250)',
|
|
penColor: 'blue',
|
|
});
|
|
} else {
|
|
console.warn('Canvas reference not found. SignaturePad not initialized.');
|
|
}
|
|
};
|
|
|
|
function changeColor(color: string) {
|
|
signaturePad.value.penColor = color;
|
|
currentColor.value = color;
|
|
}
|
|
|
|
function clearCanvas() {
|
|
signaturePad.value.clear();
|
|
}
|
|
|
|
onMounted(() => {
|
|
canvasRef = document.querySelector('canvas');
|
|
initializeSignaturePad();
|
|
});
|
|
</script>
|
|
<template>
|
|
<div class="surface-1 bordered rounded">
|
|
<q-tabs
|
|
v-model="tab"
|
|
dense
|
|
align="left"
|
|
class="text-grey"
|
|
active-color="primary"
|
|
indicator-color="primary"
|
|
>
|
|
<q-tab
|
|
name="draw"
|
|
label="Draw"
|
|
style="border-top-left-radius: var(--radius-2)"
|
|
/>
|
|
<q-tab name="upload" label="Upload" />
|
|
</q-tabs>
|
|
<q-separator />
|
|
|
|
<q-tab-panels v-model="tab" animated>
|
|
<q-tab-panel name="draw">
|
|
<div class="column relative-position">
|
|
<div
|
|
class="absolute-top-right q-ma-md q-gutter-x-md row items-center"
|
|
>
|
|
<span
|
|
class="dot"
|
|
:class="{ active: currentColor === 'black' }"
|
|
style="background-color: black"
|
|
@click="changeColor('black')"
|
|
>
|
|
<q-icon
|
|
v-if="currentColor === 'black'"
|
|
name="mdi-check"
|
|
color="white"
|
|
size="sm"
|
|
/>
|
|
</span>
|
|
<span
|
|
:class="{ active: currentColor === 'red' }"
|
|
class="dot"
|
|
style="background-color: red"
|
|
@click="changeColor('red')"
|
|
>
|
|
<q-icon
|
|
v-if="currentColor === 'red'"
|
|
name="mdi-check"
|
|
color="white"
|
|
size="sm"
|
|
/>
|
|
</span>
|
|
<span
|
|
:class="{ active: currentColor === 'blue' }"
|
|
class="dot"
|
|
style="background-color: blue"
|
|
@click="changeColor('blue')"
|
|
>
|
|
<q-icon
|
|
v-if="currentColor === 'blue'"
|
|
name="mdi-check"
|
|
color="white"
|
|
size="sm"
|
|
/>
|
|
</span>
|
|
</div>
|
|
|
|
<canvas
|
|
class="signature-canvas"
|
|
ref="canvasRef"
|
|
id="signature-pad"
|
|
width="650"
|
|
height="300"
|
|
></canvas>
|
|
</div>
|
|
</q-tab-panel>
|
|
</q-tab-panels>
|
|
|
|
<!-- <div class="text-right q-gutter-x-md">
|
|
<q-btn id="clear" label="Clear" @click="signaturePad.clear()" />
|
|
</div> -->
|
|
</div>
|
|
</template>
|
|
<style scoped lang="scss">
|
|
.signature-canvas {
|
|
border: 1px solid var(--border-color);
|
|
border-radius: var(--radius-2);
|
|
}
|
|
|
|
.dot {
|
|
height: 25px;
|
|
width: 25px;
|
|
border-radius: 50%;
|
|
display: inline-flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
&.active {
|
|
height: 35px;
|
|
width: 35px;
|
|
}
|
|
}
|
|
|
|
.color-palette {
|
|
position: absolute;
|
|
display: inline-block;
|
|
}
|
|
</style>
|