Cordova Android App - 塗鴉板


使用者透過手指與行動裝置進行互動,透過監聽觸控事件便能建立支援行動裝置互動功能的網頁。最基本的觸控事件有 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並安裝於手機,執行後得到以下的結果畫面,直接以手指觸控即可描繪圖形線條。





沒有留言: