您的位置：首页 > 移动开发 > Android开发

Android环境下使用cordova从事手写签名代码

2015-12-23 16:10 381 查看

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title></title>

</head>

<body>

<p>

<canvas id="can" width="330" height="450"

style="border: 1px solid black"></canvas>

</p>

<p>

<input type="checkbox" id="cbCalibration" onchange="onChange()" /><label

for="cbCalibration">屏幕校准</label>

</p>

<p>

<input type="button" class="c-btn-oran-big"

style="margin-top: 8px; width: 160px;" id="btnUpload" value="上传到服务器"

size="30" name="btnUpload" /> <input type="button"

class="c-btn-oran-big" style="margin-top: 8px; width: 160px;"

id="btnSave" value="保存到本地" size="30" name="btnSave" />

</p>

<script>

setWrite(false);

var canvas = document.getElementById("can");

var context = canvas.getContext("2d");//获取2D图像API接口

var cbCalibration = document.getElementById("cbCalibration");

canvas.addEventListener('touchmove', onTouchMove, false);

canvas.addEventListener('touchstart', onTouchStart, false);

canvas.addEventListener('touchend', onTouchEnd, false);

function onTouchMove(event) {

console.log("onTouchMove: bCalibration = " + bCalibration);

// 如果这个元素的位置内只有一个手指的话

if (paint) {

x = event.changedTouches[0].clientX * aArray[0] + event.changedTouches[0].clientY * aArray[1] + aArray[2];

y = event.changedTouches[0].clientX * aArray[3] + event.changedTouches[0].clientY * aArray[4] + aArray[5];

context.lineTo(x, y);

context.stroke();

console.log("onTouchMove: event.changedTouches[0].clientX = " + event.changedTouches[0].clientX + ", event.changedTouches[0].clientY = " + event.changedTouches[0].clientY);

console.log("onTouchMove: x = " + x + ", y = " + y);

}

}

function onTouchStart(event) {

console.log("onTouchStart: bCalibration = " + bCalibration);

paint = true;

x = event.changedTouches[0].clientX * aArray[0] + event.changedTouches[0].clientY * aArray[1] + aArray[2];

y = event.changedTouches[0].clientX * aArray[3] + event.changedTouches[0].clientY * aArray[4] + aArray[5];

context.moveTo(x, y);

console.log("onTouchStart: event.changedTouches[0].clientX = " + event.changedTouches[0].clientX + ", event.changedTouches[0].clientY = " + event.changedTouches[0].clientY);

console.log("onTouchStart: x = " + x + ", y = " + y);

}

function onTouchEnd(event) {

console.log("onTouchEnd: bCalibration = " + bCalibration);

paint = false;

x = event.changedTouches[0].clientX * aArray[0] + event.changedTouches[0].clientY * aArray[1] + aArray[2];

y = event.changedTouches[0].clientX * aArray[3] + event.changedTouches[0].clientY * aArray[4] + aArray[5];

console.log("onTouchEnd: event.changedTouches[0].clientX = " + event.changedTouches[0].clientX + ", event.changedTouches[0].clientY" + event.changedTouches[0].clientX);

console.log("onTouchEnd: x = " + x + ", y = " + y);

console.log("onTouchEnd: aArray[0] = " + aArray[0] + ", aArray[1] = " + aArray[1] + ", aArray[2] = " + aArray[2] + ", aArray[3] = " + aArray[3] + ", aArray[4] = " + aArray[4] + ", aArray[5] = " + aArray[5]);

context.lineTo(x, y);

context.stroke();

}

</script>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航