Rect
A Rect is an object that contains the postion (Point) and measurements (Size) of the bounding box of a graphic or group, regardless of the graphic’s shape or appearance.
The Rect Object | ||
01 | [object Rect: (0.0, 0.0, 1024.0, 768.0)] |
The four numeric values of a Rect represent (in order):
Functionally, you may think of a Rect as a Point and a Size combined into a single object.
Creating a Rect Object
To create a Rect, precede the Rect class name with the “new” allocator, followed by the comma-delimited sequence of the numeric values described in the previous list: (horizontal offset, vertical offset, width, height). The result will be a Rect object:
Creating a Rect Object | ||
01 | var aRect = new Rect(0, 0, 1024, 768) | |
02 | //--> [object Rect: (0.0, 0.0, 1024.0, 768.0)] |
The position and dimensions of every graphic are contained in a Rect that is the value of the graphic’s geometry property:
Getting the Geometry of a Selected Graphic | ||
01 | document.windows[0].selection.graphics[0].geometry | |
02 | //--> [object Rect: (354.0, 235.5, 316.0, 297.0)] |
The geometry property is used quite often in OmniJS scripts, and in dealing with it, you are actually dealing with a Rect.
Rect Properties
A Rect has seven properties, all of which are editable, except the center property which has a read-only value:
size • The value of the size property is a Size object, whose elements are the width and height of the graphic or bounding box.
height • The value of the height property is a number (in points) describing the vertical measurement of the graphic or bounding box.
width • The value of the width property is a number (in points) describing the horizontal measurement of the graphic or bounding box.
origin • The value of the origin property is a Point object, describing the position of the top-left corner of the graphic or bounding box from the canvas origin.
x • The value of the x property is a number (in points) describing the distance from the canvas horizontal origin to the left side of the graphic or bounding box.
y • The value of the y property is a number (in points) describing the distance from the canvas vertical origin to the top side of the graphic or bounding box.
center (r/o) • The value of the center property is a Point object describing the position of the center of the graphic or bounding box in relation to the canvas origin.
Editing a Rect
To change the origin (position) or size of a graphic, you extract the Rect that is the value of the graphic’s geometry property, alter the extracted copy, and then assign the altered copy as the new value of the graphic’s geometry property. For example, here is a script that changes the origin (position) of a graphic:
Changing the Postion of a Graphic | ||
01 | slds = document.windows[0].selection.solids | |
02 | if(slds.length > 0){ | |
03 | geo = slds[0].geometry | |
04 | geo.origin = new Point(0,0) | |
05 | slds[0].geometry = geo | |
06 | } |
Use the same technique for changing the size of a graphic:
Changing the Size of a Graphic | ||
01 | slds = document.windows[0].selection.solids | |
02 | if(slds.length > 0){ | |
03 | geo = slds[0].geometry | |
04 | geo.size = new Size(300,300) | |
05 | slds[0].geometry = geo | |
06 | } |
The “Handles” of a Rect
Curabitur blandit tempus porttitor. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec ullamcorper nulla non metus auctor fringilla.
minX (r/o) • Cras justo odio, dapibus ac facilisis in, egestas eget quam.
minY (r/o) • Cras justo odio, dapibus ac facilisis in, egestas eget quam.
midX (r/o) • Cras justo odio, dapibus ac facilisis in, egestas eget quam.
midY (r/o) • Cras justo odio, dapibus ac facilisis in, egestas eget quam.
maxX (r/o) • Cras justo odio, dapibus ac facilisis in, egestas eget quam.
maxY (r/o) • Cras justo odio, dapibus ac facilisis in, egestas eget quam.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
standardized • Cras justo odio, dapibus ac facilisis in, egestas eget quam.
integral • Cras justo odio, dapibus ac facilisis in, egestas eget quam.
isEmpty • Cras justo odio, dapibus ac facilisis in, egestas eget quam.
isInfinite • Cras justo odio, dapibus ac facilisis in, egestas eget quam.
isNull • Cras justo odio, dapibus ac facilisis in, egestas eget quam.
Rect Methods
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean lacinia bibendum nulla sed consectetur. Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
insetBy(leftRightInsetValue, topBottomInsetValue) • Cras justo odio, dapibus ac facilisis in, egestas eget quam.
offsetBy(leftRightOffsetValue, topBottomOffsetValue) • Cras justo odio, dapibus ac facilisis in, egestas eget quam.
union(rect) • This method takes a rect as its parameter, and returns a rect describing the bounding box of the union of the instance rect and the parameter rect.
intersect(rect) • Cras justo odio, dapibus ac facilisis in, egestas eget quam.
containsRect(rect) • Cras justo odio, dapibus ac facilisis in, egestas eget quam.
containsPoint(point) • Cras justo odio, dapibus ac facilisis in, egestas eget quam.
intersects(rect) • Cras justo odio, dapibus ac facilisis in, egestas eget quam.
Union of Two Graphics | ||
01 | var grphs = document.windows[0].selection.graphics | |
02 | grphs[0].geometry.union(grphs[1].geometry) | |
03 | //--> [object Rect: (90.0, 68.0, 308.0, 277.0)] |
Intersection of Two Graphics | ||
01 | grphs = document.windows[0].selection.graphics | |
02 | geo0 = grphs[0].geometry | |
03 | geo1 = grphs[1].geometry | |
04 | if(geo0.intersects(geo1)){ | |
05 | geo0.intersect(geo1) | |
06 | } | |
07 | //-->[object Rect: (475.238267148014, 313.720216606498, 149.20938628159, 216.245487364622)] |
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Donec id elit non mi porta gravida at eget metus.
Overlay an Inset Graphic | ||
01 | cnvs = document.windows[0].selection.canvas | |
02 | graphic = document.windows[0].selection.solids[0] | |
03 | aRect = graphic.geometry.insetBy(18,18) | |
04 | cnvs.addShape('Circle',aRect).fillColor = Color.blue |
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Maecenas sed diam eget risus varius blandit sit amet non magna. Cras mattis consectetur purus sit amet fermentum.
Flower with a Square | ||
01 | cnvs = document.windows[0].selection.canvas | |
02 | slds = document.windows[0].selection.solids | |
03 | if(slds.length > 0){ | |
04 | s = slds[0] | |
04 | g = s.geometry | |
05 | c = s.fillColor | |
06 | s.duplicateTo(new Point(g.maxX,g.maxY),null) | |
07 | s.duplicateTo(new Point(g.minX-g.width,g.maxY),null) | |
08 | s.duplicateTo(new Point(g.minX-g.width,g.minY-g.height),null) | |
09 | s.duplicateTo(new Point(g.maxX,g.minY-g.height),null) | |
10 | s.duplicateTo(new Point(g.maxX,g.minY),null).rotation = 45 | |
11 | s.duplicateTo(new Point(g.x,g.maxY),null).rotation = 45 | |
12 | s.duplicateTo(new Point(g.x-g.width,g.minY),null).rotation = 45 | |
13 | s.duplicateTo(new Point(g.x,g.minY-g.height),null).rotation = 45 | |
14 | aRect = g.insetBy(g.width/5,g.height/5) | |
15 | aCircle = cnvs.addShape('Circle',aRect) | |
16 | c = Color.RGB(c.red * 0.85,c.green * 0.85,c.blue * 0.85) | |
17 | aCircle.fillColor = c | |
18 | } |
Fancy Flower with Square | ||
01 | cnvs = document.windows[0].selection.canvas | |
02 | slds = document.windows[0].selection.solids | |
03 | if(slds.length > 0){ | |
04 | s = slds[0] | |
05 | g = s.geometry | |
06 | c = s.fillColor | |
07 | c1 = Color.RGB(c.red * 0.9,c.green * 0.9,c.blue * 0.9) | |
08 | c2 = Color.RGB(c.red * 0.2,c.green * 0.2,c.blue * 0.2) | |
09 | // 1 | |
10 | d = s.duplicateTo(new Point(g.maxX,g.maxY),null) | |
11 | d.fillType = FillType.Linear | |
12 | d.gradientColor = c2 | |
13 | d.gradientAngle = 225 | |
14 | // 2 | |
15 | d = s.duplicateTo(new Point(g.minX-g.width,g.maxY),null) | |
16 | d.fillType = FillType.Linear | |
17 | d.gradientColor = c2 | |
18 | d.gradientAngle = 315 | |
19 | // 3 | |
20 | d = s.duplicateTo(new Point(g.minX-g.width,g.minY-g.height),null) | |
21 | d.fillType = FillType.Linear | |
22 | d.gradientColor = c2 | |
23 | d.gradientAngle = 45 | |
24 | //4 | |
25 | d = s.duplicateTo(new Point(g.maxX,g.minY-g.height),null) | |
26 | d.fillType = FillType.Linear | |
27 | d.gradientColor = c2 | |
28 | d.gradientAngle = 135 | |
29 | // 5 | |
30 | d = s.duplicateTo(new Point(g.maxX,g.minY),null) | |
31 | d.rotation = 45 | |
32 | d.fillType = FillType.Linear | |
33 | d.fillColor = Color.white | |
34 | d.gradientColor = c1 | |
35 | d.gradientAngle = 135 | |
36 | // 6 | |
37 | d = s.duplicateTo(new Point(g.x,g.maxY),null) | |
38 | d.rotation = 45 | |
39 | d.fillType = FillType.Linear | |
40 | d.fillColor = Color.white | |
41 | d.gradientColor = c1 | |
42 | d.gradientAngle = 225 | |
43 | // 7 | |
44 | d = s.duplicateTo(new Point(g.x-g.width,g.minY),null) | |
45 | d.rotation = 45 | |
46 | d.fillType = FillType.Linear | |
47 | d.fillColor = Color.white | |
48 | d.gradientColor = c1 | |
49 | d.gradientAngle = 315 | |
50 | // 8 | |
51 | d = s.duplicateTo(new Point(g.x,g.minY-g.height),null) | |
52 | d.rotation = 45 | |
53 | d.fillType = FillType.Linear | |
54 | d.fillColor = Color.white | |
55 | d.gradientColor = c1 | |
56 | d.gradientAngle = 45 | |
57 | // center circle | |
58 | aRect = g.insetBy(g.width/5,g.height/5) | |
59 | circle = cnvs.addShape('Circle',aRect) | |
60 | circle.fillType = FillType.Radial | |
61 | circle.fillColor = Color.white | |
62 | circle.gradientColor = c2 | |
63 | // original square | |
64 | s.fillType = FillType.Radial | |
65 | s.fillColor = Color.white | |
66 | s.gradientColor = c2 | |
67 | } |
This webpage is in the process of being developed. Any content may change and may not be accurate or complete at this time.