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 |
|