Canvas Library
 

clipT Library Method

Short Description: Select Part / Clip-To Part using three points

Signature: t.clipT (s,t,ws,wt,hs,ht) or (l,r,b)
Group: Shape
Class: transition Class
 

In most cases, clipT is used to animate a part of the (image of the) element associated with the transition. As parameters it receives the coordinates of three points on the HTML page, that usually are inside the HTML element associated with the transition.

If the transition is of class triangle, then the 3 points are the 3 corners of the triangle. If the transition is of the "Transition Class" then the selected portion is a parallelogram whereby the 3 points are 3 corners of the parallelogram and the fourth is calculated automatically.

In the first form (s,t) are the coordinates of the first point, (ws+s,wt+t) the second and (hs+s,ht+t) the third. So in fact (ws,wt) is a vector giving the width and (hs,ht) the height. If wt=hs=0 then the triangle is right-angled and the parallelogram is in fact a rectangle of width ws and height ht.

In the (l,r,b) form l, r, and b must be Position Specifications of the 3 points.

HTML Element
With some text.

ws,wt,hs, and ht can be negative. Normally l is the left-top corner r the right-top corner and b the left-bottom corner of the selected part. This is, however, not strictly required.

There is also no restriction that reqires the selected part to be really completely contained inside the element. If this is not the case, parts of the texture canvas outside the selected elements will be shown. It is the responsibility of the user to paint the texture canvas accordingly.

taccgl.actor("htmlel30",taccgl.triangle).clipT({ox:11,oy:11},{rx:1,oy:11,ox:-11},{oy:250,ox:100}). dur(3). start();
RUN
taccgl.actor("htmlel30",taccgl.triangle).clipT({},{rx:1},{rx:0.5,ry:0.5}). dur(3). start();
RUN
taccgl.actor("htmlel30",taccgl.triangle).clipT({},{rx:0.5},{rx:0.5,ry:0.5}). dur(3). start();
RUN
taccgl.actor("htmlel30",taccgl.triangle).clipT({},{rx:1},{rx:0.5,ry:0.5}). from({oy:-100}).dur(3). start();
taccgl.actor("htmlel30",taccgl.triangle).clipT({ry:1},{ry:1,rx:1},{rx:0.5,ry:0.5}). from({oy:100}).dur(3). start();
taccgl.actor("htmlel30",taccgl.triangle).clipT({},{ry:1},{rx:0.5,ry:0.5}). from({ox:-100}).dur(3). start();
taccgl.actor("htmlel30",taccgl.triangle).clipT({rx:1},{rx:1,ry:1},{rx:0.5,ry:0.5}). from({ox:100}).dur(3). start();
RUN
Sample HTML Element containing some text.

ClipT is a quite complex method that changes size, position, and mapped texture of the transition. If methods like from, to, and position are used before clipT, they refer to the top-left corner of the original element, if they are used afterwards, they refer to the corner specified by (s,t) or l.

var t=taccgl.actor("htmlel15"); t.clipT({},{rx:0.5},{rx:0.5,ry:0.5}). dur(3). start();
RUN
var t=taccgl.actor("htmlel15"); t.clipT({ry:0.2},{rx:0.2},{rx:0.8,ry:1}). from({hx:-2,hy:-2}). dur(3). start();
taccgl.actor("htmlel15",taccgl.triangle).clipT({ry:0.2},{rx:0.8,ry:1},{rx:0,ry:1}). from({hx:2,hy:2}) .dur(3). start();
taccgl.actor("htmlel15",taccgl.triangle).clipT({rx:0.2},{rx:1,ry:0},{rx:1,ry:0.8}). from({hx:2,hy:2}) .dur(3). start();
RUN
Next Page:transition.clipTFrom - Animate Clipping - Set starting point
Previous Page: transition.clipTo - Animate Clipping - Set Rectangular End Point