使用HTML 5画布构建的ASP .net签名控件不适用于Ipad [英] ASP .net signature control built using HTML 5 canvas does not work with Ipad
本文介绍了使用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;
}
< br $>
谢谢，
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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
