- 中文
- Cocos Creator
- Cocos2d-x
- AnySDK
-
Cocos Creator 2.0Version: 2.0
Graphic System
This chapter will show the usage of Cocos Creator's graphic drawing component interface.
Create a new empty node, and then click the Add Component button below the Properties panel and select Graphics from Add Renderer Component. Then you can add the Graphics component to the node.
Graphics API
Path
| Method | Function Description |
|---|---|
| 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 |
Color, Style
| Property | Description |
|---|---|
| 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 API of the Graphics component is designed according to the graphics interface of Canvas, and there are many graphics libraries based on the Canvas, such as paper.js, raphael.js. So if you port the underlying of the graphics libraries to the API of the graphics component, we can use the capabilities of these advanced libraries directly. Note, however, that the graphics component does not fully implement Canvas, and modifying the underlying backend of the graphics library requires a considerable understanding of the graphics library.