Maison > Article > interface Web > Explication détaillée de l'exemple de code du panneau de signature prenant en charge l'écran tactile dans Canvas en HTML5
J'ai été trop occupé récemment, j'ai démissionné après la fête nationale et j'ai lentement commencé à chercher un emploi. Je travaille dans mon entreprise actuelle depuis plus d'un demi-mois. Je me sens si triste. J'ai pleuré au-delà des mots. Au cours du processus d'entretien, j'ai vu une entreprise frauduleuse après l'autre. Plusieurs entreprises n'ont travaillé qu'une seule journée, puis sont parties. Parmi elles, il y avait une entreprise qui faisait des heures supplémentaires jusqu'à 10 heures du matin. premier jour de travail. C'est trop loin sur Tiyu West Road. C'est trop fatigant de prendre le bus le premier jour de retour à la maison. J'avais l'habitude de marcher pour aller au travail, donc je ne suis vraiment pas apte à prendre le bus. vous parler du big data lors des entretiens. Optimisation des performances et ainsi de suite. Quand je suis entré dans l'entreprise, j'ai vu qu'ils utilisaient les trois couches les plus simples. Il n'y avait pas de design pattern Bref, c'était trop triste. . Heureusement, l'entreprise n'est pas mauvaise maintenant. Il vaut mieux être déficient que excessif.
canvasTutoriel de base : la balise 5ba626b379994d53f7acf72a64f9b697 définit des graphiques, tels que des graphiques et d'autres images. L'élément canvas de HTML5 utilise JavaScript pour dessiner des images sur la page Web. Vous pouvez même créer et manipuler des animations sur toile, ce qui n'est pas possible avec les pinceaux et les peintures à l'huile. La prise en charge complète de HTML5 sur tous les navigateurs Web n'est pas encore complète, mais parmi les nouvelles prises en charge, Canvas fonctionne déjà bien sur presque tous les navigateurs modernes. Canvas propose de nombreuses façons de dessiner des chemins, des rectangles, des cercles, des personnages et d'ajouter des images. Je suis dans l'entreprise depuis un mois et il s'agit principalement d'apprentissage. Je fais du développement backend et je n'ai jamais utilisé de base de données Oracle auparavant. Ce mois-ci, j'ai principalement appris quelques nouvelles fonctionnalités de H5 et CSS3.0. dessus. L'installation et le déploiement sur le serveur, certaines importations et exportations de données, la sauvegarde des données, etc., les choses frontales sont relativement médiocres. C'est aussi l'occasion d'apprendre, alors étudiez dur.
La société crée un système OA de bureau automatisé. Certaines zones d'audit doivent ajouter des fonctions de signature manuscrite. Je n'avais aucune idée au début, donc. Je les ai cherchés sur Internet, après avoir consulté les informations, j'ai découvert que H5 avait ce nouveau label canvcas, et j'étais particulièrement content. Alors je l’ai repris et essayé, et ça a vraiment fonctionné.
@{ Layout = null; }<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>Testpage</title> <script src="~/Assets/jquery-2.1.1.js"></script> <script src="~/Assets/bootstrap/bootstrap.js"></script> <link href="~/Assets/bootstrap/bootstrap.css" rel="stylesheet" /> <script src="~/Scripts/WritingPad.js"></script> <script src="~/Assets/jq-signature.js"></script> </head> <body style="background-color:#b6ff00"> <button class="btn btn-primary" type="button" style="position:relative">点击我</button> </body> </html> <script> $(function () { $(".btn,.btn-primary").click(function () { var wp = new WritingPad(); //wp.init(); }); });</script>
/** * 功能:签名canvas面板初始化,为WritingPad.js手写面板js服务。 * 作者:黄金锋 (549387177@qq.com) * 日期:2015-11-15 15:51:01 * 版本:version 1.0 */ (function (window, document, $) { 'use strict'; // Get a regular interval for drawing to the screen window.requestAnimFrame = (function (callback) { return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimaitonFrame || function (callback) { window.setTimeout(callback, 1000/60); }; })(); /* * Plugin Constructor */ var pluginName = 'jqSignature', defaults = { lineColor: '#222222', lineWidth: 1, border: '1px dashed #CCFF99', background: '#FFFFFF', width: 500, height: 200, autoFit: false }, canvasFixture = '<canvas></canvas>'; function Signature(element, options) { // DOM elements/objects this.element = element; this.$element = $(this.element); this.canvas = false; this.$canvas = false; this.ctx = false; // Drawing state this.drawing = false; this.currentPos = { x: 0, y: 0 }; this.lastPos = this.currentPos; // Determine plugin settings this._data = this.$element.data(); this.settings = $.extend({}, defaults, options, this._data); // Initialize the plugin this.init(); } Signature.prototype = { // Initialize the signature canvas init: function() { // Set up the canvas this.$canvas = $(canvasFixture).appendTo(this.$element); this.$canvas.attr({ width: this.settings.width, height: this.settings.height }); this.$canvas.css({ boxSizing: 'border-box', width: this.settings.width + 'px', height: this.settings.height + 'px', border: this.settings.border, background: this.settings.background, cursor: 'crosshair' }); // Fit canvas to width of parent if (this.settings.autoFit === true) { this._resizeCanvas(); } this.canvas = this.$canvas[0]; this._resetCanvas(); // Set up mouse events this.$canvas.on('mousedown touchstart', $.proxy(function(e) { this.drawing = true; this.lastPos = this.currentPos = this._getPosition(e); }, this)); this.$canvas.on('mousemove touchmove', $.proxy(function(e) { this.currentPos = this._getPosition(e); }, this)); this.$canvas.on('mouseup touchend', $.proxy(function(e) { this.drawing = false; // Trigger a change event var changedEvent = $.Event('jq.signature.changed'); this.$element.trigger(changedEvent); }, this)); // Prevent document scrolling when touching canvas $(document).on('touchstart touchmove touchend', $.proxy(function(e) { if (e.target === this.canvas) { e.preventDefault(); } }, this)); // Start drawing var that = this; (function drawLoop() { window.requestAnimFrame(drawLoop); that._renderCanvas(); })(); }, // Clear the canvas clearCanvas: function() { this.canvas.width = this.canvas.width; this._resetCanvas(); }, // Get the content of the canvas as a base64 data URL getDataURL: function() { return this.canvas.toDataURL(); }, reLoadData: function () { this.$canvas.remove(); this._data = this.$element.data(); //for (var i in this.settings) { // alert(i+":"+this.settings[i]); //} //this.settings = $.extend({}, defaults, this._data); this.init(); }, // Get the position of the mouse/touch _getPosition: function(event) { var xPos, yPos, rect; rect = this.canvas.getBoundingClientRect(); event = event.originalEvent; // Touch event if (event.type.indexOf('touch') !== -1) { // event.constructor === TouchEvent xPos = event.touches[0].clientX - rect.left; yPos = event.touches[0].clientY - rect.top; } // Mouse event else { xPos = event.clientX - rect.left; yPos = event.clientY - rect.top; } return { x: xPos, y: yPos }; }, // Render the signature to the canvas _renderCanvas: function() { if (this.drawing) { this.ctx.moveTo(this.lastPos.x, this.lastPos.y); this.ctx.lineTo(this.currentPos.x, this.currentPos.y); this.ctx.stroke(); this.lastPos = this.currentPos; } }, // Reset the canvas context _resetCanvas: function() { this.ctx = this.canvas.getContext("2d"); this.ctx.strokeStyle = this.settings.lineColor; this.ctx.lineWidth = this.settings.lineWidth; }, // Resize the canvas element _resizeCanvas: function() { var width = this.$element.outerWidth(); this.$canvas.attr('width', width); this.$canvas.css('width', width + 'px'); } }; /* * Plugin wrapper and initialization */ $.fn[pluginName] = function ( options ) { var args = arguments; if (options === undefined || typeof options === 'object') { return this.each(function () { if (!$.data(this, 'plugin_' + pluginName)) { $.data(this, 'plugin_' + pluginName, new Signature( this, options )); } }); } else if (typeof options === 'string' && options[0] !== '_' && options !== 'init') { var returns; this.each(function () { var instance = $.data(this, 'plugin_' + pluginName); if (instance instanceof Signature && typeof instance[options] === 'function') { var myArr=Array.prototype.slice.call( args, 1 ); returns = instance[options].apply(instance, myArr); } if (options === 'destroy') { $.data(this, 'plugin_' + pluginName, null); } //if (options === 'reLoadData') { // //this.$canvas.remove(); // $.data(this, 'plugin_' + pluginName, null); // this._data = this.$element.data(); // this.settings = $.extend({}, defaults, options, this._data); // this.init(); //} }); return returns !== undefined ? returns : this; } }; })(window, document, jQuery);
/** * 功能:使用该jQuery插件来制作在线签名或涂鸦板,用户绘制的东西可以用图片的形式保存下来。 * 作者:黄金锋 (549387177@qq.com) * 日期:2015-11-16 13:51:01 * 版本:version 1.0 */ var WritingPad = function () { var current = null; $(function () { initHtml(); initTable(); initSignature(); if ($(".modal")) { $(".modal").modal("toggle"); } else { alert("没用手写面板"); } $(document).on("click", "#myClose,.close", null, function () { $('#mymodal').modal('hide'); $("#mymodal").remove(); }); $(document).on("click", "#mySave", null, function () { var myImg = $('#myImg').empty(); var dataUrl = $('.js-signature').jqSignature('getDataURL'); var img = $('<img>').attr('src', dataUrl); $(myImg).append($('<p>').text("图片保存在这里")); $(myImg).append(img); }); $(document).on("click", "#myEmpty", null, function () { $('.js-signature').jqSignature('clearCanvas'); }); $(document).on("click", "#myBackColor", null, function () { $('#colorpanel').css('left', '95px').css('top', '45px').css("display", "block").fadeIn(); //$("canvas").css("background", "#EEEEEE"); $("#btnSave").data("sender", "#myBackColor"); }); $(document).on("click", "#myColor", null, function () { $('#colorpanel').css('left', '205px').css('top', '45px').css("display", "block").fadeIn(); $("#btnSave").data("sender", "#myColor"); }); $(document).on("mouseover", "#myTable", null, function () { if ((event.srcElement.tagName == "TD") && (current != event.srcElement)) { if (current != null) { current.style.backgroundColor = current._background } event.srcElement._background = event.srcElement.style.backgroundColor; //$("input[name=DisColor]").css("background-color", event.srcElement.style.backgroundColor); //var color = event.srcElement.style.backgroundColor; //var strArr = color.substring(4, color.length - 1).split(','); //var num = showRGB(strArr); //$("input[name=HexColor]").val(num); current = event.srcElement; } }); $(document).on("mouseout", "#myTable", null, function () { if (current != null) current.style.backgroundColor = current._background }); $(document).on("click", "#myTable", null, function () { if (event.srcElement.tagName == "TD") { var color = event.srcElement._background; if (color) { $("input[name=DisColor]").css("background-color", color); var strArr = color.substring(4, color.length - 1).split(','); var num = showRGB(strArr); $("input[name=HexColor]").val(num); } } }); $(document).on("click", "#btnSave", null, function () { $('#colorpanel').css("display", "none"); var typeData = $("#btnSave").data("sender"); var HexColor = $("input[name=HexColor]").val(); var data = $(".js-signature").data(); if (typeData == "#myColor") { data["plugin_jqSignature"]["settings"]["lineColor"] = HexColor; $('.js-signature').jqSignature('reLoadData'); } if (typeData == "#myBackColor") { data["plugin_jqSignature"]["settings"]["background"] = HexColor; $('.js-signature').jqSignature('reLoadData'); } }); $("#mymodal").on('hide.bs.modal', function () { $("#colorpanel").remove(); $("#mymodal").remove(); $("#myTable").remove(); }); }); function initHtml() { var html = '<div class="modal" id="mymodal">' + '<div class="modal-dialog">' + '<div class="modal-content">' + '<div class="modal-header">' + '<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span> <span class="sr-only">Close</span></button>' + '<h4 class="modal-title">手写面板</h4>' + '</div>' + '<div class="modal-body">' + '<div class="js-signature" id="mySignature">' + '</div>' + '<div>' + '<button type="button" class="btn btn-default" id="myEmpty">清空面板</button>' + '<button type="button" class="btn btn-default" id="myBackColor">设置背景颜色</button>' + //'<div style="position:absolute;relative">' + '<button type="button" class="btn btn-default" id="myColor">设置字体颜色</button>' + '<div id="colorpanel" style="position:absolute;z-index:99;display:none"></div>' + //'</div>'+ '</div>' + '</div>' + '<div class="modal-footer">' + '<button type="button" class="btn btn-default" id="myClose">关闭</button>' + '<button type="button" class="btn btn-primary" id="mySave">保存</button>' + '<div id="myImg">' + '<div>' + '</div>' + '</div>' + '</div>' + '</div>'; $('body').append(html); } function initTable() { var colorTable = ""; var ColorHex = new Array('00', '33', '66', '99', 'CC', 'FF'); var SpColorHex = new Array('FF0000', '00FF00', '0000FF', 'FFFF00', '00FFFF', 'FF00FF'); for (var i = 0; i < 2; i++) { for (var j = 0; j < 6; j++) { colorTable = colorTable + '<tr height=12>'; colorTable = colorTable + '<td width=11 style="background-color:#000000"></td>'; if (i == 0) { colorTable = colorTable + '<td width=11 style="background-color:#' + ColorHex[j] + ColorHex[j] + ColorHex[j] + '"></td>'; } else { colorTable = colorTable + '<td width=11 style="background-color:#' + SpColorHex[j] + '"></td>'; } //colorTable = colorTable + '<td width=11 style="background-color:#000000"></td>'; for (var k = 0; k < 3; k++) { for (l = 0; l < 6; l++) { colorTable = colorTable + '<td width=11 style="background-color:#' + ColorHex[k + i * 3] + ColorHex[l] + ColorHex[j] + '"></td>'; } } colorTable = colorTable + '</tr>'; } } colorTable = '<table border="1" id="myTable" cellspacing="0" cellpadding="0" style="border-collapse: collapse;cursor:pointer;" bordercolor="000000">' + colorTable + '</table>' + '<table width=225 border="0" cellspacing="0" cellpadding="0" style="border:1px #000000 solid;border-collapse: collapse;background-color:#000000">' + '<tr style="height:30px">' + '<td colspan=21 bgcolor=#cccccc>' + '<table cellpadding="0" cellspacing="1" border="0" style="border-collapse: collapse">' + '<tr>' + '<td width="3"><input type="text" name="DisColor" size="6" disabled style="border:solid 1px #000000;background-color:#ffff00"></td>' + '<td width="3"><input type="text" name="HexColor" size="7" style="border:inset 1px;font-family:Arial;" value="#000000"></td>' + '<td width="3"><button type="button" class="btn btn-primary btn-sm" id="btnSave">确认</button></td>' + '</tr>' + '</table>' + '</td>' + '</tr>' + '</table>'; $("#colorpanel").append(colorTable); } function initSignature() { if (window.requestAnimFrame) { var signature = $("#mySignature"); signature.jqSignature({ width: 500, height: 200, border: '1px solid red', background: '#16A085', lineColor: '#ABCDEF', lineWidth: 2, autoFit: false }); //{ width: 600, height: 200, border: '1px solid red', background: '#16A085', lineColor: '#ABCDEF', lineWidth: 2, autoFit: true } } else { alert("请加载jq-signature.js"); return; } } function showRGB(arr) { hexcode = "#"; for (x = 0; x < 3; x++) { var n = arr[x]; if (n == "") n = "0"; if (parseInt(n) != n) return alert("RGB颜色值不是数字!"); if (n > 255) return alert("RGB颜色数字必须在0-255之间!"); var c = "0123456789ABCDEF", b = "", a = n % 16; b = c.substr(a, 1); a = (n - a) / 16; hexcode += c.substr(a, 1) + b } return hexcode; } function init() { } return { init: function () { init(); } }; }
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!