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] (http://www.w3school.com.cn/tags/html_ref_canvas.asp) 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.

ccc.raphael

• Github: https: //github.com/2youyou2/ccc.raphael
• Demo: https: //github.com/2youyou2/raphael-example
• Feature (continually updated)
  • Line deformation
  • Dashed line
  • Simplify the path
  • Import svg