5. obfc.js: Creating Lines

This post introduces draw_theLine and Line function to connect two objects.

Creating Lines Between Two Objects

Line is a function that determines the path for given two objects and their positions. This function has 9 parameters. First two parameter is required and others are optimal.

Line(object1, object2, position1, position2, _text, _text_size, _description, _stroke_color, _text_color)

There are four start / end points for a shape. This example shows these points: Top:0, Bottom:1, Left:2 and Right: 3. Javascript codes:

<script>
prepare_SVG("demo");
var object1 = add_theObject(new Process(100, 75, 1, "Hello 1", 12));
var object2 = add_theObject(new Process(300, 150, 1, "Hello 2", 12));
var o_line1 = draw_theLine(new Line(object1, object2));
</script>

prepare_SVG("demo");

var object1 = add_theObject(new Process(100, 75, 1, "Hello 1", 12));

var object2 = add_theObject(new Process(300, 150, 1, "Hello 2", 12));

var o_line1 = draw_theLine(new Line(object1, object2));

</script>

In this example, we create Line to the draw_theLine function. The line has two parameters that are two objects obtained from shape creation. The algorithm takes into consideration four points of two shapes and calculates / finds minimum distance between these points. Moreover, you can determine these points manually. For example:

<script>
prepare_SVG("demo2");
var object1 = add_theObject(new Process(100, 75, 1, "Hello 1", 12));
var object2 = add_theObject(new Process(300, 150, 1, "Hello 2", 12));
var o_line1 = draw_theLine(new Line(object1, object2, 0, 1));
var o_line2 = draw_theLine(new Line(object1, object2, 2, 2));
var o_line3 = draw_theLine(new Line(object1, object2, 1, 3));
</script>

prepare_SVG("demo2");

var object1 = add_theObject(new Process(100, 75, 1, "Hello 1", 12));

var object2 = add_theObject(new Process(300, 150, 1, "Hello 2", 12));

var o_line1 = draw_theLine(new Line(object1, object2, 0, 1));

var o_line2 = draw_theLine(new Line(object1, object2, 2, 2));

var o_line3 = draw_theLine(new Line(object1, object2, 1, 3));

</script>

In this example, position informations are added to link two objects. For example, 0 means top of object1 and 1 means bottom of object2. There are three line in this exaple. Moreover, obfc.js has jumping mechanism:) in collision of lines.
There are five extra parameters: _text, _text_size, description, _stroke_color, _text_color.

<script>
prepare_SVG("demo3");
var object1 = add_theObject(new Process(100, 75, 1, "Hello 1", 12));
var object2 = add_theObject(new Process(300, 150, 1, "Hello 2", 12));
var o_line1 = draw_theLine(new Line(object1, object2, -1, -1, "Hello Line", 12, "Hi", "black", "red"));
</script>

prepare_SVG("demo3");

var object1 = add_theObject(new Process(100, 75, 1, "Hello 1", 12));

var object2 = add_theObject(new Process(300, 150, 1, "Hello 2", 12));

var o_line1 = draw_theLine(new Line(object1, object2, -1, -1, "Hello Line", 12, "Hi", "black", "red"));

</script>

-1 or null in value of positions means that find minimum distance between two objects. Line function determines the longest sub-line for writing text middle of this line.