101 lines
3.4 KiB
Plaintext
101 lines
3.4 KiB
Plaintext
<!-- Wappler include head-page="layouts/main" fontawesome_5="cdn" bootstrap5="local" is="dmx-app" id="signature" appConnect="local" components="{dmxBootstrap5Modal:{},dmxBootbox5:{}}" -->
|
|
<meta name="ac:route" content="/signature">
|
|
|
|
<div class="container">
|
|
<div class="row">
|
|
<h1 class="text-center">Request Signature</h1>
|
|
</div>
|
|
</div>
|
|
<div class="container">
|
|
<div class="row">
|
|
|
|
<div class="col text-center align-self-center">
|
|
<h1>Signature</h1>
|
|
</div>
|
|
<div class="col text-center align-self-center">
|
|
<button id="btn2" class="btn text-center btn-primary" dmx-on:click="run({'bootbox.confirm':{name:'signatureClear',message:'Are you sure',title:'Clear signature',buttons:{confirm:{label:'Yes',className:'btn-success'},cancel:{label:'Abort',className:'btn-danger'}},then:{steps:{runJS:{name:'CLRSigPanel',outputType:'text',function:'clearCanvas'}}}}})">Clear Signature Pad</button>
|
|
</div>
|
|
<div class="col"></div>
|
|
</div>
|
|
</div>
|
|
<div class="container text-center">
|
|
|
|
<canvas id="signatureCanvas" width="700" height="200" style="border:1px solid #000;" class="text-center" onmousedown="startDrawing(event)" onmouseup="endDrawing()" onmousemove="draw(event)"></canvas>
|
|
</div>
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col align-self-center text-center"><button id="btn1" class="btn text-bg-primary" data-bs-target="undefined">Button</button></div>
|
|
<div class="col"></div>
|
|
</div>
|
|
</div>
|
|
<button id="btn3" class="btn">Button</button>
|
|
<script>
|
|
const canvas = document.getElementById('signatureCanvas');
|
|
const ctx = canvas.getContext('2d');
|
|
let drawing = false;
|
|
|
|
// Get the canvas element
|
|
|
|
|
|
// Function to get the canvas offset
|
|
function getCanvasOffset() {
|
|
const rect = canvas.getBoundingClientRect();
|
|
console.log("offsetX:",rect.left, " OffsetY:",rect.top)
|
|
return {
|
|
offsetX: rect.left,
|
|
offsetY: rect.top
|
|
};
|
|
}
|
|
|
|
|
|
function clearCanvas() {
|
|
console.log("Clear Signature area")
|
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
}
|
|
|
|
function startDrawing(e) {
|
|
console.log("Start Signature Capture")
|
|
//console.log(e)
|
|
drawing = true;
|
|
draw(e);
|
|
}
|
|
|
|
function endDrawing() {
|
|
console.log("Stopped Signature Capture")
|
|
drawing = false;
|
|
ctx.beginPath();
|
|
}
|
|
|
|
function draw(e) {
|
|
//console.log(e)
|
|
if (!drawing) return;
|
|
ctx.lineWidth = 2;
|
|
ctx.lineCap = 'round';
|
|
ctx.strokeStyle = '#000';
|
|
|
|
const { offsetX, offsetY } = getCanvasOffset();
|
|
let x = e.clientX - offsetX //canvas.offsetLeft;
|
|
let y = e.clientY - offsetY //canvas.offsetTop;
|
|
console.log("X:",x," Y:",y)
|
|
|
|
//let x = e.clientX - canvas.offsetLeft;
|
|
//let y = e.clientY - canvas.offsetTop;
|
|
console.log("X:", x, " Y:", y)
|
|
ctx.lineTo(x, y);
|
|
ctx.stroke();
|
|
ctx.beginPath();
|
|
ctx.moveTo(x, y);
|
|
}
|
|
|
|
//canvas.addEventListener('mousedown', startDrawing);
|
|
//canvas.addEventListener('mouseup', endDrawing);
|
|
//canvas.addEventListener('mousemove', draw);
|
|
|
|
canvas.addEventListener('touchstart', (e) => startDrawing(e.touches[0]));
|
|
canvas.addEventListener('touchend', endDrawing);
|
|
canvas.addEventListener('touchmove', (e) => draw(e.touches[0]));
|
|
|
|
</script>
|
|
|
|
|
|
<script src="/bootstrap/5/js/bootstrap.bundle.min.js"></script> |