สร้างลายเซ็นอิเล็กทรอนิกส์ (Canvas Signature)
ตัวอย่างนี้สามารถทำงานได้ทั้งบนหน้าจอสัมผัส และบนเดสก์ท็อปด้วยเมาส์
มี 2 แบบ ให้ทดลองใช้
- แบบที่ 1 เป็นแบบพื้นฐาน
- แบบที่ 2 เป็นแบบไล่ระดับน้ำหนักเส้น
แบบที่ 1 พื้นฐาน
| <!-- https://www.codeproject.com/Articles/355230/HTML-5-Canvas-A-Simple-Paint-Program-Touch-and-Mou --> | |
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <title>Desktops and Tablets</title> | |
| <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> | |
| <script type="text/javascript"> | |
| $(document).ready(function () { | |
| initialize(); | |
| }); | |
| // works out the X, Y position of the click inside the canvas from the X, Y position on the page | |
| function getPosition(mouseEvent, sigCanvas) { | |
| var x, y; | |
| if (mouseEvent.pageX != undefined && mouseEvent.pageY != undefined) { | |
| x = mouseEvent.pageX; | |
| y = mouseEvent.pageY; | |
| } else { | |
| x = mouseEvent.clientX + document.body.scrollLeft + document.documentElement.scrollLeft; | |
| y = mouseEvent.clientY + document.body.scrollTop + document.documentElement.scrollTop; | |
| } | |
| return { X: x - sigCanvas.offsetLeft, Y: y - sigCanvas.offsetTop }; | |
| } | |
| function initialize() { | |
| // get references to the canvas element as well as the 2D drawing context | |
| var sigCanvas = document.getElementById("canvasSignature"); | |
| var context = sigCanvas.getContext("2d"); | |
| context.strokeStyle = 'Black'; | |
| // This will be defined on a TOUCH device such as iPad or Android, etc. | |
| var is_touch_device = 'ontouchstart' in document.documentElement; | |
| if (is_touch_device) { | |
| // create a drawer which tracks touch movements | |
| var drawer = { | |
| isDrawing: false, | |
| touchstart: function (coors) { | |
| context.beginPath(); | |
| context.moveTo(coors.x, coors.y); | |
| this.isDrawing = true; | |
| }, | |
| touchmove: function (coors) { | |
| if (this.isDrawing) { | |
| context.lineTo(coors.x, coors.y); | |
| context.stroke(); | |
| } | |
| }, | |
| touchend: function (coors) { | |
| if (this.isDrawing) { | |
| this.touchmove(coors); | |
| this.isDrawing = false; | |
| } | |
| } | |
| }; | |
| // create a function to pass touch events and coordinates to drawer | |
| function draw(event) { | |
| // get the touch coordinates. Using the first touch in case of multi-touch | |
| var coors = { | |
| x: event.targetTouches[0].pageX, | |
| y: event.targetTouches[0].pageY | |
| }; | |
| // Now we need to get the offset of the canvas location | |
| var obj = sigCanvas; | |
| if (obj.offsetParent) { | |
| // Every time we find a new object, we add its offsetLeft and offsetTop to curleft and curtop. | |
| do { | |
| coors.x -= obj.offsetLeft; | |
| coors.y -= obj.offsetTop; | |
| } | |
| // The while loop can be "while (obj = obj.offsetParent)" only, which does return null | |
| // when null is passed back, but that creates a warning in some editors (i.e. VS2010). | |
| while ((obj = obj.offsetParent) != null); | |
| } | |
| // pass the coordinates to the appropriate handler | |
| drawer[event.type](coors); | |
| } | |
| // attach the touchstart, touchmove, touchend event listeners. | |
| sigCanvas.addEventListener('touchstart', draw, false); | |
| sigCanvas.addEventListener('touchmove', draw, false); | |
| sigCanvas.addEventListener('touchend', draw, false); | |
| // prevent elastic scrolling | |
| sigCanvas.addEventListener('touchmove', function (event) { | |
| event.preventDefault(); | |
| }, false); | |
| } | |
| else { | |
| // start drawing when the mousedown event fires, and attach handlers to | |
| // draw a line to wherever the mouse moves to | |
| $("#canvasSignature").mousedown(function (mouseEvent) { | |
| var position = getPosition(mouseEvent, sigCanvas); | |
| context.moveTo(position.X, position.Y); | |
| context.beginPath(); | |
| // attach event handlers | |
| $(this).mousemove(function (mouseEvent) { | |
| drawLine(mouseEvent, sigCanvas, context); | |
| }).mouseup(function (mouseEvent) { | |
| finishDrawing(mouseEvent, sigCanvas, context); | |
| }).mouseout(function (mouseEvent) { | |
| finishDrawing(mouseEvent, sigCanvas, context); | |
| }); | |
| }); | |
| } | |
| } | |
| // draws a line to the x and y coordinates of the mouse event inside | |
| // the specified element using the specified context | |
| function drawLine(mouseEvent, sigCanvas, context) { | |
| var position = getPosition(mouseEvent, sigCanvas); | |
| context.lineTo(position.X, position.Y); | |
| context.stroke(); | |
| } | |
| // draws a line from the last coordiantes in the path to the finishing | |
| // coordinates and unbind any event handlers which need to be preceded | |
| // by the mouse down event | |
| function finishDrawing(mouseEvent, sigCanvas, context) { | |
| // draw the line to the finishing coordinates | |
| drawLine(mouseEvent, sigCanvas, context); | |
| context.closePath(); | |
| // unbind any events which could draw | |
| $(sigCanvas).unbind("mousemove") | |
| .unbind("mouseup") | |
| .unbind("mouseout"); | |
| } | |
| </script> | |
| </head> | |
| <body> | |
| <h1>Canvas test</h1> | |
| <div id="canvasDiv"> | |
| <!-- It's bad practice (to me) to put your CSS here. I'd recommend the use of a CSS file! --> | |
| <canvas id="canvasSignature" width="500px" height="500px" style="border:2px solid #000000;"></canvas> | |
| </div> | |
| </body> | |
| </html> |
แบบที่ 2 ไล่ระดับน้ำหนักเส้น
| <!-- https://github.com/szimek/signature_pad --> | |
| <!doctype html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Signature Pad demo</title> | |
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/signature_pad@4.0.7/docs/css/signature-pad.css"> | |
| </head> | |
| <body onselectstart="return false"> | |
| <div id="signature-pad" class="signature-pad"> | |
| <div class="signature-pad--body"> | |
| <canvas></canvas> | |
| </div> | |
| <div class="signature-pad--footer"> | |
| <div class="description">Sign above</div> | |
| <div class="signature-pad--actions"> | |
| <div> | |
| <button type="button" class="button clear" data-action="clear">Clear</button> | |
| <button type="button" class="button" data-action="change-color">Change color</button> | |
| <button type="button" class="button" data-action="undo">Undo</button> | |
| </div> | |
| <div> | |
| <button type="button" class="button save" data-action="save-png">Save as PNG</button> | |
| <button type="button" class="button save" data-action="save-jpg">Save as JPG</button> | |
| <button type="button" class="button save" data-action="save-svg">Save as SVG</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script src="https://cdn.jsdelivr.net/npm/signature_pad@4.0.7/dist/signature_pad.umd.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/signature_pad@4.0.7/docs/js/app.js"></script> | |
| </body> | |
| </html> |
>>>TRY TO CHECK OUT , IF ANY ERROR FOUND. PLEASE LET ME KNOW BY COMMENT.
I'LL TRY MY LEVEL BEST TO FIX THE PROBLEM.
THANKS FOR VISITING thumariya.blogspot
Have a nice day!
-------------------------- -------------------------
>>>ลองตรวจสอบหากพบข้อผิดพลาด โปรดแจ้งให้เราทราบโดยแสดงความคิดเห็น
ฉันจะพยายามระดับของฉันให้ดีที่สุดเพื่อแก้ไขปัญหา
ขอบคุณสำหรับการเยี่ยมชม thumariya.blogspot
ขอให้เป็นวันที่ดี!
-------------------------- -------------------------
{fullWidth}