![function]( "function")
本文介绍了使用HTML 5画布构建的ASP .net签名控件不适用于Ipad的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 我使用链接中的示例创建了一个签名演示代码： - 使用画布构建签名控件 [ ^ ] asp.net中的 。此示例在计算机上正常工作，但是当我从Ipad访问URL时，签名控件不起作用。请帮忙。 以下是代码： - ASPX： - Hi,I have a created a demo code for signature using the example from the link :-Building a Signature Control Using Canvas[^]in asp .net. This example works fine on computer , but when I access the url from an Ipad the signature control does not work. Please help in this.Below is the code :- ASPX :-<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %><!doctype html><html><head> <title>Signature</title> <script src="signature.js" type="text/javascript"></script> <link href="signature.css" rel="stylesheet" type="text/css" /> <script type="text/javascript"> function loaded() { var signature = new ns.SignatureControl({ containerId: 'container', callback: function () { alert('hello'); } }); signature.init(); } window.addEventListener('DOMContentLoaded', loaded, false); </script></head><body> <div id="container"> <h1> HI </h1> <asp:WebSignature id="WebSignature1" runat="server"></asp:WebSignature> </div></body></html> JAV ascript： - Javascript :- (function (ns) { "use strict"; ns.SignatureControl = function (options) { var containerId = options && options.canvasId || "container", callback = options && options.callback || {}, label = options && options.label || "Signature", cWidth = options && options.width || "300px", cHeight = options && options.height || "300px", btnClearId, btnAcceptId, canvas, ctx; function initCotnrol() { createControlElements(); wireButtonEvents(); canvas = document.getElementById("signatureCanvas"); canvas.addEventListener("mousedown", pointerDown, false); canvas.addEventListener("mouseup", pointerUp, false); ctx = canvas.getContext("2d"); } function createControlElements() { var signatureArea = document.createElement("div"), labelDiv = document.createElement("div"), canvasDiv = document.createElement("div"), canvasElement = document.createElement("canvas"), buttonsContainer = document.createElement("div"), buttonClear = document.createElement("button"), buttonAccept = document.createElement("button"); labelDiv.className = "signatureLabel"; labelDiv.textContent = label; canvasElement.id = "signatureCanvas"; canvasElement.clientWidth = cWidth; canvasElement.clientHeight = cHeight; canvasElement.style.border = "solid 2px black"; buttonClear.id = "btnClear"; buttonClear.textContent = "Clear"; buttonAccept.id = "btnAccept"; buttonAccept.textContent = "Accept"; canvasDiv.appendChild(canvasElement); buttonsContainer.appendChild(buttonClear); buttonsContainer.appendChild(buttonAccept); signatureArea.className = "signatureArea"; signatureArea.appendChild(labelDiv); signatureArea.appendChild(canvasDiv); signatureArea.appendChild(buttonsContainer); document.getElementById(containerId).appendChild(signatureArea); } function pointerDown(evt) { ctx.beginPath(); ctx.moveTo(evt.offsetX, evt.offsetY); canvas.addEventListener("mousemove", paint, false); } function pointerUp(evt) { canvas.removeEventListener("mousemove", paint); paint(evt); } function paint(evt) { ctx.lineTo(evt.offsetX, evt.offsetY); ctx.stroke(); } function wireButtonEvents() { var btnClear = document.getElementById("btnClear"), btnAccept = document.getElementById("btnAccept"); btnClear.addEventListener("click", function () { ctx.clearRect(0, 0, canvas.width, canvas.height); }, false); btnAccept.addEventListener("click", function () { callback(); }, false); } function getSignatureImage() { return ctx.getImageData(0, 0, canvas.width, canvas.height).data; } return { init: initCotnrol, getSignatureImage: getSignatureImage }; }})(this.ns = this.ns || {}); CSS： - CSS :- #signatureCanvas{ background-color: #fff;}#btnClear{ float: right; width: 88px; height: 32px; border: solid 2px #cacaca; background-color: #636363;}#btnAccept{ float: left; width: 88px; height: 32px; border: solid 2px #fff; background-color: #ff6600;}.signatureArea{ width: 300px; color: #ff6600;}.signatureArea div{ padding-left: 60px;} 谢谢，Thanks,推荐答案 这个控件肯定对你有用。我亲自将这个用于我的项目中。 http： //thomasjbradley.ca/lab/signature-pad/ [ ^ ] This control will definitely useful for you. I have personally used this for few of my project.http://thomasjbradley.ca/lab/signature-pad/[^] 它在ipad上不起作用，因为它使用了闪存的swf组件... Ipads不支持flash It will not work on ipad because it used a swf component which is flash...Ipads do not support flash 这篇关于使用HTML 5画布构建的ASP .net签名控件不适用于Ipad的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 11-02 23:22