View Single Post
 Joel Omni 2006-06-22, 01:26 PM [continued...] Shapes Example: So now that we've seen how to make shapes let run through an example. In this example we will create a triangle with its point upward and a shape that looks somewhat like a baseball infield but with on line at the outfield. Lets start off with by saying we want to make some shapes. Then we start an new shape with a curly brace. shapes = ( { Next we start by defining whether it can export or not, the shapes inspector position and the name. In this case will make it exportable, object 40 in the inspector, and named TrianglePointUp ShouldExport = YES; InspectorGroup = 40; ShapeName = TrianglePointUp; We will then define the stroke path of our triangle by first picking a starting point which will be the point, x = 0, y = 0.5. StrokePath = { elements = ( {element = MOVETO; point = "{0, -0.5}"; }, Note that since we will be adding more elements, we have a comma after the MOVETO element. Now lets draw the three sides of the triangle and close up the stroke path. {element = LINETO; point = "{0.5, 0.5}"; }, {element = LINETO; point = "{-0.5, 0.5}"; }, {element = LINETO; point = "{0, -0.5}"; } ); }; Finally we will define the boundary of the text box and end the creation of our first shape. For this shape the text box will start at x = 0.25, y = 0.5 and it will have a height and width of 0.5. TextBounds = "{{0.25, 0.5}, {0.5, 0.5}}"; }, Since we will be adding another shape we add a comma after we close off our triangle shape. If we weren't adding another shape we would omit this comma. We'll now start off on our baseball diamond and set all the basic values. { ShouldExport = YES; InspectorGroup = 41; ShapeName = BaseballDiamond; Now we will create the StrokePath, remembering that we won't be closing it off. StrokePath = { elements = ( {element = MOVETO; point = "{0.353553, 0.353553}"; }, {element = LINETO; point = "{-0.353553, 0.353553}"; }, {element = LINETO; point = "{-0.353553, -0.353553}"; } ); }; After we do this we will then define our FillPath which includes the curves FillPath = { elements = ( {element = MOVETO; point = "{0.353553, -0.353553}"; }, { control1 = "{0.548816, -0.158291}"; control2 = "{0.548816, 0.158291}"; element = CURVETO; point = "{0.353553, 0.353553}"; }, {element = LINETO; point = "{-0.353553, 0.353553}"; }, {element = LINETO; point = "{-0.353553, -0.353553}"; }, { control1 = "{-0.158291, -0.548816}"; control2 = "{0.158291, -0.548816}"; element = CURVETO; point = "{0.353553, -0.353553}"; } ); }; And we will conclude our shapes with the text bounds for the baseball diamond. TextBounds = "{{0.25, 0.5}, {0.5, 0.5}}"; } ); One thing to note, this I have not had time to work out is that the boundary point of the shape are incorrect for this baseball diamond. There is a large chunk of empty space on the bottom and the left side that should be removed. This is because my values that I used did not extend all the way out to 0.5 in the left and downward directions. A recalculation of values is necessary to correct this issue. Now that we've take a look at shape creation, lets move on to creating arrowheads. Like creating shapes we start a new arrowhead with a curly brace inside of the arrowheads declaration. Like with shapes we have a number of options that can be set for each arrowhead which will now be discussed. Filled: This option can be set as either YES or NO, with NO being the default option is if this option is not set. The syntax for Filled is as follows: Filled = YES; Gap and LineGap: These options are used to control the offset of the arrowhead from its connecting object when the line size is to be scaled. This offset is calculated by the following equation: Offset = Gap + LineGap · LineThickness Pointier arrowheads need larger LineGap values to keep them from overlapping with the graphics as the thickness is increased. The syntax for Gap and Line values is as follows. Gap = 0.5; LineGap = 1; To set these values, it is best to first set the LineGap value. The best way to do this is to begin with your Gap and LineGap values set to zero. In OmniGraffle, draw a completely horizontal line and place your new arrowheads on both ends. Zoom in on the line to 800% and make sure the line is selected. In the style inspector, increase the line size from 1 to 8 an observe the tips of your arrowhead. If the tips remain at the same horizontal position for all sizes from 1 to 8, your LineGap value is properly set. If the tips move outward as you increase the size, you need to increase the value of LineGap and conversely if the tips move inward you need to decrease LineGap. I recommend that you don't try for accuracy above the tenthes digit, meaning don't try and set a value such as 1.43, since 1.4 is more than acceptable. Once you have the LineGap set, you may still have some offset that needs to be adjusted for. Draw two identical squares on the same horizontal level with so gap between them. Then draw a single line that connects the two shapes (connections will need to be turned on). Zoom in to 800% again and look at the tips of your lines. If the tips meet up perfectly with the edges of the squares, your Gap value is set correctly. If there is a gap between the tips and the squares, your Gap value is too high and needs to be decreased, while conversley, the Gap value should be increased if the tips overlap. As with the LineGap values, don't try for accuracy above the tenthes digit. Name: This serves the exact same purpose as ShapeName does but for arrowheads. It is declared as below: Name = myArrowhead; Path: Path is the arrowheads equivalent of StrokePath. It requires elements just as StrokePath does, and will accept the same element values. Path's are defined as follows: Path = { elements = ( ... ); }; Width: The last value for an arrowhead is the width value. This is simply the total x distance that the arrowhead spans, and should be calculated from the values used in the path. The form for Width is: Width = 10; Arrowhead Example: So now lets take a look at how to make an arrowhead of our own. Just like with our shapes we start by saying we want to make an arrowhead and the creating a new one with a curly brace arrowheads = ( { Next we will need to define the Gap and LineGap values. For this arrowhead, I found the Gap value to be 0.4 and the LineGap to be 2.1. Gap = 0.4; LineGap = 2.1; We'll then set a name for our arrowhead and define the path outline for it. In this case we are making a backwards Native American arrowhead, so we need one MOVETO, three LINETO's and a CLOSE element. Name = BackNAArrowhead; Path = { elements = ( {element = MOVETO; point = "{0, -4}"; }, {element = LINETO; point = "{4, 0}"; }, {element = LINETO; point = "{0, 4}"; }, {element = LINETO; point = "{10, 0}"; }, {element = CLOSE;} ); }; And finally we will set our width value and end the shape. The width is calculated as the maximum change in the x value for the path. In our example, we go from x = 0 to x = 10, so the width is equal to 10 - 0 or 10. Width = 10; } ); So we have now completed the tutorial for creating OmniGraffle .graffleshapes files. __________________ "Vroom! Vroom!!" Post 3