This chapter will show the usage of Cocos Creator's graphic drawing component interface.
|moveTo (x, y)||Move the path to a specified point in the canvas without creating a line|
|lineTo (x, y)||Add a new point, and then create a line from the point to the last specified point in the canvas|
|bezierCurveTo (c1x, c1y, c2x, c2y, x, y)||Create cubic cubic Bezier curve|
|quadraticCurveTo (cx, cy, x, y)||Create a second Bezier curve|
|arc (cx, cy, r, a0, a1, counterclockwise)||Create arc / curve (for creating circle or part of a circle)|
|ellipse (cx, cy, rx, ry)||create an ellipse|
|circle (cx, cy, r)||create a circle|
|rect (x, y, w, h)||create a rectangle|
|close ()||Create a path from the current point back to the starting point|
|stroke ()||Draw a defined path|
|fill ()||Fill the current drawing (path)|
|clear ()||Clear all paths|
|lineCap||Set or return the end of the line end style|
|lineJoin||the corner type created when setting or returning two lines intersecting|
|lineWidth||Sets or returns the current line width|
|miterLimit||Set or return the maximum miter length|
|strokeColor||Sets or returns the color of the stroke|
|fillColor||Set or return the color of the fill painting|
Third Party Library
The Graphics component's API is designed according to the Canvas drawing interface, and there are a lot of graphics libraries based on the Canvas drawing interface, such as paper.js, raphael.js. Using the standard canvas drawing interfaces and thrid party libraries, we can extend a lot of more advanced functions on the Graphics components.
Here are some third-party advanced drawing libraries and related demo based on Graphics component extensions.