使用者透過手指與行動裝置進行互動，透過監聽觸控事件便能建立支援行動裝置互動功能的網頁。最基本的觸控事件有 touchstart , touchend與touchmove，針對這三個事件新增監聽器如下 ：
canvas.addEventListener('touchmove', function (event) {
// 手指按住螢幕移動
}, false);
canvas.addEventListener('touchstart', function (event) {
// 手指按住螢幕
}, false);
canvas.addEventListener('touchend', function () {
// 手指放開螢幕
}, false);
現在建立一個網頁，並且於其中配置內容如下：
<div id="touchbody" >
<span id="msg" style="color: royalblue; font-size: 36px;"></span>
</div>
於其中配置以下的 JavaScript 觸控事件程式碼：
var body = document.getElementById('touchbody');
body.addEventListener('touchmove', function (event) {
event.preventDefault();
document.getElementById('msg').innerHTML =
event.changedTouches[0].pageX.toString() + ',' +
event.changedTouches[0].pageY.toString();
}, false);
body.addEventListener('touchstart', function (event) {
document.getElementById('msg').innerHTML = 'TOUCHSTART';
}, false);
body.addEventListener('touchend', function () {
document.getElementById('msg').innerHTML = 'TOUCHEND'; },
3000);
}, false);
這段程式碼監控了上述三個觸控事件，於使用者以手指觸擊螢幕時，顯示 TOUCHSTART 訊息，手指離開螢幕時顯示 TOUCHEND ，如果手指在畫面上移動時，動態呈現手指的座標位置。以下的是三種不同事件觸發時的螢幕畫面：
瞭解相關的技巧，現在我們透過 Cordova 開發行動App版的簡易塗鴉板，於 Visual Studio 2015 建立一個空的 Cordova 專案，開啟Index.html ，於其中配置以下的內容：
<body>
<h1 style="color:royalblue;"><b>Canvas Demo</b></h1>
<div style="text-align:center;">
<canvas id="pCanvas" width=286 height=360
style="cursor:crosshair;background-color:black;" ></canvas>
<button type="button" id="cbutton" style="width:300px;">Clear</button>
</div>
<!-- Cordova 參考，建置後會加入您的應用程式。 -->
<script src="cordova.js"></script>
<script src="scripts/platformOverrides.js"></script>
<script src="scripts/index.js"></script>
</body>
這段配置會建立一個支援手繪操作Canvas與一個用來清空畫面的按鈕。接下來切換至index.js，首先完成觸控事件的程式碼。
function touchstart(e) {
var x = e.changedTouches[0].pageX - this.offsetLeft;
var y = e.changedTouches[0].pageY - this.offsetTop;
context.beginPath();
context.lineWidth = 1;
context.strokeStyle = '#ffffff';
context.moveTo(x, y);
paint = true;
}
function touchmove(e) {
e.preventDefault();
if (paint) {
var x = e.changedTouches[0].pageX - this.offsetLeft;
var y = e.changedTouches[0].pageY - this.offsetTop;
context.lineTo(x, y);
context.stroke();
}
}
function touchend(e) {
paint = false;
}
touchstart、touchmove與touchend分別提供Canvas同名事件的回應功能，於onDeviceReady函式中，完成事件註冊。
function onDeviceReady() {
canvas = document.getElementById("pCanvas");
context = canvas.getContext("2d");
canvas.ontouchstart = touchstart;
canvas.ontouchmove = touchmove;
canvas.ontouchend = touchend ;
document.getElementById('cbutton').onclick =
function () { context.clearRect(0, 0, canvas.width, canvas.height) };
};
最後一段程式碼則提供清空按鈕的Canvas內容移除功能。現在編譯apk並安裝於手機，執行後得到以下的結果畫面，直接以手指觸控即可描繪圖形線條。
沒有留言:
張貼留言