Comic Director - Transform Your Apps with Powerful JavaScript* Libraries

One of the huge benefits associated with writing apps in HTML5 is the wide array of people and resources available to help you build apps. New functionality and capabilities can be added to HTML5 applications with ease due to extensive JavaScript libraries available to developers. The Comic Director application was able to give users the ability to rotate, scale, and drag objects like clip art and bubble captions within the application due to the MIT-licensed JavaScript library called Raphael.js and its companion extension called Free Transform. The use of this JavaScript library was incredibly valuable to the Comic Director development team because of the amount of time and effort saved from not having to build this functionality into the app from the ground up.

Example: You can rotate, scale, and drag clip art inside Comic Director thanks to Raphael.js

Supported Image Types
The Raphael JavaScript library makes it easier to work with Scalable Vector Graphics (SVG) for HTML5 apps since it uses the SVG W3C Recommendation and VML as a base for creating graphics. The SVG standard was developed by W3C in 1999 and continues to draw wide support from all the major modern web browsers, making Raphael a logical addition to the Comic Director application. The SVG standard can handle three types of graphic elements including vector (.svg), raster (.jpeg, .gif, .png), and text. This flexibility to handle many different image types was also a key reason for choosing Raphael.js.

Getting Started
To begin working with Raphael.js, an HTML file, an image, and a JavaScript file are created. The JavaScript file can be applied a naming convention like “app.js”. This file is where Raphael and Free Transform are used to make an interactive, scalable, and rotatable element. Sources to the Raphael.js and Free Transform.js frameworks are included in the HTML file as well, shown in the example below:

		<script type="text/javascript" src=" prefixfree.min.js"></script>
		<script type="text/javascript" src="raphael-min.js"></script>
		<script type="text/javascript" src="raphael.free_transform.js"></script> 
		<script type="text/javascript" src="app.js"></script>

The <body> tag in the HTML file is left empty as a full-page paper canvas is created using Raphael instead.

Creating the Canvas
To initialize Raphael and create a full page paper canvas that acts as the container for the vector image, the following code is used:

var paper = Raphael(
	0,                 // x
	0,                 // y
	window.innerWidth, // width
	window.innerHeight // height

A smaller canvas can be produced by adjusting the width and height parameters here as well. The x and y inputs can be used to change the position of that canvas and vector image within the browser window.

Adding Vector Images to the Canvas
After a canvas is created, a vector image can be added with the following code:

var image = paper.image(
	'logo.svg',  // img src
	ww / 4,      // x, ww = window.innerWidth
	wh / 4,      // y, wh = window.innerHeight
	ww / 2,      // width
	wh / 2       // height

The paper.image() is a function that creates and adds the vector image to the paper canvas with the given options. The variable name “image” is assigned so that the image and the options can be sent to the Free Transform controller later on.

Free Transform Controller
The code below defines and sets options that will be used by the Free Transform controller:

transformerOptions = {
	keepRatio:  ['axisX','axisY'],
        draw:       ['image'],
        scale:      ['axisX', null],
        rotate:     ['axisX', null],
        drag:       [null, 'self'],
        attrs: {
            cursor: "pointer"

These options are identical to those used for vector objects in the Comic Director application. Experimenting with these parameters can lead to various user experiences for manipulating images within applications.

The final step involves handing the vector image to the Free Transform controller with the following code:

transformer = paper.freeTransform(image, transformerOptions)

The code will give the Raphael paper canvas the transform controller with the vector image and selected options, and enable the Free Transform image manipulation functionality.

JavaScript libraries like Raphael.js offer incredibly powerful solutions and functionality for HTML5 applications. These libraries help developers more easily and quickly implement new functionality within applications without having to code entirely from scratch. Raphael.js was a particularly valuable tool when building Comic Director because it gave the development team a solution to include image manipulation capabilities for both touch and mouse input for users across a broad spectrum of platforms. In addition, Raphael’s ability to handle a wide range of image types due to its use of the SVG W3C specification helped create more flexible development and user experiences.

Learn more about HTML5 application development at the Intel Developer Zone. Check out the new HTML5 Development Environment.

Intel HTML5 Development Environment:
The XDK is the world’s first HTML5 powered mobile application development tool. With it, you can create, debug and build customized, robust HTML5 apps in hours, and the XDK runs on either Mac or PC Platforms. Build hybrid HTML5 apps for iOS, Android, Windows 8 and Tizen tablets and smartphones, as well as HTML5 web apps for Facebook, Google and other hosting platforms.

For more complete information about compiler optimizations, see our Optimization Notice.

1 comment

Balint M.'s picture

Reading this I thought you might be interested in the humble comic.js:

Add a Comment

Have a technical question? Visit our forums. Have site or software product issues? Contact support.