Draw a Circle in Omnigraffle
Connecting Graphics
The ability to visualize information and relationships is a core feature of OmniGraffle. For example, past connecting graphics with lines and arrows, a script can show the hierarchy of an organization or the human relationship betwixt objects. This page describes how to connect graphics with lines.
In that location are a couple approaches to connecting objects in an OmniGraffle document. You lot can connect existing objects in the document; create new objects to connect, or clone existing objects to maintain a item object shape or styling. The examples on this page demonstrate the connection of cloned objects.
Allowing Connections
At that place is a user-settable preference for a selected object to enable or disable its ability to receive connexion lines from other objects (see paradigm beneath). In the examples shown on this folio, the allowsConnections property of the Graphics class will be enabled within the scripts themselves.
Connecting Two Graphics
As an instance, here's how to connect 2 named graphics on the current canvas:
cnvs = document.windows[0].selection.canvas graphicA = cnvs.graphicWithName('My First Graphic') graphicB = cnvs.graphicWithName('My Second Graphic') line = cnvs.connect(graphicA,graphicB) line.lineType = LineType.Curved
| Connecting Two Named Graphics | ||
| 01 | cnvs = document.windows[0].option.canvas | |
| 02 | graphicA = cnvs.graphicWithName('My First Graphic') | |
| 03 | graphicB = cnvs.graphicWithName('My 2nd Graphic') | |
| 04 | line = cnvs.connect(graphicA, graphicB) | |
| 05 | line.lineType = LineType.Curved | |
Every bit an case, here's how to connect two selected graphics on the current canvass:
graphics = document.windows[0].pick.graphics if (graphics.length === ii){ cnvs = document.windows[0].selection.canvas line = cnvs.connect(graphics[0],graphics[i]) } else { alertTitle = 'Pick Mistake' alertMessage = 'Please select the two graphics to connect.' var alert = new Alarm(alertTitle, alertMessage) alert.show(function(effect){}) }
omnigraffle://localhost/omnijs-run?script=graphics%twenty%3D%20document%2Ewindows%5B0%5D%2Eselection%2Egraphics%0Aif%20%28graphics%2Elength%20%3D%3D%3D%202%29%7B%0A%09cnvs%xx%3D%20document%2Ewindows%5B0%5D%2Eselection%2Ecanvas%0A%09line%20%3D%20cnvs%2Econnect%28graphics%5B0%5D%2Cgraphics%5B1%5D%29%0A%7D%20else%20%7B%0A%09alertTitle%twenty%3D%20%27Selection%20Error%27%0A%09alertMessage%twenty%3D%xx%27Please%20select%20the%20two%20graphics%20to%20connect%2E%27%0A%09var%20alert%xx%3D%20new%20Alert%28alertTitle%2C%20alertMessage%29%0A%09alert%2Eshow%28function%28result%29%7B%7D%29%0A%7D
| Connecting Ii Selected Graphics | ||
| 01 | graphics = document.windows[0].option.graphics | |
| 02 | if (graphics.length === 2){ | |
| 03 | cnvs = document.windows[0].selection.canvas | |
| 04 | line = cnvs.connect(graphics[0],graphics[one]) | |
| 05 | } else { | |
| 06 | alertTitle = 'Selection Error' | |
| 07 | alertMessage = 'Please select the two graphics to connect.' | |
| 08 | var alert = new Alert(alertTitle, alertMessage) | |
| 09 | warning.prove(function(result){}) | |
| 10 | } | |
| 11 | ||
Create a Continued Graphic Clone
The script case beneath, demonstrates how to create a continued clone of the currently selected graphic, with the new clone replacing the original item as the selected detail (run across image below).
The cloning is accomplished using the duplicateTo() method of the Sail class, and the connection is achieved using the connect() method of the Graphic class. And the selection wil be controlled using the deselect() and select() methods of the GraphicView form.
In the example, the clone is positioned directly below the original item, but the script can exist adapted to place the clone to the left, correct, or even diagonally from the original item, by using the properties of the Rect class to determine the new point for the cloned item's origin (position). For case, to create a clone of the selected object placed to the right of the original, the coordinates for the new betoken would be expressed equally:
(geo.maxX + commencement, geo.minY) instead of (geo.minX, geo.maxY + first)
//Clone and Connect if (document.windows[0].choice.graphics.length != 1){ title = "Choice ERROR" bulletin = "Delight select a single graphic." new Alert(title, bulletin).show(office(result){throw new Error('user cancelled')}) } else { cnvs = certificate.windows[0].selection.sail graphic = document.windows[0].selection.graphics[0] graphic.allowsConnections = truthful geo = graphic.geometry offset = 72 clone = graphic.duplicateTo(new Point(geo.minX, geo.maxY + offset),cnvs) line = cnvs.connect(graphic,clone) line.lineType = LineType.Curved if(graphic.strokeColor == cipher){ lcolor = Color.black } else { lcolor = graphic.strokeColor } line.strokeColor = lcolor line.shadowColor = nil line.strokeThickness = 4 line.strokeType = StrokeType.Single line.headType = 'Arrow' line.tailType = 'None' document.windows[0].option.view.deselect([graphic]) document.windows[0].option.view.select([clone]) }
omnigraffle:///omnijs-run?script=%2F%2FClone%20and%20Connect%0Aif%20%28document%2Ewindows%5B0%5D%2Eselection%2Egraphics%2Elength%xx%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%7Bthrow%20new%20Error%28%27user%20cancelled%27%29%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%09graphic%2EallowsConnections%20%3D%20true%0A%09geo%twenty%3D%20graphic%2Egeometry%0A%09offset%xx%3D%2072%0A%09clone%20%3D%20graphic%2EduplicateTo%28new%20Point%28geo%2EminX%2C%20geo%2EmaxY%20%2B%20offset%29%2Ccnvs%29%0A%09line%20%3D%20cnvs%2Econnect%28graphic%2Cclone%29%0A%09line%2ElineType%20%3D%20LineType%2ECurved%0A%09if%28graphic%2EstrokeColor%20%3D%3D%20null%29%7B%0A%09%09lcolor%20%3D%20Color%2Eblack%0A%09%7D%20else%20%7B%0A%09%09lcolor%20%3D%20graphic%2EstrokeColor%0A%09%7D%0A%09line%2EstrokeColor%20%3D%20lcolor%0A%09line%2EshadowColor%20%3D%20null%0A%09line%2EstrokeThickness%20%3D%204%0A%09line%2EstrokeType%twenty%3D%20StrokeType%2ESingle%0A%09line%2EheadType%twenty%3D%20%27Arrow%27%0A%09line%2EtailType%20%3D%20%27None%27%0A%09document%2Ewindows%5B0%5D%2Eselection%2Eview%2Edeselect%28%5Bgraphic%5D%29%0A%09document%2Ewindows%5B0%5D%2Eselection%2Eview%2Eselect%28%5Bclone%5D%29%0A%7D
| Create a Continued Graphic Clone | ||
| 01 | if (document.windows[0].selection.graphics.length != 1){ | |
| 02 | title = "Pick ERROR" | |
| 03 | message = "Please select a single graphic." | |
| 04 | new Alert(title, message).show(office(result){throw new Error('user cancelled')}) | |
| 05 | } else { | |
| 06 | cnvs = certificate.windows[0].selection.canvass | |
| 07 | graphic = document.windows[0].selection.graphics[0] | |
| 08 | graphic.allowsConnections = true | |
| 09 | geo = graphic.geometry | |
| ten | commencement = 72 | |
| eleven | clone = graphic.duplicateTo(new Bespeak(geo.minX, geo.maxY + offset), cnvs) | |
| 12 | line = cnvs.connect(graphic, clone) | |
| 13 | line.lineType = LineType.Curved | |
| fourteen | if(graphic.strokeColor == null){ | |
| xv | lcolor = Color.blackness | |
| 16 | } else { | |
| 17 | lcolor = graphic.strokeColor | |
| eighteen | } | |
| 19 | line.strokeColor = lcolor | |
| xx | line.shadowColor = zero | |
| 21 | line.strokeThickness = 4 | |
| 22 | line.strokeType = StrokeType.Unmarried | |
| 23 | line.headType = 'Arrow' | |
| 24 | line.tailType = 'None' | |
| 25 | document.windows[0].option.view.deselect([graphic]) | |
| 26 | certificate.windows[0].selection.view.select([clone]) | |
| 27 | } | |
TIP: The script higher up makes an excellent assigned object action tool for quickly creating a concatenation of connected objects.
5-Item Diagram Circumvolve
Here's a script that delivers in an instant, something that is hard to reach past hand: the cosmos of a relationship circle. In this instance, at that place are five items (an original detail cloned 4 times) placed equidistant from each other in a connected circumvolve. The script is fabricated possible through the exposed properties of the Rect grade, and the methods and properties from the standard JavaScript Math class.
TIP: The circle has been added to serve equally a template guide should yous wish to bend the straight connection lines into curves (see epitome below).
if (document.windows[0].selection.graphics.length != 1){ title = "Choice Mistake" message = "Please select a single graphic." new Alert(title, message).bear witness(function(result){throw new Mistake('user cancelled')}) } else { // connect lines function function connectObjects(startObj,endObj){ cnvs = document.windows[0].selection.canvas aLine = cnvs.connect(startObj,endObj) aLine.lineType = LineType.Curved aLine.strokeColor = Color.blackness aLine.shadowColor = null aLine.strokeThickness = iv aLine.strokeType = StrokeType.Single aLine.headType = 'Arrow' aLine.tailType = 'None' } // number of diagram items numObj = 5 // origin object properties cnvs = document.windows[0].choice.canvas obj = certificate.windows[0].selection.graphics[0] objGeo = obj.geometry objC = objGeo.center objH = objGeo.pinnacle objW = objGeo.width // diameter and radius of circle diameter = objH * (numObj + 1) radius = diameter/2 console.log('radius: ' + radius) // middle of the circle centerX = objC.x centerY = objC.y + radius console.log('CC: ' + centerX + ', ' + centerY) // create a circle cRect = new Rect(objGeo.midX - radius,objGeo.midY,diameter,bore) circle = cnvs.addShape('Circle',cRect) circle.orderBelow(obj) // bending of each segment arc = 360/numObj objP = obj arcT = 0 for(i = 0; i < numObj-1; i++){ arcT = arcT + arc console.log('arcT: ' + arcT) if (arcT == 90){ // 0 nX = centerX + radius nY = centerY panel.log(nX + ", " + nY) newPoint = new Bespeak(nX-(objW/ii),nY-(objH/2)) } else if(arcT == 180 ){ // 90 nX = centerX nY = centerY + radius console.log(nX + ", " + nY) newPoint = new Point(nX-(objW/two),nY-(objH/2)) } else if(arcT == 270){ // 180 nX = centerX - radius nY = centerY console.log(nX + ", " + nY) newPoint = new Indicate(nX-(objW/2),nY-(objH/2)) } else if(arcT == 360 ){ // 270 nX = centerX nY = centerY - radius console.log(nX + ", " + nY) newPoint = new Point(nX-(objW/2),nY-(objH/2)) } else if(arcT < xc && arcT > 0){ panel.log('Q1') angle = 90 - arcT console.log(angle) radians = angle * Math.PI / 180 nX = centerX + (radius * Math.cos(radians)) nY = centerY - (radius * Math.sin(radians)) panel.log(nX + ", " + nY) newPoint = new Signal(nX-(objW/ii),nY-(objH/2)) } else if(arcT > xc && arcT < 180){ panel.log('Q2') angle = 90 - (180 - arcT) // adjacent angle console.log(angle) radians = angle * Math.PI / 180 nX = centerX + (radius * Math.cos(radians)) nY = centerY + (radius * Math.sin(radians)) console.log(nX + ", " + nY) newPoint = new Indicate(nX-(objW/two),nY-(objH/2)) } else if(arcT > 180 && arcT < 270){ panel.log('Q3') angle = 270 - arcT console.log(angle) radians = angle * Math.PI / 180 nX = centerX - (radius * Math.cos(radians)) nY = centerY + (radius * Math.sin(radians)) console.log(nX + ", " + nY) newPoint = new Bespeak(nX-(objW/two),nY-(objH/two)) } else if(arcT > 270){ console.log('Q4') angle = 90 - (360 - arcT) console.log(angle) radians = angle * Math.PI / 180 nX = centerX - (radius * Math.cos(radians)) nY = centerY - (radius * Math.sin(radians)) console.log(nX + ", " + nY) newPoint = new Point(nX-(objW/2),nY-(objH/two)) } objN = obj.duplicateTo(newPoint) connectObjects(objP,objN) if (i == numObj -2){ // connect to the starting shape connectObjects(objN,obj) } else { objP = objN } } }
omnigraffle:///omnijs-run?script=if%twenty%28document%2Ewindows%5B0%5D%2Eselection%2Egraphics%2Elength%xx%21%3D%201%29%7B%0A%09title%20%3D%twenty%22SELECTION%20ERROR%22%0A%09message%twenty%3D%20%22Please%20select%20a%20single%20graphic%2E%22%0A%09new%20Alert%28title%2C%20message%29%2Eshow%28function%28result%29%7Bthrow%20new%20Error%28%27user%20cancelled%27%29%7D%29%0A%7D%20else%20%7B%0A%09%2F%2F%20connect%20lines%20function%0A%09function%20connectObjects%28startObj%2CendObj%29%7B%0A%09%09cnvs%xx%3D%20document%2Ewindows%5B0%5D%2Eselection%2Ecanvas%0A%09%09aLine%20%3D%20cnvs%2Econnect%28startObj%2CendObj%29%0A%09%09aLine%2ElineType%20%3D%20LineType%2ECurved%0A%09%09aLine%2EstrokeColor%twenty%3D%20Color%2Eblack%0A%09%09aLine%2EshadowColor%xx%3D%20null%0A%09%09aLine%2EstrokeThickness%20%3D%204%0A%09%09aLine%2EstrokeType%20%3D%20StrokeType%2ESingle%0A%09%09aLine%2EheadType%20%3D%xx%27Arrow%27%0A%09%09aLine%2EtailType%20%3D%20%27None%27%0A%09%7D%0A%09%0A%09%2F%2F%20number%20of%20diagram%20items%0A%09numObj%xx%3D%205%0A%09%0A%09%2F%2F%20origin%20object%20properties%0A%09cnvs%xx%3D%20document%2Ewindows%5B0%5D%2Eselection%2Ecanvas%0A%09obj%20%3D%20document%2Ewindows%5B0%5D%2Eselection%2Egraphics%5B0%5D%0A%09objGeo%20%3D%20obj%2Egeometry%0A%09objC%20%3D%20objGeo%2Ecenter%0A%09objH%20%3D%20objGeo%2Eheight%0A%09objW%20%3D%20objGeo%2Ewidth%0A%09%2F%2F%20diameter%20and%20radius%20of%20circle%0A%09diameter%20%3D%20objH%20*%20%28numObj%20%2B%201%29%0A%09radius%xx%3D%20diameter%2F2%0A%09console%2Elog%28%27radius%3A%xx%27%20%2B%20radius%29%0A%09%2F%2F%20center%20of%20the%20circle%0A%09centerX%twenty%3D%20objC%2Ex%0A%09centerY%20%3D%20objC%2Ey%20%2B%20radius%0A%09console%2Elog%28%27CC%3A%20%27%20%2B%20centerX%20%2B%twenty%27%2C%xx%27%20%2B%20centerY%29%0A%09%2F%2F%20create%20a%20circle%0A%09cRect%20%3D%20new%20Rect%28objGeo%2EmidX%xx-%20radius%2CobjGeo%2EmidY%2Cdiameter%2Cdiameter%29%0A%09circle%twenty%3D%20cnvs%2EaddShape%28%27Circle%27%2CcRect%29%0A%09circle%2EorderBelow%28obj%29%0A%0A%09%2F%2F%20angle%20of%20each%20segment%0A%09arc%20%3D%20360%2FnumObj%0A%0A%09objP%twenty%3D%20obj%0A%09arcT%20%3D%200%0A%09for%28i%20%3D%200%3B%20i%20%3C%20numObj-1%3B%20i%2B%2B%29%7B%0A%09%09arcT%20%3D%20arcT%xx%2B%20arc%0A%09%09console%2Elog%28%27arcT%3A%xx%27%twenty%2B%20arcT%29%0A%09%09if%20%28arcT%20%3D%3D%2090%29%7B%0A%09%09%09%2F%2F%200%0A%09%09%09nX%twenty%3D%20centerX%20%2B%20radius%0A%09%09%09nY%20%3D%20centerY%0A%09%09%09console%2Elog%28nX%20%2B%20%22%2C%twenty%22%20%2B%20nY%29%0A%09%09%09newPoint%twenty%3D%20new%20Point%28nX-%28objW%2F2%29%2CnY-%28objH%2F2%29%29%0A%09%09%7D%20else%20if%28arcT%20%3D%3D%20180%20%29%7B%0A%09%09%09%2F%2F%2090%0A%09%09%09nX%20%3D%20centerX%0A%09%09%09nY%20%3D%20centerY%20%2B%20radius%0A%09%09%09console%2Elog%28nX%20%2B%twenty%22%2C%20%22%20%2B%20nY%29%0A%09%09%09newPoint%20%3D%20new%20Point%28nX-%28objW%2F2%29%2CnY-%28objH%2F2%29%29%0A%09%09%7D%20else%20if%28arcT%20%3D%3D%20270%29%7B%0A%09%09%09%2F%2F%20180%0A%09%09%09nX%20%3D%20centerX%20-%20radius%0A%09%09%09nY%twenty%3D%20centerY%0A%09%09%09console%2Elog%28nX%20%2B%20%22%2C%20%22%twenty%2B%20nY%29%0A%09%09%09newPoint%20%3D%20new%20Point%28nX-%28objW%2F2%29%2CnY-%28objH%2F2%29%29%0A%09%09%7D%20else%20if%28arcT%20%3D%3D%20360%20%29%7B%0A%09%09%09%2F%2F%20270%0A%09%09%09nX%20%3D%20centerX%0A%09%09%09nY%twenty%3D%20centerY%20-%20radius%0A%09%09%09console%2Elog%28nX%twenty%2B%20%22%2C%twenty%22%20%2B%20nY%29%0A%09%09%09newPoint%twenty%3D%20new%20Point%28nX-%28objW%2F2%29%2CnY-%28objH%2F2%29%29%0A%09%09%7D%20else%20if%28arcT%20%3C%2090%xx%26%26%20arcT%20%3E%200%29%7B%0A%09%09%09console%2Elog%28%27Q1%27%29%0A%09%09%09angle%20%3D%2090%20-%20arcT%0A%09%09%09console%2Elog%28angle%29%0A%09%09%09radians%twenty%3D%20angle%20*%20Math%2EPI%xx%2F%20180%0A%09%09%09nX%xx%3D%20centerX%20%2B%20%28radius%20*%20Math%2Ecos%28radians%29%29%0A%09%09%09nY%twenty%3D%20centerY%xx-%20%28radius%twenty*%20Math%2Esin%28radians%29%29%0A%09%09%09console%2Elog%28nX%20%2B%twenty%22%2C%20%22%xx%2B%20nY%29%0A%09%09%09newPoint%20%3D%20new%20Point%28nX-%28objW%2F2%29%2CnY-%28objH%2F2%29%29%0A%09%09%7D%20else%20if%28arcT%20%3E%2090%twenty%26%26%20arcT%20%3C%20180%29%7B%0A%09%09%09console%2Elog%28%27Q2%27%29%0A%09%09%09angle%20%3D%2090%20-%20%28180%twenty-%20arcT%29%20%2F%2F%20adjacent%20angle%0A%09%09%09console%2Elog%28angle%29%0A%09%09%09radians%20%3D%20angle%twenty*%20Math%2EPI%20%2F%20180%0A%09%09%09nX%twenty%3D%20centerX%twenty%2B%20%28radius%xx*%20Math%2Ecos%28radians%29%29%0A%09%09%09nY%20%3D%20centerY%20%2B%20%28radius%20*%20Math%2Esin%28radians%29%29%0A%09%09%09console%2Elog%28nX%xx%2B%twenty%22%2C%20%22%20%2B%20nY%29%0A%09%09%09newPoint%20%3D%20new%20Point%28nX-%28objW%2F2%29%2CnY-%28objH%2F2%29%29%0A%09%09%7D%20else%20if%28arcT%xx%3E%20180%20%26%26%20arcT%20%3C%20270%29%7B%0A%09%09%09console%2Elog%28%27Q3%27%29%0A%09%09%09angle%20%3D%20270%20-%20arcT%0A%09%09%09console%2Elog%28angle%29%0A%09%09%09radians%20%3D%20angle%20*%20Math%2EPI%xx%2F%20180%0A%09%09%09nX%20%3D%20centerX%20-%20%28radius%20*%20Math%2Ecos%28radians%29%29%0A%09%09%09nY%20%3D%20centerY%xx%2B%20%28radius%xx*%20Math%2Esin%28radians%29%29%0A%09%09%09console%2Elog%28nX%xx%2B%20%22%2C%twenty%22%20%2B%20nY%29%0A%09%09%09newPoint%20%3D%20new%20Point%28nX-%28objW%2F2%29%2CnY-%28objH%2F2%29%29%0A%09%09%7D%20else%20if%28arcT%20%3E%20270%29%7B%0A%09%09%09console%2Elog%28%27Q4%27%29%0A%09%09%09angle%twenty%3D%2090%20-%20%28360%20-%20arcT%29%0A%09%09%09console%2Elog%28angle%29%0A%09%09%09radians%20%3D%20angle%xx*%20Math%2EPI%20%2F%20180%0A%09%09%09nX%20%3D%20centerX%xx-%20%28radius%20*%20Math%2Ecos%28radians%29%29%0A%09%09%09nY%20%3D%20centerY%20-%twenty%28radius%20*%20Math%2Esin%28radians%29%29%0A%09%09%09console%2Elog%28nX%20%2B%twenty%22%2C%20%22%xx%2B%20nY%29%0A%09%09%09newPoint%20%3D%20new%20Point%28nX-%28objW%2F2%29%2CnY-%28objH%2F2%29%29%0A%09%09%7D%0A%09%09objN%twenty%3D%20obj%2EduplicateTo%28newPoint%29%0A%09%09connectObjects%28objP%2CobjN%29%0A%09%09if%20%28i%20%3D%3D%20numObj%xx-ii%29%7B%0A%09%09%09%2F%2F%20connect%20to%20the%20starting%20shape%0A%09%09%09connectObjects%28objN%2Cobj%29%0A%09%09%7D%20else%twenty%7B%0A%09%09%09objP%20%3D%20objN%0A%09%09%7D%0A%09%7D%0A%7D
| Diagram Circle Maker | ||
| 01 | if (document.windows[0].choice.graphics.length != 1){ | |
| 02 | title = "Choice ERROR" | |
| 03 | message = "Please select a single graphic." | |
| 04 | new Alert(title, message).show(function(result){throw new Error('user cancelled')}) | |
| 05 | } else { | |
| 06 | // connect lines function | |
| 07 | function connectObjects(startObj,endObj){ | |
| 08 | cnvs = document.windows[0].selection.canvas | |
| 09 | aLine = cnvs.connect(startObj,endObj) | |
| 10 | aLine.lineType = LineType.Curved | |
| 11 | aLine.strokeColor = Color.black | |
| 12 | aLine.shadowColor = zip | |
| 13 | aLine.strokeThickness = 4 | |
| 14 | aLine.strokeType = StrokeType.Single | |
| fifteen | aLine.headType = 'Arrow' | |
| 16 | aLine.tailType = 'None' | |
| 17 | } | |
| 18 | ||
| xix | // number of diagram items | |
| xx | numObj = 5 | |
| 21 | ||
| 22 | // origin object properties | |
| 23 | cnvs = document.windows[0].selection.canvas | |
| 24 | obj = document.windows[0].pick.graphics[0] | |
| 25 | objGeo = obj.geometry | |
| 26 | objC = objGeo.center | |
| 27 | objH = objGeo.height | |
| 28 | objW = objGeo.width | |
| 29 | // bore and radius of circle | |
| 30 | diameter = objH * (numObj + 1) | |
| 31 | radius = diameter/2 | |
| 32 | console.log('radius: ' + radius) | |
| 33 | // center of the circle | |
| 34 | centerX = objC.ten | |
| 35 | centerY = objC.y + radius | |
| 36 | panel.log('CC: ' + centerX + ', ' + centerY) | |
| 37 | // create a circle | |
| 38 | cRect = new Rect(objGeo.midX - radius,objGeo.midY,diameter,diameter) | |
| 39 | circle = cnvs.addShape('Circle',cRect) | |
| 40 | circle.orderBelow(obj) | |
| 41 | ||
| 42 | // angle of each segment | |
| 43 | arc = 360/numObj | |
| 44 | ||
| 45 | objP = obj | |
| 46 | arcT = 0 | |
| 47 | for(i = 0; i < numObj-1; i++){ | |
| 48 | arcT = arcT + arc | |
| 49 | panel.log('arcT: ' + arcT) | |
| 50 | if (arcT == 90){ | |
| 51 | // 0 | |
| 52 | nX = centerX + radius | |
| 53 | nY = centerY | |
| 54 | console.log(nX + ", " + nY) | |
| 55 | newPoint = new Betoken(nX-(objW/2),nY-(objH/2)) | |
| 56 | } else if(arcT == 180 ){ | |
| 57 | // xc | |
| 58 | nX = centerX | |
| 59 | nY = centerY + radius | |
| 60 | console.log(nX + ", " + nY) | |
| 61 | newPoint = new Point(nX-(objW/2),nY-(objH/2)) | |
| 62 | } else if(arcT == 270){ | |
| 63 | // 180 | |
| 64 | nX = centerX - radius | |
| 65 | nY = centerY | |
| 66 | console.log(nX + ", " + nY) | |
| 67 | newPoint = new Point(nX-(objW/ii),nY-(objH/2)) | |
| 68 | } else if(arcT == 360 ){ | |
| 69 | // 270 | |
| 70 | nX = centerX | |
| 71 | nY = centerY - radius | |
| 72 | console.log(nX + ", " + nY) | |
| 73 | newPoint = new Betoken(nX-(objW/2),nY-(objH/ii)) | |
| 74 | } else if(arcT < 90 && arcT > 0){ | |
| 75 | console.log('Q1') | |
| 76 | angle = xc - arcT | |
| 77 | panel.log(angle) | |
| 78 | radians = angle * Math.PI / 180 | |
| 79 | nX = centerX + (radius * Math.cos(radians)) | |
| 80 | nY = centerY - (radius * Math.sin(radians)) | |
| 81 | console.log(nX + ", " + nY) | |
| 82 | newPoint = new Point(nX-(objW/2),nY-(objH/2)) | |
| 83 | } else if(arcT > 90 && arcT < 180){ | |
| 84 | console.log('Q2') | |
| 85 | bending = 90 - (180 - arcT) // adjacent angle | |
| 86 | console.log(angle) | |
| 87 | radians = angle * Math.PI / 180 | |
| 88 | nX = centerX + (radius * Math.cos(radians)) | |
| 89 | nY = centerY + (radius * Math.sin(radians)) | |
| 90 | console.log(nX + ", " + nY) | |
| 91 | newPoint = new Point(nX-(objW/2),nY-(objH/2)) | |
| 92 | } else if(arcT > 180 && arcT < 270){ | |
| 93 | console.log('Q3') | |
| 94 | bending = 270 - arcT | |
| 95 | console.log(bending) | |
| 96 | radians = angle * Math.PI / 180 | |
| 97 | nX = centerX - (radius * Math.cos(radians)) | |
| 98 | nY = centerY + (radius * Math.sin(radians)) | |
| 99 | console.log(nX + ", " + nY) | |
| 100 | newPoint = new Indicate(nX-(objW/ii),nY-(objH/2)) | |
| 101 | } else if(arcT > 270){ | |
| 102 | panel.log('Q4') | |
| 103 | angle = ninety - (360 - arcT) | |
| 104 | console.log(bending) | |
| 105 | radians = angle * Math.PI / 180 | |
| 106 | nX = centerX - (radius * Math.cos(radians)) | |
| 107 | nY = centerY - (radius * Math.sin(radians)) | |
| 108 | console.log(nX + ", " + nY) | |
| 109 | newPoint = new Indicate(nX-(objW/2),nY-(objH/two)) | |
| 110 | } | |
| 111 | objN = obj.duplicateTo(newPoint) | |
| 112 | connectObjects(objP,objN) | |
| 113 | if (i == numObj -ii){ | |
| 114 | // connect to the starting shape | |
| 115 | connectObjects(objN,obj) | |
| 116 | } else { | |
| 117 | objP = objN | |
| 118 | } | |
| 119 | } | |
| 120 | } | |
TIP: For those interested in the underlying logic of this automation tool, the script uses a bones trigonometry formula to summate the 10 (horizontal) and y (vertical) coordinates for each of the private arc-segment points on the circle: (10=r(cosA), y=r(sinA)) where r is the circumvolve radius and A is the angle of the arc segment. Math is then cool!
And the epitome beneath shows connection lines edited to be curves:
TIP: Change the value of the numObj variable in the script to be the number of diagram items you want, such as: three, four, 5, half-dozen, 7, 8, or 9
Magnets
Past default, connectedness lines are drawn from the center of ane graphic to the center of another graphic, as shown in the previous example. Nonetheless, you tin can choose to "magnetize" the handles of a graphic so that connectedness lines volition be fatigued to them. A connection magnet is a identify on a shape that attracts continued lines.
The pop-downward bill of fare under the Other Objects tab (macOS), lists the various options for determining which handles tin can receive a connecting line. This setting is currently not settable via a script, and and then any scripts creating connections volition honor the current setting of the object to exist connected.
For example, the epitome below shows the result of the previous script, if the originating object has active magnets for the north and s handles (see below).
UNDER CONSTRUCTION
This webpage is in the process of existence developed. Any content may change and may not exist authentic or complete at this fourth dimension.
DISCLAIMER
Source: https://omni-automation.com/omnigraffle/graphics-02.html
0 Response to "Draw a Circle in Omnigraffle"
Postar um comentário