HTML 5 Canvas 3D Library
 

mapClip Library Method

Short Description: Clip mapped texture

Signature: t.mapClip (w,h,pos,overflow)
Group: Texture
Class: transition Class
 

Maps a rectangular portion of the currently mapped texture to the animated object. w is the with and h the height of the portion. pos may be "tr" for the top-right, "tl" for the top-left, "br" for the bottom-right, and "bl" for bottom-left portion. pos can also be "t" for the top, "b" for the bottom, "l" for the left, and "r" for the right portion. Normally w and h are automatically clipped to the size of the current portion. This behaviour can be disabled using overflow="b" for h, overflow="r" for w and overflow="br" for both w and h.

mapClip is similar to map with the difference that the coordinates are determinated automatically based on pos and overflow. See also mapClipToElement for more examples.

This is a test div with id="testdiv" for the samples below. Left and Right

Examples

var a=taccgl.actor("testimg");a.mapClip(a.w/2,a.h,"tr").start(); RUN
var a=taccgl.actor("testimg");a.mapClip(a.w/2,a.h,"br").resize(a.w/2,a.h).start(); RUN
var a=taccgl.actor("testimg");a.mapClip(a.w/2,a.h,"tr").resize(a.w/2,a.h).position(a.x+a.w/2,a.y,0).start(); RUN
var a=taccgl.actor("testdiv");a.mapClip(50,20,"tl").resize(50,20).start(); RUN
var a=taccgl.actor("testdiv");a.mapClip(50,20,"tr").resize(50,20).start(); RUN
var a=taccgl.actor("testdiv");a.mapClip(50,20,"bl").resize(50,20).start(); RUN
var a=taccgl.actor("testdiv");a.mapClip(50,20,"br").resize(50,20).start(); RUN

WebGL™ is a trademark of the Khronos Group Inc.

Next Page:transition.mapClipToElement - Clips the currently mapped texture to the size of the animated object
Previous Page: transition.mapRelative - Map texture relative to current HTML element