Skip to content

Latest commit

 

History

History
693 lines (547 loc) · 25.9 KB

g2.core.md

File metadata and controls

693 lines (547 loc) · 25.9 KB
Raw

g2 ⇒ g2

Create a 2D graphics command queue object. Call without using 'new'.

Kind: global typedef
Link: https://github.com/goessner/g2
Author: Stefan Goessner
License: MIT License

Param Type Description
[opts] object Custom options object.

Example

const ctx = document.getElementById("c").getContext("2d");
g2()                                   // Create 'g2' instance.
    .lin({x1:50,y1:50,x2:100,y2:100})  // Append ...
    .lin({x1:100,y1:100,x2:200,y2:50}) // ... commands.
    .exe(ctx);                         // Execute commands addressing canvas context.

g2.clr() ⇒ object

Clear viewport region.

Kind: instance method of g2
Returns: object - g2

g2.view() ⇒ object

Set the view by placing origin coordinates and scaling factor in device units and make viewport cartesian.

Kind: instance method of g2
Returns: object - g2

Type Description
object view arguments object.

Properties

Name Type Default Description
[scl] number 1 absolute scaling factor.
[x] number 0 x-origin in device units.
[y] number 0 y-origin in device units.
[cartesian] boolean false set cartesian flag.

g2.grid() ⇒ object

Draw grid.

Kind: instance method of g2
Returns: object - g2

Type Description
object grid arguments object.

Properties

Name Type Default Description
[color] string "#ccc" change color.
[size] number 20 change space between lines.

g2.cir() ⇒ object

Draw circle by center and radius.

Kind: instance method of g2
Returns: object - g2

Type Description
object circle arguments object.

Properties

Name Type Default Description
x number x-value center.
y number y-value center.
r number radius.
w number angle.
[fs] string "transparent" fill color.
[ls] string "black" stroke color.
[lw] string 1 line width.
[sh] array [0,0,0,'transparent'] shadow values [x-offset,y-offset,blur,color],

Example

g2().cir({x:100,y:80,r:20})  // Draw circle.

g2.ell() ⇒ object

Draw ellipse by center and radius for x and y.

Kind: instance method of g2
Returns: object - g2

Type Description
object ellispe argument object.

Properties

Name Type Default Description
x number x-value center.
y number y-value center.
rx number radius x-axys.
ry number radius y-axys.
w number start angle.
dw number angular range.
rot number rotation.
[fs] string "transparent" fill color.
[ls] string "black" stroke color.
[lw] string 1 line width.
[ld] array [] line dash array.
[sh] array [0,0,0,"transparent"] shadow values [x-offset,y-offset,blur,color],

Example

g2().ell({x:100,y:80,rx:20,ry:30,w:0,dw:2*Math.PI/4,rot:1})  // Draw circle.

g2.arc() ⇒ object

Draw arc by center point, radius, start angle and angular range.

Kind: instance method of g2
Returns: object - g2

Type Description
object arc arguments object.

Properties

Name Type Default Description
x number x-value center.
y number y-value center.
r number radius.
[w] number 0 start angle (in radian).
[dw] number 2*pi angular range in Radians.
[fs] string "transparent" fill color.
[ls] string "black" stroke color.
[lw] string 1 line width.
[lc] string "butt" line cap [butt, round, square].
[ld] array [] line dash array.
[sh] array [0,0,0,"transparent"] shadow values [x-offset,y-offset,blur,color],

Example

g2().arc({x:300,y:400,r:390,w:-Math.PI/4,dw:-Math.PI/2})
    .exe(ctx);

g2.rec() ⇒ object

Draw rectangle by anchor point and dimensions.

Kind: instance method of g2
Returns: object - g2

Type Description
object rectangle arguments object.

Properties

Name Type Default Description
x number x-value upper left corner.
y number y-value upper left corner.
b number width.
h number height.
[fs] string "transparent" fill color.
[ls] string "black" stroke color.
[lw] string 1 line width.
[lj] string "'miter'" line join [round, bevel, miter].
[ml] number 10 miter limit.
[ld] array [] line dash array.
[sh] array [0,0,0,"transparent"] shadow values [x-offset,y-offset,blur,color],

Example

g2().rec({x:100,y:80,b:40,h:30}) // Draw rectangle.

g2.lin() ⇒ object

Draw line by start point and end point.

Kind: instance method of g2
Returns: object - g2

Type Description
object line arguments object.

Properties

Name Type Default Description
x1 number start x coordinate.
y1 number start y coordinate.
x2 number end x coordinate.
y2 number end y coordinate.
[ls] string "black" stroke color.
[lw] string 1 line width.
[lc] string "butt" line cap [butt, round, square].
[ld] array [] line dash array.
[sh] array [0,0,0,"transparent"] shadow values [x-offset,y-offset,blur,color],

Example

g2().lin({x1:10,x2:10,y1:190,y2:10}) // Draw line.

g2.ply() ⇒ object

Draw polygon by points. Using iterator function for getting points from array by index. It must return current point object {x,y} or object {done:true}. Default iterator expects sequence of x/y-coordinates as a flat array [x,y,...], array of [[x,y],...] arrays or array of [{x,y},...] objects.

Kind: instance method of g2
Returns: object - g2

Type Description
object polygon arguments object.

Properties

Name Type Default Description
pts array array of points.
[format] string format string of points array structure. Useful for handing over initial empty points array. One of ['x,y','[x,y]','{x,y}']. Has precedence over pts content.
[closed] boolean false
x number start x coordinate.
y number start y coordinate.
w number angle.
[fs] string "transparent" fill color.
[ls] string "black" stroke color.
[lw] string 1 line width.
[lc] string "butt" line cap [butt, round, square].
[lj] string "'miter'" line join [round, bevel, miter].
[ml] number 10 miter limit.
[ld] array [] line dash array.
[sh] array [0,0,0,"transparent"] shadow values [x-offset,y-offset,blur,color],

Example

g2().ply({pts:[100,50,120,60,80,70]}),
    .ply({pts:[150,60],[170,70],[130,80]],closed:true}),
    .ply({pts:[{x:160,y:70},{x:180,y:80},{x:140,y:90}]}),
    .exe(ctx);

g2.txt() ⇒ object

Draw text string at anchor point.

Kind: instance method of g2
Returns: object - g2

Type Description
object text arguments object.

Properties

Name Type Default Description
str string text string.
[x] number 0 x coordinate of text anchor position.
[y] number 0 y coordinate of text anchor position.
[w] number 0 w Rotation angle about anchor point with respect to positive x-axis.
[fs] string "transparent" fill color.
[ls] string "black" stroke color.
[sh] array [0,0,0,"transparent"] shadow values [x-offset,y-offset,blur,color],
[thal] string "'start'" - Text horizontal alignment ['start','end','left','right','center']
[tval] string "'alphabetic'" - Text vertival alignment ['top','hanging','middle','alphabetic','ideographic','bottom']
[font] string "'normal 14px serif'" Font styling

g2.use() ⇒ object

Reference g2 graphics commands from another g2 object or a predefined g2.symbol. With this command you can reuse instances of grouped graphics commands while applying a similarity transformation and style properties on them. In fact you might want to build custom graphics libraries on top of that feature.

Kind: instance method of g2
Returns: object - g2
See: predefined symbols in g2.ext

Type Description
object use arguments object.

Properties

Name Type Default Description
grp object | string g2 source object or symbol name found in 'g2.symbol' namespace.
[x] number 0 translation value x.
[y] number 0 translation value y.
[w] number 0 rotation angle (in radians).
[scl] number 1 scale factor.
[fs] string "transparent" fill color.
[ls] string "black" stroke color.
[lw] string 1 line width.
[lc] string "butt" line cap [butt, round, square].
[lj] string "'miter'" line join [round, bevel, miter].
[ml] number 10 miter limit.
[ld] array [] line dash array.
[sh] array [0,0,0,"transparent"] shadow values [x-offset,y-offset,blur,color],
[thal] string "'start'" - Text horizontal alignment ['start','end','left','right','center']
[tval] string "'alphabetic'" - Text vertival alignment ['top','hanging','middle','alphabetic','ideographic','bottom']
[font] string "'normal 14px serif'" Font styling

Example

g2.symbol.cross = g2().lin({x1:5,y1:5,x2:-5,y2:-5}).lin({x1:5,y1:-5,x2:-5,y2:5});  // Define symbol.
g2().use({grp:"cross",x:100,y:100})  // Draw cross at position 100,100.

g2.img() ⇒ object

Draw image. This also applies to images of reused g2 objects. If an image can not be loaded, it will be replaced by a broken-image symbol.

Kind: instance method of g2
Returns: object - g2

Type Description
object image arguments object.

Properties

Name Type Default Description
uri string image uri or data:url.
[x] number 0 x-coordinate of image (upper left).
[y] number 0 y-coordinate of image (upper left).
[b] number image.width width.
[h] number image.height height.
[sx] number 0 source x-offset.
[sy] number 0 source y-offset.
[sb] number image.width source width.
[sh] number image.height source height.
[xoff] number 0 x-offset.
[yoff] number 0 y-offset.
[w] number 0 rotation angle (about upper left, in radians).
[scl] number 1 image scaling.

g2.beg() ⇒ object

Begin subcommands. Current state is saved. Optionally apply transformation or style properties.

Kind: instance method of g2
Returns: object - g2

Type Description
object beg arguments object.

Properties

Name Type Default Description
[x] number 0 translation value x.
[y] number 0 translation value y.
[w] number 0 rotation angle (in radians).
[scl] number 1 scale factor.
[matrix] array matrix instead of single transform arguments (SVG-structure [a,b,c,d,x,y]).
[fs] string "transparent" fill color.
[ls] string "black" stroke color.
[lw] string 1 line width.
[lc] string "butt" line cap [butt, round, square].
[lj] string "'miter'" line join [round, bevel, miter].
[ml] number 10 miter limit.
[ld] array [] line dash array.
[sh] array [0,0,0,"transparent"] shadow values [x-offset,y-offset,blur,color],
[thal] string "'start'" - text horizontal alignment ['start','end','left','right','center']
[tval] string "'alphabetic'" - text vertival alignment ['top','hanging','middle','alphabetic','ideographic','bottom']
[font] string "'normal 14px serif'" Font styling

g2.end() ⇒ object

End subcommands. Previous state is restored.

Kind: instance method of g2
Returns: object - g2

Type Description
object end arguments object.

g2.p() ⇒ object

Begin new path.

Kind: instance method of g2
Returns: object - g2

g2.z() ⇒ object

Close current path by straight line.

Kind: instance method of g2
Returns: object - g2

g2.m() ⇒ object

Move to point.

Kind: instance method of g2
Returns: object - g2

Type Description
object move arguments object.

Properties

Name Type Description
x number move to x coordinate
y number move to y coordinate

g2.l() ⇒ object

Create line segment to point.

Kind: instance method of g2
Returns: object - g2

Type Description
object line segment argument object.

Properties

Name Type Description
x number x coordinate of target point.
y number y coordinate of target point.

Example

g2().p()             // Begin path.
    .m({x:0,y:50})   // Move to point.
    .l({x:300,y:0})  // Line segment to point.
    .l({x:400,y:100}) // ...
    .stroke()        // Stroke path.

g2.q() ⇒ object

Create quadratic bezier curve segment to point.

Kind: instance method of g2
Returns: object - g2

Type Description
object quadratic curve arguments object.

Properties

Name Type Description
x1 number x coordinate of control point.
y1 number y coordinate of control point.
x number x coordinate of target point.
y number y coordinate of target point.

Example

g2().p()                           // Begin path.
    .m({x:0,y:0})                  // Move to point.
    .q({x1:200,y1:200,x:400,y:0})  // Quadratic bezier curve segment.
    .stroke()                      // Stroke path.

g2.c() ⇒ object

Create cubic bezier curve to point.

Kind: instance method of g2
Returns: object - g2

Type Description
object cubic curve arguments object.

Properties

Name Type Description
x1 number x coordinate of first control point.
y1 number y coordinate of first control point.
x2 number x coordinate of second control point.
y2 number y coordinate of second control point.
x number x coordinate of target point.
y number y coordinate of target point.

Example

g2().p()                        // Begin path.
    .m({x:0,y:100})             // Move to point.
    .c({x1:100,y1:200,x2:200,y2:0,x:400,y:100}) // Create cubic bezier curve.
    .stroke()                   // Stroke path.
    .exe(ctx);                  // Render to canvas context.

g2.a() ⇒ object

Draw arc with angular range to target point.

Kind: instance method of g2
Returns: object - g2

Type Description
object arc arguments object.

Properties

Name Type Description
dw number angular range in radians.
x number x coordinate of target point.
y number y coordinate of target point.

Example

g2().p()            // Begin path.
    .m({x:50,y:50})       // Move to point.
    .a({dw:2,x:300,y:100})   // Create arc segment.
    .stroke()       // Stroke path.
    .exe(ctx);      // Render to canvas context.

g2.stroke() ⇒ object

Stroke the current path or path object.

Kind: instance method of g2
Returns: object - g2

Type Description
object stroke arguments object.

Properties

Name Type Description
[d] string SVG path definition string. Current path is ignored then.

g2.fill() ⇒ object

Fill the current path or path object.

Kind: instance method of g2
Returns: object - g2

Type Description
object fill arguments object.

Properties

Name Type Description
[d] string SVG path definition string. Current path is ignored then.

g2.drw() ⇒ object

Shortcut for stroke and fill the current path or path object. In case of shadow style, only the path interior creates shadow, not also the path contour.

Kind: instance method of g2
Returns: object - g2

Type Description
object drw arguments object.

Properties

Name Type Description
[d] string SVG path definition string. Current path is ignored then.

g2.del() ⇒ object

Delete all commands beginning from idx to end of command queue.

Kind: instance method of g2
Returns: object - g2

g2.ins() ⇒ object

Call function between commands of the command queue.

Kind: instance method of g2
Returns: object - g2

Type Description
function ins argument function.

Example

const node = {
     fill:'lime',
     g2() { return g2().cir({x:160,y:50,r:15,fs:this.fill,lw:4,sh:[8,8,8,"gray"]}) }
};
let color = 'red';
g2().cir({x:40,y:50,r:15,fs:color,lw:4,sh:[8,8,8,"gray"]})   // draw red circle.
    .ins(()=>{color='green'})                                // color is now green.
    .cir({x:80,y:50,r:15,fs:color,lw:4,sh:[8,8,8,"gray"]})   // draw green circle.
    .ins((g) =>                                              // draw orange circle
         g.cir({x:120, y:50, r:15, fs:'orange', lw:4,sh:[8,8,8,"gray"]}))
    .ins(node)                                               // draw node.
    .exe(ctx)                                                // render to canvas context.

g2.exe(ctx) ⇒ object

Execute g2 commands. It does so automatically and recursively with 'use'ed commands.

Kind: instance method of g2
Returns: object - g2

Param Type Description
ctx object Context.