112 lines
3.9 KiB
HTML
112 lines
3.9 KiB
HTML
<!doctype html>
|
|
<html>
|
|
|
|
<head>
|
|
<base href="/">
|
|
<script src="/dmxAppConnect/dmxAppConnect.js"></script>
|
|
<meta charset="UTF-8">
|
|
<title>Untitled Document</title>
|
|
|
|
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
|
<link rel="stylesheet" href="/bootstrap/5/css/bootstrap.min.css" />
|
|
<link rel="stylesheet" href="/css/style.css" />
|
|
<script src="/dmxAppConnect/dmxBootstrap5Modal/dmxBootstrap5Modal.js" defer></script>
|
|
</head>
|
|
|
|
<body is="dmx-app" id="Signature">
|
|
<div class="container">
|
|
<div class="row">
|
|
<h1 class="text-center">Heading</h1>
|
|
</div>
|
|
</div>
|
|
<div class="container">
|
|
<div class="row">
|
|
<h1>Heading</h1>
|
|
</div>
|
|
</div>
|
|
<div class="container text-center">
|
|
<canvas id="signatureCanvas2" width="700" height="200" style="border:1px solid #000;" onmousedown="startDrawing" onmouseup="endDrawing" onmousemove="draw" class="text-center"></canvas>
|
|
</div>
|
|
|
|
<button id="btn1" class="btn" data-bs-toggle="modal" data-bs-target="#modal1">Button</button>
|
|
<div class="modal" id="modal1" is="dmx-bs5-modal" tabindex="-1" onshown="getCanvasOffset()">
|
|
<div class="modal-dialog modal-lg" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">Modal title</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body text-center">
|
|
<p>Modal body text goes here.</p>
|
|
<canvas id="signatureCanvas" width="700" height="200" style="border:1px solid #000;" onmousedown="startDrawing(event)" onmouseup="endDrawing" onmousemove="draw(event)"></canvas>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
|
|
<button type="button" class="btn btn-primary">Save changes</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="/bootstrap/5/js/bootstrap.bundle.min.js"></script>
|
|
<script>
|
|
const canvas = document.getElementById('signatureCanvas');
|
|
const ctx = canvas.getContext('2d');
|
|
let drawing = false;
|
|
|
|
function getCanvasOffset() {
|
|
const rect = canvas.getBoundingClientRect();
|
|
console.log("offsetX:",rect.left, " OffsetY:",rect.top)
|
|
return {
|
|
offsetX: rect.left,
|
|
offsetY: rect.top
|
|
};
|
|
}
|
|
|
|
function startDrawing(e) {
|
|
console.log("Start Drawing")
|
|
drawing = true;
|
|
draw(e);
|
|
}
|
|
|
|
function endDrawing() {
|
|
console.log("Stopped Drawing")
|
|
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)
|
|
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>
|
|
|
|
<button popovertarget="mypopover">Toggle the popover</button>
|
|
<div id="mypopover" popover>Popover content</div>
|
|
|
|
</body>
|
|
|
|
</html> |