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

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

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

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

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

Creating Shapes

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

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

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

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

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

Shape Vertices  1  and Shape Control Points  2 

shape vertices and shape control points

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

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

The resulting thought-bubble:

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

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

The resulting four-pointed star shape:

4-pointed-star  

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

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:

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 }
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%09%2F%2F%20processing%20code%20goes%20here%0A%7D

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
 

Text Autosizing

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

 

Fill Type

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

 

Image Sizing

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

 

Horizontal Text Alignment

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

 

Vertical Text Placement

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

Example Script

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