WinMK Live: Notatki o Windows 8

Aplikacje Metro w Java Script: używanie Canvas, transformacje w CSS3, przetwarzanie plików graficznych.

SVG and Canvas are effective graphics tools that can be used to create fast, lightweight vector graphics that display in web applications using JavaScript and HTML.

Canvas

If you don't set width and height attributes, the canvas appears at its default size of 300 pixels wide and 150 pixels high. By default, your app renders the canvas element with no content or border - it’s completely transparent. However, you can style it just like any normal image by specifying a margin, border, background, and so forth. To draw to the canvas, you obtain a rendering context from the canvas and use it to draw. There are different types of rendering contexts that enable you to draw in different ways. For example, there’s a 2-D context for 2-D graphics and a 3-D context for 3-D graphics.

fillRect (x, y, width, height), strokeRect(x, y, width, height), clearRect(x, y, width, height)

window.onload = draw;

function draw() {

// Get the canvas element.

var canvas = document.getElementById("canvas");

// Specify a 2d drawing context.

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

// Set the color to the RBG equivalent of gold.

context.fillStyle = "rgb(255, 215, 0)";

// Draw the rectangle.

context.fillRect (15, 15, 55, 50);

// Set the color to the RBG equivalent of purple and

// set the opacity of the rectangle to 50 percent.

context.fillStyle = "rgba(0, 0, 200, 0.5)"

// Draw the rectangle.

context.fillRect (40, 40, 45, 40);

}

Internally, paths are stored as a list of sub-paths (lines, arcs, etc) which together form a shape. Every time the beginPath method is called, the list is reset and we can start drawing new shapes.

Before drawing any lines you’ll need to call the moveTo function. The moveTo function doesn’t draw anything, it is like placing a pen or pencil on spot you want to begin drawing the triangle.

// Add the brown triangle.

context.beginPath();

context.moveTo(28, 20);

context.lineTo(78, 50);

context.lineTo(28, 78);

context.lineTo(28, 20);

// Set the color to the hexadecimal equivalent of brown.

// Omit this step and the triangle will render

// the default color of black.

context.fillStyle = "#996633";

// Draw the triangle.

context.fill();

context.arc(x, y, radius, startingAngle, endingAngle, antiClockwise);

// Start the path.

context.beginPath();

// Define the stroke color in RGB for blue.

context.strokeStyle = "rgb(0, 162, 232)";

// Define the circle using an arc.

context.arc(50, 50, 32, 0, 2 * Math.PI, true);

// draw the circle.

context.stroke();

Curves are used to draw complex shapes. There are two types of curves; the Bezier or cubic, and the quadratic. Both have a start and end point on the canvas however how the curve is drawn is based on a control point or points. The quadratic curve has one control point, while a cubic Bezier curve uses two control points. Curves are always contained in a path.

Quadratic curve

quadraticCurveTo(cp1x, cp1y, X, Y)

The four parameters are two pairs of X, Y coordinates, the first; cp1x and cp1y is the location of the control point on the curve and the second pair is the location of the end of the curve.

// Create the path.

context.beginPath();

// Set the starting point for the curve.

context.moveTo(75,25);

// Set each of the curves.

context.quadraticCurveTo(10, 80, 40, 130);

context.quadraticCurveTo(30, 90, 50, 130);

context.quadraticCurveTo(50, 100, 70, 130);

context.quadraticCurveTo(80, 110, 100, 130);

context.quadraticCurveTo(120, 120, 140, 130);

// Set the color of the image to green.

context.fillStyle = "rgb(100, 200, 50)";

// Draw the image.

context.fill();

Bezier curve

bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)

The six parameters are three pairs of X, Y coordinates; cp1x and cp1y is the location of the first control point on the curve, cp2x and cp2y is the location of the second control point, and the third pair is the location of the end of the curve.

Timing animation

setInterval (animationFunction milliseconds);

setTimeout (animationFunction milliseconds);

Both setInterval and setTimeout methods have two parameters; the name of the function that draws the animation, and the number of milliseconds between each call to the animation function. Both methods call the animationFunction for the set number of milliseconds. The difference is that the setInterval method calls the animationFunction and waits for so many milliseconds. The setTimeout method executes after the milliseconds have passed.

Drawing

You'll need to clear the canvas before drawing each frame. There are various methods for clearing a canvas, or parts of an image, such as clearing certain areas using the globalCompositOperation property or by clipping paths using the clip method. The simplest way to clear a canvas is to use the clearRect method.

When drawing your image you might change some of the settings such as styles or transformations. If you want to use the original settings when you begin each redraw of the image, you can use the save method. The save and restore methods are used to save and retrieve the canvas state on a stack. The canvas state consists of all of the styles and transformations that have been applied. Every time the save method is called the current canvas state is saved on the stack. The restore method returns the lastest saved state from the stack.

The translate method is used to move the canvas and its origin to a different point in the canvas grid. This method takes two arguments; x is the amount the canvas is moved to the left or right, and y is the amount it's moved up or down.

It's a good idea to save the canvas state before doing any transformations as it is easier to call the restore method than having to do a reverse translation to return the canvas to its original state.

The rotate method is used to rotate the canvas around the current origin. This method has only one parameter and that’s the angle the canvas is rotated, measured in radians. The rotation moves clockwise, and the rotation center point is always the canvas origin (the top left corner). To move the center point you’ll need to move the canvas using the translate method.

window.onload = init;

function init(){

setInterval(draw, 400);

}

function draw() {

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

// The clearRect method displays a single circle.

// context.clearRect(0, 0, 160, 160);

// Save the canvas state.

context.save();

// centers the image on the canvas

context.translate(80, 80);

// Rotate moves the spiraling circle around the canvas in a large orbit.

var time = new Date();

context.rotate( ((2*Math.PI)/60)*time.getSeconds() + ((2*Math.PI)/60000)*time.getMilliseconds() );

// Translate determines the location of the small circle.

context.translate(50, 0);

// Rotate causes the circle to spiral as it circles around the canvas.

context.rotate( ((2*Math.PI)/6)*time.getSeconds() + ((2*Math.PI)/6000)*time.getMilliseconds() );

// determines the size of the loop

context.translate(0, 5);

// This draws the circle

context.beginPath();

context.arc(5, 5, 4, 0, Math.PI*2, true);

context.stroke();

// Restores the canvas to the previous state

context.restore();

}

Transforming with CSS

Support for Cascading Style Sheets, Level 3 (CSS3) Transforms by Metro style apps enable you to manipulate one or more UI elements in 2-D and 3-D space at run time. Specifically, CSS3 2D Transforms enable you to translate (move), rotate, scale, and skew objects in 2-D space. CSS3 3D Transforms support these same transformations in 3-D space with the added ability to simulate a sense of depth through a perspective transform. When multiple transformations are specified individually, the results of the transformations are cumulative and depend on the order in which they are applied.

CSS3 2D Transforms

The -ms-transform-origin property can be used with -ms-transform to indicate the origin of transformation for an element. By default, the origin is the center (50% 50%) of the bounding box of the element being transformed with (0% 0%) indicating the top left corner where the x-axis points to the right and the y-axis points down.

-ms-transform: translate

translate(tx,[ty]) - If ty is not specified, the default value is zero. (Translation-value parameters can be either percentages or lengths.)
translateX(tx)
translateY(ty)

-ms-transform-origin has no effect on the results of the translate function.

var transformString = 'translateX(' + tx + 'px) translateY(' + ty + 'px)';