How to convert a rectangle to TRBL CSS rect value?
- by VLostBoy
I'm not quite sure how to put this, but here goes...
The css clip attribute is defined like so: rect(top, right, bottom, left). However, I'm exploring the use of a custom Rectangle 'class' to encapsulate some operations. The rectangle class has the attributes height, width and x, y.
The x and y values are encapsulated in a Point object, and the height and width are encapsulated in a Dimension object, the rectangle being a composite of a point (its top-left location) and a dimension (width and height).
So far so good. I though it would be pretty simple on the basis of having the rectangles x, y, width and height values to define the css rect attribute in terms of top, right, bottom, left, but I've become hopelessly confused- I've been googling for a while, and I can't seem to find any documentation as to what the TRBL values actually are or what they represent. For example, should I be thinking in terms of co-ordinates, in which case, surely I can describe the rectangle as a css rect using the rectangles x position for Top, x position + width for Right, the rectangles height + y for Bottom and its y position for Left... but thats a load of BS, surely?
Also, surely rect is actually an inset, or have I just inverted my understanding of clip? I'd appreciate some advice. What I want to be able to do is
(i) Define a rectangle using x, y, width and height
(ii)Express the rectangle in TRBL form so that I can manipulate a divs clipping behaviour
(iii)Change x, y, width or height and recalculate in terms of TRBL and goto (ii)
I appreciate there are some other factors here, and some intermediary transforms to be done, but I've confused myself pretty badly-
Can anyone give me some pointers?
