Canvas Animation Library
 

map Library Method

Short Description: Map rectangular portion of texture canvas

Signature: t.map (s,t,w,h) or (l,r)
Group: Texture
Class: transition Class
 

Maps a rectangular portion of the Texture Canvas as texture on to the animated object. (s,t) specify the coordinates of the top left point of the portion. w is the width and h the height. Default is the position, width, and height of the HTML element associated with the transition.

Sample HTML element with id="mini"

Alternatively the top left and bottom right points l and r can be given using a Position Specification, which will be resolved into coordinates.

It is the users responsibility to draw the desired content on the selected portion of the Texture Canvas. A commen way to do this is to use paint after map, to paint an image of the HTML element on the texture canvas at the mapped position. The following example demonstrates this. The first line shows that normally the image of an HTML element gets blured when enlarged. The second line maps the same HTML element on a much larger porition of the texture canvas to compensate for that effect.

Examples

taccgl.actor("mini").posZ(0,4000).dur(5).start();
RUN
taccgl.a("mini").map(0,0,1000,1000).posZ(0,4000).paint().dur(5).start();
RUN
almost empty element with id="ex10"

Other uses are to select a portion of the HTML element or to map other HTML elements. You can also use canvas functions to draw whatever you like on the canvas and then select the approriate portion using map.

Examples

var a=taccgl.actor("testimg"); taccgl.a("ex10").map(a.x,a.y,a.w,a.h).start();
RUN
var a=taccgl.actor("testimg"); taccgl.a("ex10").map(a.x,a.y,a.w,a.h/2).start();
RUN
var a=taccgl.actor("testimg"); taccgl.a("ex10").map(a.x,a.y+10,a.w,a.h-20).start();
RUN
var a=taccgl.actor("testimg"), e=taccgl.a("ex10"); e.map(a.x,a.y,e.w,e.h).start();
RUN
taccgl.a("testimg").paint();
taccgl.a("ex10").map({el:"testimg"},{el:"testimg",ex:1,ey:1}).start();
RUN
taccgl.a("testimg").paint();
taccgl.a("ex10").map({el:"testimg"},{el:"testimg",ex:0.5,ey:1}).start();
RUN
taccgl.a("testimg").paint();
taccgl.a("ex10").map({el:"testimg",ex:1},{el:"testimg",ey:1}).start();
RUN
taccgl.a("testimg").paint();
taccgl.a("ex10").map({el:"testimg",ey:1},{el:"testimg",ex:1}).start();
RUN

Next Page:transition.mapTo - Animate mapped rectangular portion of texture canvas
Previous Page: transition.mapElement - Map other HTML element