This post introduces two function in obfc.js: free_draw and free_write functions. If you don’t like draw of Line function, you can draw free line easily with free_draw function. Moreover, free_write function can be used for write text into the SVG element.
free_draw
This function has three parameters: path definitions, start points, stroke color.
free_draw(path_definitions, start_position, _stroke_color)
In path definition: you can draw line to up(u), down(d), left (l) and right for a given length. Line starts a [x, y] points. Moreover, you can set color of lines. For example:
|
1 2 3 4 5 6 |
<script> open_ruler=true; prepare_SVG("demo"); free_draw("l80 d220 l115", [200, 30]); free_draw("r80 d180 r150 u20 l20", [10, 10]); </script> |
The first free_draw function starts x=200 and y=30, then go left 80px, down 220 px and finally left 115px. You can set open_ruler = true for better design.
free_write
This function has 8 parameters:
free_write(_text, _text_size, _font_weight, _middle_x, _middle_y, _height, _align, _text_color)
- _text can be a string value or a string array value. _text_size specifies the size of the _text.
- _font_weigth parameter sets how thick or thin characters in _text should be showed. (For more information click this link)
- _middle_x, _middle_y: sets points of _text.
- _heigth can be useful for _text which contain multiline value. (string array)
- _align: default value is centre of _middle_x and _middle_y.
- _text_color: determines color of _text.
|
1 2 3 4 5 6 |
<script> open_ruler=true; prepare_SVG("demo2"); free_write("Hello obfc.js", 20, "bold", 130, 40, 300, "center", "red"); free_write(["Comment Line 1", "Comment Line 2", "Comment Line 3"], 20, "normal", 130, 120, 100); </script> |