Drawing on screen by finger touch in Windows Store App

Introduction

In some mobile projects, Many times I have come across about the requirement of drawing some figure on a mobile screen in a specified area by using the finger touch. Below is an example of very simple drawing mechanism in WinRT environment.

Description

To begin with the example, we must think about the logic of implementing the same. So considering the idea of drawing on screen, the primary thought coming to mind is CANVAS.

Yes, we will use the canvas object here to draw the objects on screen.

Html file content
The Html file content is very simple. We will only add a canvas to it.

<canvas id="signCanvas" class="signCanv"></canvas>

CSS file content

.signCanv{
background-color:white;
}

This just a style class to make the canvas background appear white.

JS file cotent

app.onready = function(args) {
var mouseClicked = 0;</code>

var spnDevice = document.getElementById("spnDevice");
var imgdevice = document.getElementById("imgDevice");
var canvas = document.getElementById("signCanvas");

var context = canvas.getContext("2d");

canvas.addEventListener("MSPointerDown", function (evt) {
var pointerDevice = evt.currentPoint;
context.beginPath();
context.moveTo(pointerDevice.position.x, pointerDevice.position.y);
mouseClicked = 1;
});

canvas.addEventListener("MSPointerMove", function (evt) {
if (mouseClicked == 1) {
var pointerDevice = evt.currentPoint;
context.lineTo(pointerDevice.rawPosition.x, pointerDevice.rawPosition.y);
context.strokeStyle = "red";
context.stroke();
}
});

canvas.addEventListener("MSPointerUp", function (evt) {
mouseClicked = 0;
});
}

We have added MSPointerDown, MSPointerMove and MSPointerUp events to track the touch happened, continuing and finger lifted from screen respectively. This application can also run in a desktop having Win8 installed and user can draw objects using mouse.

Summary

This is just a simple example of drawing objects on screen. By following the same process we can draw objects on screen using a mouse or a pen.

Thanks !!

Written By: Nirmal Hota, Cross-Platform Mobile Lead, Mindfire Solutions

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s