Graphic system

This chapter will show the usage of Cocos Creator's graphic drawing component interface.

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 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 third 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.

ccc.raphael

results matching ""

    No results matching ""