OmniGraffle: Solids

Shape

A Shape is a Solid graphic which has a particular shape, either one of the built-in shapes, or a custom bezier shape.

Getting Shapes

Here is a script for creating an array of references to all shapes on the current canvas:

cnvs = document.windows[0].selection.canvas var shapes = new Array() cnvs.graphics.forEach(function(graphic){ if(graphic instanceof Shape){shapes.push(graphic)} })

Get All Shapes on Current Canvas

cnvs = document.windows[0].selection.canvas

var shapes = new Array()

cnvs.graphics.forEach(function(graphic){

if(graphic instanceof Shape){shapes.push(graphic)}

})

And here’s a script for creating an array of references to all shapes in the document:

shapes = new Array() canvases.forEach(function(cnvs){ cnvs.graphics.forEach(function(graphic){ if(graphic instanceof Shape){shapes.push(graphic)} }) })

Get All Shapes in Document

shapes = new Array()

canvases.forEach(function(cnvs){

cnvs.graphics.forEach(function(graphic){

if(graphic instanceof Shape){shapes.push(graphic)}

})

Using the previous script, this version replaces the text in all shapes whose text matches a specific text string:

shapes = new Array() canvases.forEach(function(cnvs){ cnvs.graphics.forEach(function(graphic){ if(graphic instanceof Shape){shapes.push(graphic)} }) }) textToMatch = 'How Now Brown Cow' replacementText = 'Cow Brown Now How' shapes.forEach(function(solid){ if(solid.text === textToMatch){solid.text = replacementText} })

Find/Change Graphic Text

shapes = new Array()

canvases.forEach(function(cnvs){

cnvs.graphics.forEach(function(graphic){

if(graphic instanceof Shape){shapes.push(graphic)}

})

textToMatch = 'How Now Brown Cow'

replacementText = 'Cow Brown Now How'

shapes.forEach(function(solid){

if(solid.text === textToMatch){solid.text = replacementText}

})

Information about styled text in graphics can be found in the Text section.

And here's a variation on the previous scripts for locating all of the circles on the current canvas:

cnvs = document.windows[0].selection.canvas var circles = new Array() cnvs.graphics.forEach(function(graphic){ if(graphic instanceof Shape && graphic.shape === 'Circle'){ shapes.push(graphic) } })

All Circles on Current Canvas

cnvs = document.windows[0].selection.canvas

var circles = new Array()

cnvs.graphics.forEach(function(graphic){

if(graphic instanceof Shape && graphic.shape === 'Circle'){

circles.push(graphic)

}

})

And a variation for locating all stars in a document:

var stars = new Array() canvases.forEach(function(cnvs){ cnvs.graphics.forEach(function(graphic){ if(graphic instanceof Shape && graphic.shape === 'Star'){ stars.push(graphic) } }) })

All Stars in Document

var stars = new Array()

canvases.forEach(function(cnvs){

cnvs.graphics.forEach(function(graphic){

if(graphic instanceof Shape && graphic.shape === 'Star'){

stars.push(graphic)

}

})

Creating Shapes

There are two methods of the Canvas class that can be used to create shapes:

addShape(shapeNameString, boundsRect) (Shape) • Create a new graphic of a given shape and place it on the first visible layer.
newShape() (Shape) • Create a zero-sized rectangle (presumably to be modified further) and place it on the first visible layer.

cnvs = document.windows[0].selection.canvas solid = cnvs.newShape() solid.shape = 'Rectangle' solid.geometry = new Rect(0, 0, 200, 200)

omnigraffle://localhost/omnijs-run?script=cnvs%20%3D%20document%2Ewindows%5B0%5D%2Eselection%2Ecanvas%0Asolid%20%3D%20cnvs%2EnewShape%28%29%0Asolid%2Eshape%20%3D%20%27Rectangle%27%0Asolid%2Egeometry%20%3D%20new%20Rect%280%2C%200%2C%20200%2C%20200%29

New Shape using newShape()

cnvs = document.windows[0].selection.canvas

solid = cnvs.newShape()

solid.shape = 'Rectangle'

solid.geometry = new Rect(0, 0, 200, 200)

cnvs = document.windows[0].selection.canvas cnvs.addShape('Circle',new Rect(200, 200, 400, 400))

omnigraffle://localhost/omnijs-run?script=cnvs%20%3D%20document%2Ewindows%5B0%5D%2Eselection%2Ecanvas%0Acnvs%2EaddShape%28%27Circle%27%2Cnew%20Rect%28200%2C%20200%2C%20400%2C%20400%29%29

New Shape using addShape()

cnvs = document.windows[0].selection.canvas

cnvs.addShape('Circle',new Rect(200, 200, 400, 400))

In addition to inheriting the properties of a graphic, each instance of a shape has the following properties:

shape (String or nil) • Name of the shape for this graphic. The names of the currently available shapes are: AndGate, Bolt, Circle, Cloud, Cross, Cube, Cylinder, Delete, Diamond, DisplayShape, DocumentShape, DoubleHorizontalArrow, Heart, Hexagon, HorizontalArrow, HorizontalBrackets, HorizontalTriangle, House, Lightning Bolt, NoteShape, Octagon, OrGate, ParallelLines, Parallelogram, Patch, Pentagon, Puzzle Piece, QuarterArc, QuarterCircle, Rectangle, RightTriangle, RoundRect, RoundedStack, SemiCircle, SingleLine, SlopedRect, Speech Bubble, Star, Sticky, Subprocess, Think Bubble, Trapazoid, VerticalArrow, VerticalBrackets, VerticalParallelLines, VerticalTriangle, iOSAppIcon
shapeControlPoints (array of Points) • The vertices and controlPoint1 & controlPoint2 of each bezier segment. For straight line segments, both control points will be identical to the vertex point.
shapeVertices (array of Points) • Array of vertices for this shape.

Shape Vertices and Shape Control Points

Shape Vertices are the points, or corners, in geometrical and mathematical shapes where two or more lines meet but do not cross. Vertices are used to define the outline of a shape. For example, here are the four vertices of a circle:

var cnvs = document.windows[0].selection.canvas; var g1 = cnvs.newShape() g1.shape = "Circle" g1.shadowColor = null g1.geometry = new Rect(0.00, 0.00, 100.0, 100.0) g1.shapeVertices

4 Shape Vertices of a Circle

var cnvs = document.windows[0].selection.canvas;

var g1 = cnvs.newShape()

g1.shape = "Circle"

g1.shadowColor = null

g1.geometry = new Rect(0.00, 0.00, 100.0, 100.0)

g1.shapeVertices

==> [object Point: (85.3553, 14.6447)],[object Point: (85.3553, 85.3553)],[object Point: (14.6447, 85.3553)],[object Point: (14.6447, 14.6447)]

Shape Control Points are a collection of points defining the postion of the adjustment handles of the shape vertices:

var cnvs = document.windows[0].selection.canvas; var g1 = cnvs.newShape() g1.shape = "Circle" g1.shadowColor = null g1.geometry = new Rect(0.00, 0.00, 100.0, 100.0) g1.shapeControlPoints

8 Shape Control Points of a Circle

var cnvs = document.windows[0].selection.canvas;

var g1 = cnvs.newShape()

g1.shape = "Circle"

g1.shadowColor = null

g1.geometry = new Rect(0.00, 0.00, 100.0, 100.0)

g1.shapeControlPoints

==> [object Point: (85.3553, 14.6447)],[object Point: (104.8816, 34.1709)],[object Point: (104.8816, 65.8291)],[object Point: (85.3553, 85.3553)],[object Point: (65.8291, 104.8816)],[object Point: (34.1709, 104.8816)],[object Point: (14.6447, 85.3553)],[object Point: (-4.8816, 65.8291)],[object Point: (-4.8816, 34.1709)],[object Point: (14.6447, 14.6447)],[object Point: (34.1709, -4.8816)],[object Point: (65.8291, -4.8816)]

Shape Vertices 1 and Shape Control Points 2

Using addShape() to Create a Shape

The easiest way to create a standard shape of a specific size and position is to use addShape() method, passing in the name of the shape (see list above), and a Rect defining the object’s position and size:

var cnvs = document.windows[0].selection.canvas graphic = cnvs.addShape('Circle', new Rect(0, 0, 144, 144))

omnigraffle:///omnijs-run?script=var%20cnvs%20%3D%20document%2Ewindows%5B0%5D%2Eselection%2Ecanvas%0Agraphic%20%3D%20cnvs%2EaddShape%28%27Circle%27%2C%20new%20Rect%280%2C%200%2C%20144%2C%20144%29%29

Using addShape() to Create a Shape

var cnvs = document.windows[0].selection.canvas

graphic = cnvs.addShape('Circle', new Rect(0, 0, 144, 144))

A circular shape will be added to the current canvas.

var cnvs = document.windows[0].selection.canvas graphic = cnvs.addShape('Think Bubble', new Rect(0, 0, 144, 144)) graphic.text = "What was I thinking?"

omnigraffle:///omnijs-run?script=var%20cnvs%20%3D%20document%2Ewindows%5B0%5D%2Eselection%2Ecanvas%0Agraphic%20%3D%20cnvs%2EaddShape%28%27Think%20Bubble%27%2C%20new%20Rect%280%2C%200%2C%20144%2C%20144%29%29%0Agraphic%2Etext%20%3D%20%22What%20was%20I%20thinking%3F%22

Thought Bubble

var cnvs = document.windows[0].selection.canvas

graphic = cnvs.addShape('Think Bubble', new Rect(0, 0, 144, 144))

graphic.text = "What was I thinking?"

The resulting thought-bubble:

Using newShape() to Create a Shape

The newShape() method is used to create an zero-sized shape, which is then defined by following script statements. For example, the following script demonstrates how to create a standard shape using this method:

var cnvs = document.windows[0].selection.canvas graphic = cnvs.newShape() graphic.shape = 'DoubleHorizontalArrow' graphic.geometry = new Rect(0, 0, 300, 150)

Using newShape() to Create a Shape

var cnvs = document.windows[0].selection.canvas

graphic = cnvs.newShape()

graphic.shape = 'DoubleHorizontalArrow'

graphic.geometry = new Rect(0, 0, 300, 150)

The newShape() method is often used to create graphics with custom shapes and designs by providing an array of the shape control points or shape vertices:

var cnvs = document.windows[0].selection.canvas var g1 = cnvs.newShape() g1.shapeControlPoints = [new Point(62.79, 48.80), new Point(70.05, 47.02), new Point(76.54, 45.60), new Point(82.23, 44.54), new Point(87.93, 43.49), new Point(91.80, 42.96), new Point(93.87, 42.96), new Point(96.68, 42.96), new Point(98.94, 43.73), new Point(100.65, 45.28), new Point(102.36, 46.83), new Point(103.22, 48.87), new Point(103.22, 51.40), new Point(103.22, 54.02), new Point(102.38, 56.12), new Point(100.69, 57.69), new Point(99.00, 59.26), new Point(96.73, 60.05), new Point(93.87, 60.05), new Point(91.71, 60.05), new Point(87.83, 59.53), new Point(82.23, 58.50), new Point(76.63, 57.47), new Point(70.13, 56.09), new Point(62.72, 54.35), new Point(62.67, 54.49), new Point(62.60, 54.73), new Point(62.51, 55.05), new Point(62.09, 56.18), new Point(61.73, 56.98), new Point(61.45, 57.45), new Point(62.67, 58.24), new Point(64.43, 59.37), new Point(66.73, 60.82), new Point(82.71, 70.90), new Point(90.70, 77.95), new Point(90.70, 81.98), new Point(90.70, 84.23), new Point(89.85, 86.23), new Point(88.14, 87.96), new Point(86.43, 89.70), new Point(84.45, 90.56), new Point(82.20, 90.56), new Point(78.12, 90.56), new Point(70.99, 82.55), new Point(60.82, 66.52), new Point(59.41, 64.27), new Point(58.34, 62.55), new Point(57.59, 61.38), new Point(57.07, 61.66), new Point(56.55, 61.91), new Point(56.04, 62.12), new Point(55.52, 62.33), new Point(54.98, 62.51), new Point(54.42, 62.65), new Point(56.20, 70.10), new Point(57.61, 76.66), new Point(58.64, 82.34), new Point(59.67, 88.01), new Point(60.19, 91.87), new Point(60.19, 93.94), new Point(60.19, 96.70), new Point(59.40, 98.93), new Point(57.83, 100.62), new Point(56.26, 102.30), new Point(54.21, 103.15), new Point(51.68, 103.15), new Point(49.05, 103.15), new Point(46.98, 102.30), new Point(45.46, 100.62), new Point(43.93, 98.93), new Point(43.17, 96.63), new Point(43.17, 93.73), new Point(43.17, 91.66), new Point(43.69, 87.83), new Point(44.72, 82.23), new Point(45.75, 76.63), new Point(47.16, 70.15), new Point(48.94, 62.79), new Point(48.52, 62.74), new Point(48.06, 62.62), new Point(47.57, 62.44), new Point(47.07, 62.25), new Point(46.52, 61.99), new Point(45.91, 61.66), new Point(45.91, 61.66), new Point(43.52, 65.46), new Point(43.52, 65.46), new Point(32.88, 82.38), new Point(25.48, 90.84), new Point(21.30, 90.84), new Point(19.01, 90.84), new Point(17.02, 90.00), new Point(15.33, 88.31), new Point(13.64, 86.62), new Point(12.80, 84.66), new Point(12.80, 82.41), new Point(12.80, 78.42), new Point(20.32, 71.63), new Point(35.37, 62.02), new Point(38.13, 60.23), new Point(40.24, 58.87), new Point(41.70, 57.94), new Point(41.46, 57.52), new Point(41.23, 57.05), new Point(40.99, 56.53), new Point(40.76, 56.02), new Point(40.52, 55.43), new Point(40.29, 54.77), new Point(33.54, 56.41), new Point(27.33, 57.70), new Point(21.66, 58.64), new Point(15.98, 59.58), new Point(11.88, 60.05), new Point(9.35, 60.05), new Point(6.40, 60.05), new Point(4.10, 59.34), new Point(2.46, 57.94), new Point(0.82, 56.53), new Point(0.00, 54.56), new Point(0.00, 52.03), new Point(0.00, 49.36), new Point(0.84, 47.18), new Point(2.53, 45.49), new Point(4.22, 43.80), new Point(6.45, 42.96), new Point(9.21, 42.96), new Point(10.85, 42.96), new Point(14.32, 43.49), new Point(19.62, 44.54), new Point(24.91, 45.60), new Point(31.76, 47.11), new Point(40.15, 49.08), new Point(40.29, 48.52), new Point(40.48, 47.94), new Point(40.71, 47.36), new Point(40.95, 46.77), new Point(41.20, 46.24), new Point(41.48, 45.77), new Point(39.61, 44.60), new Point(36.98, 42.94), new Point(33.61, 40.78), new Point(19.36, 31.83), new Point(12.23, 25.34), new Point(12.23, 21.30), new Point(12.23, 19.15), new Point(13.12, 17.17), new Point(14.91, 15.36), new Point(16.69, 13.56), new Point(18.68, 12.66), new Point(20.88, 12.66), new Point(24.82, 12.66), new Point(31.80, 20.53), new Point(41.84, 36.28), new Point(43.34, 38.67), new Point(44.51, 40.50), new Point(45.35, 41.77), new Point(45.87, 41.48), new Point(46.38, 41.24), new Point(46.90, 41.03), new Point(47.41, 40.82), new Point(47.93, 40.64), new Point(48.45, 40.50), new Point(46.71, 33.09), new Point(45.33, 26.59), new Point(44.30, 20.99), new Point(43.27, 15.39), new Point(42.75, 11.51), new Point(42.75, 9.35), new Point(42.75, 6.59), new Point(43.54, 4.34), new Point(45.11, 2.60), new Point(46.68, 0.87), new Point(48.73, 0.00), new Point(51.26, 0.00), new Point(53.79, 0.00), new Point(55.84, 0.84), new Point(57.41, 2.53), new Point(58.98, 4.22), new Point(59.77, 6.45), new Point(59.77, 9.21), new Point(59.77, 11.18), new Point(59.24, 15.01), new Point(58.18, 20.71), new Point(57.13, 26.40), new Point(55.73, 32.93), new Point(54.00, 40.29), new Point(54.70, 40.48), new Point(55.34, 40.69), new Point(55.90, 40.92), new Point(56.46, 41.16), new Point(56.98, 41.44), new Point(57.45, 41.77), new Point(58.29, 40.45), new Point(59.48, 38.58), new Point(61.03, 36.14), new Point(71.02, 20.30), new Point(78.02, 12.37), new Point(82.05, 12.37), new Point(84.26, 12.37), new Point(86.23, 13.25), new Point(87.96, 15.01), new Point(89.70, 16.77), new Point(90.56, 18.77), new Point(90.56, 21.02), new Point(90.56, 25.10), new Point(83.55, 31.55), new Point(69.54, 40.36), new Point(66.02, 42.56), new Point(63.28, 44.27), new Point(61.31, 45.49), new Point(61.78, 46.48), new Point(62.11, 47.18), new Point(62.30, 47.60), new Point(62.48, 48.02), new Point(62.65, 48.42)] g1.strokeType = null g1.geometry = new Rect(0.00, 0.00, 103.15, 103.15) g1.shadowColor = null g1.strokeColor = null g1.fillColor = Color.RGB(0.0, 0.0, 0.0) g1.name = "8-Point Asterisk"

var canvas = document.windows[0].selection.canvas var g1 = canvas.newShape() g1.shapeControlPoints = [new Point(103.08, 53.02), new Point(94.59, 56.53), new Point(87.83, 59.70), new Point(82.79, 62.51), new Point(77.75, 65.32), new Point(73.83, 68.11), new Point(71.02, 70.88), new Point(68.25, 73.64), new Point(65.46, 77.53), new Point(62.65, 82.55), new Point(59.84, 87.56), new Point(56.63, 94.43), new Point(53.02, 103.15), new Point(53.02, 103.15), new Point(50.13, 103.15), new Point(50.13, 103.15), new Point(46.48, 94.43), new Point(43.24, 87.56), new Point(40.43, 82.55), new Point(37.62, 77.53), new Point(34.85, 73.64), new Point(32.13, 70.88), new Point(29.32, 68.11), new Point(25.39, 65.32), new Point(20.36, 62.51), new Point(15.32, 59.70), new Point(8.53, 56.53), new Point(0.00, 53.02), new Point(0.00, 53.02), new Point(0.00, 50.13), new Point(0.00, 50.13), new Point(8.58, 46.62), new Point(15.39, 43.45), new Point(20.43, 40.64), new Point(25.46, 37.83), new Point(29.37, 35.04), new Point(32.13, 32.27), new Point(34.85, 29.51), new Point(37.62, 25.62), new Point(40.43, 20.60), new Point(43.24, 15.59), new Point(46.48, 8.72), new Point(50.13, 0.00), new Point(50.13, 0.00), new Point(53.02, 0.00), new Point(53.02, 0.00), new Point(56.63, 8.72), new Point(59.84, 15.59), new Point(62.65, 20.60), new Point(65.46, 25.62), new Point(68.25, 29.51), new Point(71.02, 32.27), new Point(73.73, 35.04), new Point(77.61, 37.83), new Point(82.65, 40.64), new Point(87.69, 43.45), new Point(94.50, 46.62), new Point(103.08, 50.13), new Point(103.08, 50.13), new Point(103.08, 53.02)] g1.strokeType = null g1.geometry = new Rect(0.00, 0.00, 103.15, 103.15) g1.shadowColor = null g1.strokeColor = null g1.fillColor = Color.RGB(0.0, 0.0, 0.0) g1.name = "Four-Pointed Star"

omnigraffle:///omnijs-run?script=var%20canvas%20%3D%20document%2Ewindows%5B0%5D%2Eselection%2Ecanvas%0Avar%20g1%20%3D%20canvas%2EnewShape%28%29%0Ag1%2EshapeControlPoints%20%3D%20%5Bnew%20Point%28103%2E08%2C%2053%2E02%29%2C%20new%20Point%2894%2E59%2C%2056%2E53%29%2C%20new%20Point%2887%2E83%2C%2059%2E70%29%2C%20new%20Point%2882%2E79%2C%2062%2E51%29%2C%20new%20Point%2877%2E75%2C%2065%2E32%29%2C%20new%20Point%2873%2E83%2C%2068%2E11%29%2C%20new%20Point%2871%2E02%2C%2070%2E88%29%2C%20new%20Point%2868%2E25%2C%2073%2E64%29%2C%20new%20Point%2865%2E46%2C%2077%2E53%29%2C%20new%20Point%2862%2E65%2C%2082%2E55%29%2C%20new%20Point%2859%2E84%2C%2087%2E56%29%2C%20new%20Point%2856%2E63%2C%2094%2E43%29%2C%20new%20Point%2853%2E02%2C%20103%2E15%29%2C%20new%20Point%2853%2E02%2C%20103%2E15%29%2C%20new%20Point%2850%2E13%2C%20103%2E15%29%2C%20new%20Point%2850%2E13%2C%20103%2E15%29%2C%20new%20Point%2846%2E48%2C%2094%2E43%29%2C%20new%20Point%2843%2E24%2C%2087%2E56%29%2C%20new%20Point%2840%2E43%2C%2082%2E55%29%2C%20new%20Point%2837%2E62%2C%2077%2E53%29%2C%20new%20Point%2834%2E85%2C%2073%2E64%29%2C%20new%20Point%2832%2E13%2C%2070%2E88%29%2C%20new%20Point%2829%2E32%2C%2068%2E11%29%2C%20new%20Point%2825%2E39%2C%2065%2E32%29%2C%20new%20Point%2820%2E36%2C%2062%2E51%29%2C%20new%20Point%2815%2E32%2C%2059%2E70%29%2C%20new%20Point%288%2E53%2C%2056%2E53%29%2C%20new%20Point%280%2E00%2C%2053%2E02%29%2C%20new%20Point%280%2E00%2C%2053%2E02%29%2C%20new%20Point%280%2E00%2C%2050%2E13%29%2C%20new%20Point%280%2E00%2C%2050%2E13%29%2C%20new%20Point%288%2E58%2C%2046%2E62%29%2C%20new%20Point%2815%2E39%2C%2043%2E45%29%2C%20new%20Point%2820%2E43%2C%2040%2E64%29%2C%20new%20Point%2825%2E46%2C%2037%2E83%29%2C%20new%20Point%2829%2E37%2C%2035%2E04%29%2C%20new%20Point%2832%2E13%2C%2032%2E27%29%2C%20new%20Point%2834%2E85%2C%2029%2E51%29%2C%20new%20Point%2837%2E62%2C%2025%2E62%29%2C%20new%20Point%2840%2E43%2C%2020%2E60%29%2C%20new%20Point%2843%2E24%2C%2015%2E59%29%2C%20new%20Point%2846%2E48%2C%208%2E72%29%2C%20new%20Point%2850%2E13%2C%200%2E00%29%2C%20new%20Point%2850%2E13%2C%200%2E00%29%2C%20new%20Point%2853%2E02%2C%200%2E00%29%2C%20new%20Point%2853%2E02%2C%200%2E00%29%2C%20new%20Point%2856%2E63%2C%208%2E72%29%2C%20new%20Point%2859%2E84%2C%2015%2E59%29%2C%20new%20Point%2862%2E65%2C%2020%2E60%29%2C%20new%20Point%2865%2E46%2C%2025%2E62%29%2C%20new%20Point%2868%2E25%2C%2029%2E51%29%2C%20new%20Point%2871%2E02%2C%2032%2E27%29%2C%20new%20Point%2873%2E73%2C%2035%2E04%29%2C%20new%20Point%2877%2E61%2C%2037%2E83%29%2C%20new%20Point%2882%2E65%2C%2040%2E64%29%2C%20new%20Point%2887%2E69%2C%2043%2E45%29%2C%20new%20Point%2894%2E50%2C%2046%2E62%29%2C%20new%20Point%28103%2E08%2C%2050%2E13%29%2C%20new%20Point%28103%2E08%2C%2050%2E13%29%2C%20new%20Point%28103%2E08%2C%2053%2E02%29%5D%0Ag1%2EstrokeType%20%3D%20null%0Ag1%2Egeometry%20%3D%20new%20Rect%280%2E00%2C%200%2E00%2C%20103%2E08%2C%20103%2E15%29%0Ag1%2EshadowColor%20%3D%20null%0Ag1%2EstrokeColor%20%3D%20null%0Ag1%2EfillColor%20%3D%20Color%2ERGB%280%2E0%2C%200%2E0%2C%200%2E0%29%0Ag1%2Ename%20%3D%20%22Four-Pointed%20Star%22

Create Custom Shape: 4-Pointed Star

var cnvs = document.windows[0].selection.canvas

var g1 = cnvs.newShape()

g1.shapeControlPoints = [new Point(103.08, 53.02), new Point(94.59, 56.53), new Point(87.83, 59.70), new Point(82.79, 62.51), new Point(77.75, 65.32), new Point(73.83, 68.11), new Point(71.02, 70.88), new Point(68.25, 73.64), new Point(65.46, 77.53), new Point(62.65, 82.55), new Point(59.84, 87.56), new Point(56.63, 94.43), new Point(53.02, 103.15), new Point(53.02, 103.15), new Point(50.13, 103.15), new Point(50.13, 103.15), new Point(46.48, 94.43), new Point(43.24, 87.56), new Point(40.43, 82.55), new Point(37.62, 77.53), new Point(34.85, 73.64), new Point(32.13, 70.88), new Point(29.32, 68.11), new Point(25.39, 65.32), new Point(20.36, 62.51), new Point(15.32, 59.70), new Point(8.53, 56.53), new Point(0.00, 53.02), new Point(0.00, 53.02), new Point(0.00, 50.13), new Point(0.00, 50.13), new Point(8.58, 46.62), new Point(15.39, 43.45), new Point(20.43, 40.64), new Point(25.46, 37.83), new Point(29.37, 35.04), new Point(32.13, 32.27), new Point(34.85, 29.51), new Point(37.62, 25.62), new Point(40.43, 20.60), new Point(43.24, 15.59), new Point(46.48, 8.72), new Point(50.13, 0.00), new Point(50.13, 0.00), new Point(53.02, 0.00), new Point(53.02, 0.00), new Point(56.63, 8.72), new Point(59.84, 15.59), new Point(62.65, 20.60), new Point(65.46, 25.62), new Point(68.25, 29.51), new Point(71.02, 32.27), new Point(73.73, 35.04), new Point(77.61, 37.83), new Point(82.65, 40.64), new Point(87.69, 43.45), new Point(94.50, 46.62), new Point(103.08, 50.13), new Point(103.08, 50.13), new Point(103.08, 53.02)]

g1.strokeType = null

g1.geometry = new Rect(0.00, 0.00, 103.15, 103.15)

g1.shadowColor = null

g1.strokeColor = null

g1.fillColor = Color.RGB(0.0, 0.0, 0.0)

g1.name = "Four-Pointed Star"

The resulting four-pointed star shape:

Solid

A solid graphic is one that potentially has a fill, image, and text - as opposed to a “Line,” which has only a stroke. Almost all solid graphics will actually be the subclass “Shape,” but a canvas background is a “Solid” without being a “Shape.”

TIP: Detailed examples of creating and manipulating Solids containing text, is available on the Text page.

Solid Properties

autosizing (TextAutosizing) • Autosizing behavior of the graphic when the text size changes.
blendColor (Color or nil) • The middle color of a three color gradient fill, if the fill style includes such.
blendFraction (Number) • The middle fraction of a three color gradient fill, if the fill style includes such.
fillColor (Color or nil) • Color of the fill for this graphic.
fillType (FillType or nil) • Style of fill for this graphic.
fontName (String) • Font of text in this graphic. This is the Font’s “Postscript name”, as displayed in the Font Book application’s Font Info pane on the Mac. Where there are multiple fonts, this returns the first character’s font. Setting this value sets it for all text in the graphic.
gradientAngle (Number) • For linear gradients, the angle at which the gradient is drawn.
gradientCenter (Point) • For radial gradients, the position of the center of the gradient.
gradientColor (Color or nil) • For gradient fills, the second color (along with the fill color) that the fill goes between.
image (ImageReference or nil) • Image fill for this graphic, if any.
imageOffset (Point) • Positioning offset of the image fill. This is the difference between the image origin and the graphic origin.
imageOpacity (Number) • Opacity percentage for the image fill for this graphic.
imagePage (Number) • Page number to display for the given image, if relevant. Mainly useful for PDF images, which are potentially multiple pages.
imageScale (Size) • Scaling of the image fill. This is a multiplier between the displayed size and original image size.
imageSizing (ImageSizing) • Type of sizing behavior for the image, if any. ImageSizing.Manual, ImageSizing.Stretched, ImageSizing.Tiled
magnets (Array of Array) • Array of connection magnets for this graphic.
rotation (Number) • Rotation of this graphic.
shape (String) • Inherited from the solid shape class, this property represents the type of shape of the graphic. It applies only to graphics that are solids, not lines. Here are the standard string values: AndGate, Bolt, Circle, Cloud, Cross, Cube, Cylinder, Delete, Diamond, DisplayShape, DocumentShape, DoubleHorizontalArrow, Heart, Hexagon, HorizontalArrow, HorizontalBrackets, HorizontalTriangle, House, Lightning Bolt, NoteShape, Octagon, OrGate, ParallelLines, Parallelogram, Patch, Pentagon, Puzzle Piece, QuarterArc, QuarterCircle, Rectangle, RightTriangle, RoundRect, RoundedStack, SemiCircle, SingleLine, SlopedRect, Speech Bubble, Star, Sticky, Subprocess, Think Bubble, Trapazoid, VerticalArrow, VerticalBrackets, VerticalParallelLines, VerticalTriangle, iOSAppIcon
text (String) • Text contents of this graphic.
textAlongPathGlyphAnchor (Number) • text-on-path glyph placement anchor; 0 = glyph anchored at bottom center (this is how text-on-path works in OmniGraffle 7.10 and later), 1 = glyph anchored at bottom left (this is how text-on-path works in OmniGraffle 7.9.3 and previous)
textColor (Color) • Color of the text in this graphic. Where there are multiple colors, this returns the first character’s color. Setting this value sets it for all text in the graphic.
textFlow (TextFlow) • (new in 7.11) Text flow behavior of the graphic.
textGeometry (Rect r/o) • Drawing bounds of the text in canvas coordinates.
textHorizontalAlignment (HorizontalTextAlignment) • Alignment of the text in this graphic horizontally. HorizontalTextAlignment.Center, HorizontalTextAlignment.Justify, HorizontalTextAlignment.Left, HorizontalTextAlignment.Right
textHorizontalPadding (Number) • Horizontal padding between the edge of the graphic’s bounds and the edge of the text area where text is drawn.
textRotation (Number) • Rotation of the text.
textRotationIsRelative (boolean) • Whether the text rotation is relative to the existing rotation of the graphic itself, or whether it is constant compared to the canvas.
textSize (Number) • Font size of text in this graphic. Where there are multiple fonts, this returns the first character’s font size. Setting this value sets it for all text in the graphic.
textUnitRect (Rect) • Size and position of the graphics’ text area as a unit square. I.e. The x and y are in terms of proportion of graphic size from the graphic bounds (so 0,0 is the graphic origin, (1,1) originates at the graphic’s lower-righthand corner, and the width and height are the scale of the text area in proportion to the graphic, so (1,1) is the same size as the graphic bounds, (2,2) would be twice as large, etc.
textVerticalPadding (Number) • Vertical padding between the edge of the graphic’s bounds and the edge of the text area where text is drawn.
textVerticalPlacement (VerticalTextPlacement) • Alignment of the text in this graphic vertically. VerticalAlignment.Bottom, VerticalAlignment.Center, VerticalAlignment.Top
textWraps (Boolean) • Whether the text wraps to the graphic’s bounds, or can go as wide as it wishes outside the graphic bounds.
tripleBlend (boolean) • Whether the fill includes three colors in a gradient.

Checking for Single Selected Solid

It it is common to create scripts that require the user to have already selected a single solid. Here is the outline of such a script:

Check for Single Selected Solid

if (document.windows[0].selection.solids.length != 1){

title = "SELECTION ERROR"

message = "Please select a single solid."

new Alert(title, message).show(function(result){})

} else {

cnvs = document.windows[0].selection.canvas

solid = document.windows[0].selection.solids[0]

// processing code goes here

}

And here is a variation of the previous script that requires the single selected solid to contain an image:

if (document.windows[0].selection.solids.length != 1){ title = "SELECTION ERROR" message = "Please select a single solid." new Alert(title, message).show(function(result){}) } else { cnvs = document.windows[0].selection.canvas solid = document.windows[0].selection.solids[0] if (solid.image instanceof ImageReference){ // processing code goes here } else { title = "NO IMAGE" message = "The solid does not contain an image." new Alert(title, message).show(function(result){}) } }

omnigraffle:///omnijs-run?script=if%20%28document%2Ewindows%5B0%5D%2Eselection%2Egraphics%2Elength%20%21%3D%201%29%7B%0A%09title%20%3D%20%22SELECTION%20ERROR%22%0A%09message%20%3D%20%22Please%20select%20a%20single%20graphic%2E%22%0A%09new%20Alert%28title%2C%20message%29%2Eshow%28function%28result%29%7B%7D%29%0A%7D%20else%20%7B%0A%09cnvs%20%3D%20document%2Ewindows%5B0%5D%2Eselection%2Ecanvas%0A%09graphic%20%3D%20document%2Ewindows%5B0%5D%2Eselection%2Egraphics%5B0%5D%0A%09if%20%28graphic%2Eimage%20instanceof%20ImageReference%29%7B%0A%09%09%2F%2F%20processing%20code%20goes%20here%0A%09%7D%20else%20%7B%0A%09%09title%20%3D%20%22NO%20IMAGE%22%0A%09%09message%20%3D%20%22The%20graphic%20does%20not%20contain%20an%20image%2E%22%0A%09%09new%20Alert%28title%2C%20message%29%2Eshow%28function%28result%29%7B%7D%29%0A%09%7D%0A%7D

Check for Single Selected Image

if (document.windows[0].selection.solids.length != 1){

title = "SELECTION ERROR"

message = "Please select a single solid."

new Alert(title, message).show(function(result){})

} else {

cnvs = document.windows[0].selection.canvas

solid = document.windows[0].selection.solids[0]

if (solid.image instanceof ImageReference){

// processing code goes here

} else {

title = "NO IMAGE"

message = "The solid does not contain an image."

new Alert(title, message).show(function(result){})

}

Text Autosizing

The TextAutosizing properties are the value for the autosizing property of the Solid class:

TextAutosizing

graphic = document.windows[0].selection.graphics[0]

graphic.autosizing = TextAutosizing.Vertical

Clip (TextAutosizing 3) • Clip.
Full (TextAutosizing 1) • Full.
Overflow (TextAutosizing 0) • Overflow.
Vertical (TextAutosizing 2) • Vertical.

Fill Type

The FillType properties are the value for the fillType property (note lowercase f) of the Solid class:

Fill Type

graphic = document.windows[0].selection.graphics[0]

graphic.fillType = FillType.Squiggle

Linear (FillType 2) • Linear Gradient.
Marker (FillType 7) • Marker.
Plastic (FillType 6) • Plastic.
Radial (FillType 3) • Radial Gradient.
Solid (FillType 1) • Solid.
Squiggle (FillType 5) • Squiggle.
Stipple (FillType 4) • Stipple.

Image Sizing

The ImageSizing properties are the value for the imageSizing property (note lowercase i) of the Solid class:

Image Sizing

graphic = document.windows[0].selection.graphics[0]

graphic.imageSizing = ImageSizing.Manual

Manual (ImageSizing 0) • Manual.
Stretched (ImageSizing 1) • Stretched.
Tiled (ImageSizing 2) • Tiled.

Horizontal Text Alignment

The HorizontalTextAlignment props are the value for the textHorizontalAlignment property of the Solid class:

Horizontal Text Alignment

graphic = document.windows[0].selection.graphics[0]

graphic.textHorizontalAlignment = HorizontalTextAlignment.Left

Center (HorizontalTextAlignment 1) • Centered horizontally.
Justify (HorizontalTextAlignment 3) • Spacing adjusted to fill available horizontal space.
Left (HorizontalTextAlignment 0) • Aligned left.
Right (HorizontalTextAlignment 2) • Aligned right.

Vertical Text Placement

The VerticalTextPlacement props are the value for the textVerticalPlacement property of the Solid class:

Vertical Text Placement

graphic = document.windows[0].selection.graphics[0]

graphic.textVerticalPlacement = VerticalTextPlacement.Bottom

Middle (VerticalTextPlacement 1) • Centered in the vertical middle of the shape.
Bottom (VerticalTextPlacement 2) • Aligned to the bottom of the shape.
Top (VerticalTextPlacement 0) • Aligned to the top of the shape.

Text Flow Options (v7.11)

The TextFlow enumeration contains the values for the textFlow property of the Solid class:

Text Flow Options

graphic = document.windows[0].selection.graphics[0]

graphic.textVerticalPlacement = VerticalTextPlacement.Bottom

Clip • Using this setting will cause any overflowed text contents to not be displayed.
FillsShape • Use this property to cause the text contents to fill the shape. Note that this property is often set along with the textVerticalPlacement and textHorizontalAlignment shape properties.
FollowsPath • Using this property will cause the text contents to wrap to the exterior boundary of the shape.
Overflow • Using this property will cause the text contents to overflow the lower side of the containing shape.
Resize • Using this property will cause the vertical measurement of the shape to expand or contract to display all of the text contents.
all • An array of all items of this enumeration.

Here is an example script using the FollowsPath property for creating a circle with text on the outside of the shape:

// SETTINGS shapeDiameter = 200 textOnPath = " HOW NOW BROWN COW ·" typefaceName = 'Arial Black' typefaceFactor = 4.4 fontSize = (shapeDiameter / textOnPath.length) * typefaceFactor // CREATE SHAPE WITH TEXT cnvs = document.windows[0].selection.canvas solid = cnvs.newShape() solid.shape = 'Circle' solid.geometry = new Rect(100, 100, shapeDiameter, shapeDiameter) solid.strokeThickness = 0 solid.shadowColor = null solid.fillColor = null solid.textFlow = TextFlow.FollowsPath solid.text = textOnPath solid.textSize = fontSize solid.fontName = typefaceName

omnigraffle://localhost/omnijs-run?script=try%7B%2F%2F%20SETTINGS%0AshapeDiameter%20%3D%20200%0AtextOnPath%20%3D%20%22%20HOW%20NOW%20BROWN%20COW%20%C2%B7%22%0AtypefaceName%20%3D%20%27Arial%20Black%27%0AtypefaceFactor%20%3D%204%2E4%0AfontSize%20%3D%20%28shapeDiameter%20%2F%20textOnPath%2Elength%29%20%2A%20typefaceFactor%0A%2F%2F%20CREATE%20SHAPE%20WITH%20TEXT%0Acnvs%20%3D%20document%2Ewindows%5B0%5D%2Eselection%2Ecanvas%0Asolid%20%3D%20cnvs%2EnewShape%28%29%0Asolid%2Eshape%20%3D%20%27Circle%27%0Asolid%2Egeometry%20%3D%20new%20Rect%28100%2C%20100%2C%20shapeDiameter%2C%20shapeDiameter%29%0Asolid%2EstrokeThickness%20%3D%200%0Asolid%2EshadowColor%20%3D%20null%0Asolid%2EfillColor%20%3D%20null%0Asolid%2EtextFlow%20%3D%20TextFlow%2EFollowsPath%0Asolid%2Etext%20%3D%20textOnPath%0Asolid%2EtextSize%20%3D%20fontSize%0Asolid%2EfontName%20%3D%20typefaceName%7Dcatch%28err%29%7Bconsole%2Elog%28err%29%7D

Text on a Path

// SETTINGS

shapeDiameter = 200

textOnPath = " HOW NOW BROWN COW ·"

typefaceName = 'Arial Black'

typefaceFactor = 4.4

fontSize = (shapeDiameter / textOnPath.length) * typefaceFactor

// CREATE SHAPE WITH TEXT

cnvs = document.windows[0].selection.canvas

solid = cnvs.newShape()

solid.shape = 'Circle'

solid.geometry = new Rect(100, 100, shapeDiameter, shapeDiameter)

solid.strokeThickness = 0

solid.shadowColor = null

solid.fillColor = null

solid.textFlow = TextFlow.FollowsPath

solid.text = textOnPath

solid.textSize = fontSize

solid.fontName = typefaceName

Example script used twice with different shape diameters:

A script example demonstrating the use of the FillsShape property of the TextFlow options:

// SETTINGS shapeDiameter = 200 textContent = "Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Sed posuere consectetur est at lobortis. Cras mattis consectetur purus sit amet fermentum. Etiam porta sem malesuada magna mollis euismod. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla." typefaceName = 'Helvetica' fontSize = 9 // CREATE SHAPE WITH TEXT cnvs = document.windows[0].selection.canvas solid = cnvs.newShape() solid.shape = 'Circle' solid.geometry = new Rect(100, 100, shapeDiameter, shapeDiameter) solid.strokeThickness = 2 solid.shadowColor = null solid.fillColor = null solid.textFlow = TextFlow.FillsShape solid.text = textContent solid.textSize = fontSize solid.fontName = typefaceName solid.strokeColor = Color.lightGray solid.textHorizontalAlignment = HorizontalTextAlignment.Justify solid.textVerticalPlacement = VerticalTextPlacement.Middle

omnigraffle://localhost/omnijs-run?script=try%7B%2F%2F%20SETTINGS%0AshapeDiameter%20%3D%20200%0AtextContent%20%3D%20%22Fusce%20dapibus%2C%20tellus%20ac%20cursus%20commodo%2C%20tortor%20mauris%20condimentum%20nibh%2C%20ut%20fermentum%20massa%20justo%20sit%20amet%20risus%2E%20Cras%20justo%20odio%2C%20dapibus%20ac%20facilisis%20in%2C%20egestas%20eget%20quam%2E%20Praesent%20commodo%20cursus%20magna%2C%20vel%20scelerisque%20nisl%20consectetur%20et%2E%20Sed%20posuere%20consectetur%20est%20at%20lobortis%2E%20Cras%20mattis%20consectetur%20purus%20sit%20amet%20fermentum%2E%20Etiam%20porta%20sem%20malesuada%20magna%20mollis%20euismod%2E%20Cum%20sociis%20natoque%20penatibus%20et%20magnis%20dis%20parturient%20montes%2C%20nascetur%20ridiculus%20mus%2E%20Donec%20ullamcorper%20nulla%20non%20metus%20auctor%20fringilla%2E%22%0AtypefaceName%20%3D%20%27Helvetica%27%0AfontSize%20%3D%209%0A%2F%2F%20CREATE%20SHAPE%20WITH%20TEXT%0Acnvs%20%3D%20document%2Ewindows%5B0%5D%2Eselection%2Ecanvas%0Asolid%20%3D%20cnvs%2EnewShape%28%29%0Asolid%2Eshape%20%3D%20%27Circle%27%0Asolid%2Egeometry%20%3D%20new%20Rect%28100%2C%20100%2C%20shapeDiameter%2C%20shapeDiameter%29%0Asolid%2EstrokeThickness%20%3D%202%0Asolid%2EshadowColor%20%3D%20null%0Asolid%2EfillColor%20%3D%20null%0Asolid%2EtextFlow%20%3D%20TextFlow%2EFillsShape%0Asolid%2Etext%20%3D%20textContent%0Asolid%2EtextSize%20%3D%20fontSize%0Asolid%2EfontName%20%3D%20typefaceName%0Asolid%2EstrokeColor%20%3D%20Color%2ElightGray%0Asolid%2EtextHorizontalAlignment%20%3D%20HorizontalTextAlignment%2EJustify%0Asolid%2EtextVerticalPlacement%20%3D%20VerticalTextPlacement%2EMiddle%7Dcatch%28err%29%7Bconsole%2Elog%28err%29%7D

Text Fills Shape

// SETTINGS

shapeDiameter = 200

textContent = "Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Sed posuere consectetur est at lobortis. Cras mattis consectetur purus sit amet fermentum. Etiam porta sem malesuada magna mollis euismod. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla."

typefaceName = 'Helvetica'

fontSize = 9

// CREATE SHAPE WITH TEXT

cnvs = document.windows[0].selection.canvas

solid = cnvs.newShape()

solid.shape = 'Circle'

solid.geometry = new Rect(100, 100, shapeDiameter, shapeDiameter)

solid.strokeThickness = 2

solid.shadowColor = null

solid.fillColor = null

solid.textFlow = TextFlow.FillsShape

solid.text = textContent

solid.textSize = fontSize

solid.fontName = typefaceName

solid.strokeColor = Color.lightGray

solid.textHorizontalAlignment = HorizontalTextAlignment.Justify

solid.textVerticalPlacement = VerticalTextPlacement.Middle

Shape Properties Example Script

var canvas = document.windows[0].selection.canvas var g1 = canvas.newShape() g1.textUnitRect = new Rect(0.33, 0.33, 0.34, 0.34) g1.rotation = 90 g1.shape = "AdjustableStar" g1.fillType = FillType.Radial g1.text = "STAR" g1.textSize = 36 g1.textRotationIsRelative = false g1.shadowVector = new Point(13.00, 13.00) g1.geometry = new Rect(260.00, 89.00, 356.00, 356.00) g1.shadowColor = Color.RGB(0.0, 0.0, 0.0, 0.382143621575342) g1.strokeColor = Color.RGB(0.0, 0.0, 1.0) g1.gradientColor = Color.RGB(0.0, 0.0, 1.0) g1.shadowFuzziness = 12 g1.fillColor = Color.RGB(1.0, 1.0, 1.0) g1.strokeThickness = 5 g1.strokePattern = StrokeDash.Dash4on4off

Create a Rotated Star

var canvas = document.windows[0].selection.canvas

var g1 = canvas.newShape()

g1.textUnitRect = new Rect(0.33, 0.33, 0.34, 0.34)

g1.rotation = 90

g1.shape = "AdjustableStar"

g1.fillType = FillType.Radial

g1.text = "STAR"

g1.textSize = 36

g1.textRotationIsRelative = false

g1.shadowVector = new Point(13.00, 13.00)

g1.geometry = new Rect(260.00, 89.00, 356.00, 356.00)

g1.shadowColor = Color.RGB(0.0, 0.0, 0.0, 0.382143621575342)

g1.strokeColor = Color.RGB(0.0, 0.0, 1.0)

g1.gradientColor = Color.RGB(0.0, 0.0, 1.0)

g1.shadowFuzziness = 12

g1.fillColor = Color.RGB(1.0, 1.0, 1.0)

g1.strokeThickness = 5

g1.strokePattern = StrokeDash.Dash4on4off

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

Mention of third-party websites and products is for informational purposes only and constitutes neither an endorsement nor a recommendation. OMNI-AUTOMATION.COM assumes no responsibility with regard to the selection, performance or use of information or products found at third-party websites. OMNI-AUTOMATION.COM provides this only as a convenience to our users. OMNI-AUTOMATION.COM has not tested the information found on these sites and makes no representations regarding its accuracy or reliability. There are risks inherent in the use of any information or products found on the Internet, and OMNI-AUTOMATION.COM assumes no responsibility in this regard. Please understand that a third-party site is independent from OMNI-AUTOMATION.COM and that OMNI-AUTOMATION.COM has no control over the content on that website. Please contact the vendor for additional information.