康廷數位: Cordova Android App

Visual Studio 2015 Cordova 開發工具

使用者透過手指與行動裝置進行互動，透過監聽觸控事件便能建立支援行動裝置互動功能的網頁。最基本的觸控事件有 touchstart , touchend與touchmove，針對這三個事件新增監聽器如下：

canvas.addEventListener('touchmove', function (event) {

// 手指按住螢幕移動

}, false);

canvas.addEventListener('touchstart', function (event) {

// 手指按住螢幕

}, false);

canvas.addEventListener('touchend', function () {

// 手指放開螢幕

}, false);

現在建立一個網頁，並且於其中配置內容如下：

</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>

<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>

</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並安裝於手機，執行後得到以下的結果畫面，直接以手指觸控即可描繪圖形線條。

Visual Studio 2015 Cordova 開發工具

康廷數位

Cordova Android App - 塗鴉板

沒有留言: