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

var aRect = new Rect(0, 0, 1024, 768)

The position and dimensions of every graphic are contained in a Rect that is the value of the graphic’s geometry property:

document.windows[0].selection.graphics[0].geometry

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:

rect properties

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:

slds = document.windows[0].selection.solids if(slds.length > 0){ geo = slds[0].geometry geo.origin = new Point(0,0) slds[0].geometry = geo }
omnigraffle:///omnijs-run?script=slds%20%3D%20document%2Ewindows%5B0%5D%2Eselection%2Esolids%0Aif%28slds%2Elength%20%3E%200%29%7B%0A%09geo%20%3D%20slds%5B0%5D%2Egeometry%0A%09geo%2Eorigin%20%3D%20new%20Point%280%2C0%29%0A%09slds%5B0%5D%2Egeometry%20%3D%20geo%0A%7D

Use the same technique for changing the size of a graphic:

slds = document.windows[0].selection.solids if(slds.length > 0){ geo = slds[0].geometry geo.size = new Size(300,300) slds[0].geometry = geo }
omnigraffle:///omnijs-run?script=slds%20%3D%20document%2Ewindows%5B0%5D%2Eselection%2Esolids%0Aif%28slds%2Elength%20%3E%200%29%7B%0A%09geo%20%3D%20slds%5B0%5D%2Egeometry%0A%09geo%2Esize%20%3D%20new%20Size%28300%2C300%29%0A%09slds%5B0%5D%2Egeometry%20%3D%20geo%0A%7D

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.

rect properties

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.

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.

circle-square-overlap
grphs = document.windows[0].selection.graphics grphs[0].geometry.union(grphs[1].geometry)
grphs = document.windows[0].selection.graphics geo0 = grphs[0].geometry geo1 = grphs[1].geometry if(geo0.intersects(geo1)){ geo0.intersect(geo1) }

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.

circle-square-overlap
cnvs = document.windows[0].selection.canvas graphic = document.windows[0].selection.solids[0] aRect = graphic.geometry.insetBy(18,18) cnvs.addShape('Circle',aRect).fillColor = Color.blue
circle-square-overlap

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 square
cnvs = document.windows[0].selection.canvas slds = document.windows[0].selection.solids if(slds.length > 0){ s = slds[0] g = s.geometry c = s.fillColor s.duplicateTo(new Point(g.maxX,g.maxY),null) s.duplicateTo(new Point(g.minX-g.width,g.maxY),null) s.duplicateTo(new Point(g.minX-g.width,g.minY-g.height),null) s.duplicateTo(new Point(g.maxX,g.minY-g.height),null) s.duplicateTo(new Point(g.maxX,g.minY),null).rotation = 45 s.duplicateTo(new Point(g.x,g.maxY),null).rotation = 45 s.duplicateTo(new Point(g.x-g.width,g.minY),null).rotation = 45 s.duplicateTo(new Point(g.x,g.minY-g.height),null).rotation = 45 aRect = g.insetBy(g.width/5,g.height/5) circle = cnvs.addShape('Circle',aRect) c = Color.RGB(c.red * 0.85,c.green * 0.85,c.blue * 0.85) circle.fillColor = c }
omnigraffle:///omnijs-run?script=cnvs%20%3D%20document%2Ewindows%5B0%5D%2Eselection%2Ecanvas%0Aslds%20%3D%20document%2Ewindows%5B0%5D%2Eselection%2Esolids%0Aif%28slds%2Elength%20%3E%200%29%7B%0A%09s%20%3D%20slds%5B0%5D%0A%09g%20%3D%20s%2Egeometry%0A%09c%20%3D%20s%2EfillColor%0A%09s%2EduplicateTo%28new%20Point%28g%2EmaxX%2Cg%2EmaxY%29%2Cnull%29%0A%09s%2EduplicateTo%28new%20Point%28g%2EminX-g%2Ewidth%2Cg%2EmaxY%29%2Cnull%29%0A%09s%2EduplicateTo%28new%20Point%28g%2EminX-g%2Ewidth%2Cg%2EminY-g%2Eheight%29%2Cnull%29%0A%09s%2EduplicateTo%28new%20Point%28g%2EmaxX%2Cg%2EminY-g%2Eheight%29%2Cnull%29%0A%09s%2EduplicateTo%28new%20Point%28g%2EmaxX%2Cg%2EminY%29%2Cnull%29%2Erotation%20%3D%2045%0A%09s%2EduplicateTo%28new%20Point%28g%2Ex%2Cg%2EmaxY%29%2Cnull%29%2Erotation%20%3D%2045%0A%09s%2EduplicateTo%28new%20Point%28g%2Ex-g%2Ewidth%2Cg%2EminY%29%2Cnull%29%2Erotation%20%3D%2045%0A%09s%2EduplicateTo%28new%20Point%28g%2Ex%2Cg%2EminY-g%2Eheight%29%2Cnull%29%2Erotation%20%3D%2045%0A%09aRect%20%3D%20g%2EinsetBy%28g%2Ewidth%2F5%2Cg%2Eheight%2F5%29%0A%09circle%20%3D%20cnvs%2EaddShape%28%27Circle%27%2CaRect%29%0A%09c%20%3D%20Color%2ERGB%28c%2Ered%20*%200%2E85%2Cc%2Egreen%20*%200%2E85%2Cc%2Eblue%20*%200%2E85%29%0A%09circle%2EfillColor%20%3D%20c%0A%7D
flower with square
cnvs = document.windows[0].selection.canvas slds = document.windows[0].selection.solids if(slds.length > 0){ s = slds[0] g = s.geometry c = s.fillColor c1 = Color.RGB(c.red * 0.9,c.green * 0.9,c.blue * 0.9) c2 = Color.RGB(c.red * 0.2,c.green * 0.2,c.blue * 0.2) // 1 d = s.duplicateTo(new Point(g.maxX,g.maxY),null) d.fillType = FillType.Linear d.gradientColor = c2 d.gradientAngle = 225 // 2 d = s.duplicateTo(new Point(g.minX-g.width,g.maxY),null) d.fillType = FillType.Linear d.gradientColor = c2 d.gradientAngle = 315 // 3 d = s.duplicateTo(new Point(g.minX-g.width,g.minY-g.height),null) d.fillType = FillType.Linear d.gradientColor = c2 d.gradientAngle = 45 //4 d = s.duplicateTo(new Point(g.maxX,g.minY-g.height),null) d.fillType = FillType.Linear d.gradientColor = c2 d.gradientAngle = 135 // 5 d = s.duplicateTo(new Point(g.maxX,g.minY),null) d.rotation = 45 d.fillType = FillType.Linear d.fillColor = Color.white d.gradientColor = c1 d.gradientAngle = 135 // 6 d = s.duplicateTo(new Point(g.x,g.maxY),null) d.rotation = 45 d.fillType = FillType.Linear d.fillColor = Color.white d.gradientColor = c1 d.gradientAngle = 225 // 7 d = s.duplicateTo(new Point(g.x-g.width,g.minY),null) d.rotation = 45 d.fillType = FillType.Linear d.fillColor = Color.white d.gradientColor = c1 d.gradientAngle = 315 // 8 d = s.duplicateTo(new Point(g.x,g.minY-g.height),null) d.rotation = 45 d.fillType = FillType.Linear d.fillColor = Color.white d.gradientColor = c1 d.gradientAngle = 45 // center circle aRect = g.insetBy(g.width/5,g.height/5) circle = cnvs.addShape('Circle',aRect) circle.fillType = FillType.Radial circle.fillColor = Color.white circle.gradientColor = c2 // original square s.fillType = FillType.Radial s.fillColor = Color.white s.gradientColor = c2 }
omnigraffle:///omnijs-run?script=cnvs%20%3D%20document%2Ewindows%5B0%5D%2Eselection%2Ecanvas%0Aslds%20%3D%20document%2Ewindows%5B0%5D%2Eselection%2Esolids%0Aif%28slds%2Elength%20%3E%200%29%7B%0A%09s%20%3D%20slds%5B0%5D%0A%09g%20%3D%20s%2Egeometry%0A%09c%20%3D%20s%2EfillColor%0A%09c1%20%3D%20Color%2ERGB%28c%2Ered%20*%200%2E9%2Cc%2Egreen%20*%200%2E9%2Cc%2Eblue%20*%200%2E9%29%0A%09c2%20%3D%20Color%2ERGB%28c%2Ered%20*%200%2E2%2Cc%2Egreen%20*%200%2E2%2Cc%2Eblue%20*%200%2E2%29%0A%09%2F%2F%201%0A%09d%20%3D%20s%2EduplicateTo%28new%20Point%28g%2EmaxX%2Cg%2EmaxY%29%2Cnull%29%0A%09d%2EfillType%20%3D%20FillType%2ELinear%0A%09d%2EgradientColor%20%3D%20c2%0A%09d%2EgradientAngle%20%3D%20225%0A%09%2F%2F%202%0A%09d%20%3D%20s%2EduplicateTo%28new%20Point%28g%2EminX-g%2Ewidth%2Cg%2EmaxY%29%2Cnull%29%0A%09d%2EfillType%20%3D%20FillType%2ELinear%0A%09d%2EgradientColor%20%3D%20c2%0A%09d%2EgradientAngle%20%3D%20315%0A%09%2F%2F%203%0A%09d%3D%20s%2EduplicateTo%28new%20Point%28g%2EminX-g%2Ewidth%2Cg%2EminY-g%2Eheight%29%2Cnull%29%0A%09d%2EfillType%20%3D%20FillType%2ELinear%0A%09d%2EgradientColor%20%3D%20c2%0A%09d%2EgradientAngle%20%3D%2045%0A%09%2F%2F4%0A%09d%20%3D%20s%2EduplicateTo%28new%20Point%28g%2EmaxX%2Cg%2EminY-g%2Eheight%29%2Cnull%29%0A%09d%2EfillType%20%3D%20FillType%2ELinear%0A%09d%2EgradientColor%20%3D%20c2%0A%09d%2EgradientAngle%20%3D%20135%0A%09%2F%2F%205%0A%09d%20%3D%20s%2EduplicateTo%28new%20Point%28g%2EmaxX%2Cg%2EminY%29%2Cnull%29%0A%09d%2Erotation%20%3D%2045%0A%09d%2EfillType%20%3D%20FillType%2ELinear%0A%09d%2EfillColor%20%3D%20Color%2Ewhite%0A%09d%2EgradientColor%20%3D%20c1%0A%09d%2EgradientAngle%20%3D%20135%0A%09%2F%2F%206%0A%09d%20%3D%20s%2EduplicateTo%28new%20Point%28g%2Ex%2Cg%2EmaxY%29%2Cnull%29%0A%09d%2Erotation%20%3D%2045%0A%09d%2EfillType%20%3D%20FillType%2ELinear%0A%09d%2EfillColor%20%3D%20Color%2Ewhite%0A%09d%2EgradientColor%20%3D%20c1%0A%09d%2EgradientAngle%20%3D%20225%0A%09%2F%2F%207%0A%09d%20%3D%20s%2EduplicateTo%28new%20Point%28g%2Ex-g%2Ewidth%2Cg%2EminY%29%2Cnull%29%0A%09d%2Erotation%20%3D%2045%0A%09d%2EfillType%20%3D%20FillType%2ELinear%0A%09d%2EfillColor%20%3D%20Color%2Ewhite%0A%09d%2EgradientColor%20%3D%20c1%0A%09d%2EgradientAngle%20%3D%20315%0A%09%2F%2F%208%0A%09d%20%3D%20s%2EduplicateTo%28new%20Point%28g%2Ex%2Cg%2EminY-g%2Eheight%29%2Cnull%29%0A%09d%2Erotation%20%3D%2045%0A%09d%2EfillType%20%3D%20FillType%2ELinear%0A%09d%2EfillColor%20%3D%20Color%2Ewhite%0A%09d%2EgradientColor%20%3D%20c1%0A%09d%2EgradientAngle%20%3D%2045%0A%09aRect%20%3D%20g%2EinsetBy%28g%2Ewidth%2F5%2Cg%2Eheight%2F5%29%0A%09circle%20%3D%20cnvs%2EaddShape%28%27Circle%27%2CaRect%29%0A%09circle%2EfillType%20%3D%20FillType%2ERadial%0A%09circle%2EfillColor%20%3D%20Color%2Ewhite%0A%09circle%2EgradientColor%20%3D%20c2%0A%09s%2EfillType%20%3D%20FillType%2ERadial%0A%09s%2EfillColor%20%3D%20Color%2Ewhite%0A%09s%2EgradientColor%20%3D%20c2%0A%7D
shaded flower with square
UNDER CONSTRUCTION

This webpage is in the process of being developed. Any content may change and may not be accurate or complete at this time.

DISCLAIMER