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


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.

results matching ""

    No results matching ""