cocosCreator 之 Graphics绘制基础图形，五角星，线型图，柱形图 |
您所在的位置：网站首页 › ps如何画图形空间结构线条 › cocosCreator 之 Graphics绘制基础图形，五角星，线型图，柱形图 |
cocosCreator 之 Graphics绘制基础图形，五角星，线型图，柱形图
|
版本： 3.4.0 环境： Mac Graphics组件Graphics组件主要用于绘画使用，属于渲染组件。继承结构： Graphics Renderable2D RenderableComponent Component更多继承结构可参考： cocosCreator 之 cc.d.ts 该组件创建后，主要的属性有： 一个简答的示例： // 绘制线段 // export class UI_GraphicBaseLayer extends Component { // 绘制组件 @property(Graphics) graphics: Graphics; start () { // 设置线段宽度 this.graphics.lineWidth = 10; // 设置线段末端样式 this.graphics.lineCap = Graphics.LineCap.ROUND; // 设置画笔颜色 this.graphics.strokeColor = Color.RED; // 移动路径起点(x,y) this.graphics.moveTo(-400, 220); // 移动路径终点(x,y) this.graphics.lineTo(-200, 220); // 绘制 this.graphics.stroke(); } }通过moveTo和lineTo其实可以明白绘制一个从(-400, 200)到(-200, 200)的线段，这个是理解绘制的关键点。 该组件可以做很多事情： 用来绘制基础的线段，矩形，圆，椭圆等用来绘制自定义的五角星，六角形，雷达图等用来绘制折线图，圆柱图等用来绘画涂鸦使用用于同Mask遮罩进行自定义图形裁切，或者模拟刮刮乐效果等注意： 使用Graphics组件绘制过多的图形或复杂的图形可能会导致性能下降，因为绘制操作需要消耗CPU和GPU资源。 特别是在移动设备等性能较低的设备上，过多的绘图操作可能会导致帧率下降，影响游戏的流畅度。 绘图接口Graphics组件的主要属性和接口有： 名字说明lineWidth设置/获取线条宽度lineJoin设置/获取两条线相交时，所创建的拐角类型，可通过Graphics.LineJoin设置lineCap设置/获取线条结束端点的样式， 可通过Graphics.LineCap来设置strokeColor设置/获取画笔颜色fillColor设置/获取填充颜色miterLimit设置/获取斜接面限制比例srcBlendFactor指定源的混合模式，这会克隆一个新材质对象，注意带来的性能和内存损耗dstBlendFactor指定目标的混合模式，这会克隆一个新材质对象，注意带来的性能和内存损耗moveTo()设置起始点(x, y)lineTo()设置结束点(x, y)quadraticCurveTo()绘制二次贝赛尔曲线bezierCurveTo()绘制三次贝赛尔曲线arc()绘制圆弧ellipse()绘制椭圆circle()绘制圆rect()绘制矩形roundRect()绘制圆角矩形fillRect()绘制填充矩形clear()擦除绘画close()将笔点返回到当前路径起始点的。它尝试从当前点到起始点绘制一条直线stroke()根据当前的画线样式，绘制当前或已经存在的路径fill()根据当前的画线样式，填充当前或已经存在的路径具体的接口代码相关，参考：cc.d.ts // 自定义图形类 export class Graphics extends Renderable2D { // 移动路径起点到坐标(x, y) moveTo(x: number, y: number): void; // 绘制直线路径(x,y) lineTo(x: number, y: number): void; /* * 绘制三次贝赛尔曲线路径。 * @param c1x - 第一个控制点的坐标 x 轴。 * @param c1y - 第一个控制点的坐标 y 轴。 * @param c2x - 第二个控制点的坐标 x 轴。 * @param c2y - 第二个控制点的坐标 y 轴。 * @param x - 最后一个控制点的坐标 x 轴。 * @param y - 最后一个控制点的坐标 y 轴。 */ bezierCurveTo(c1x:number, c1y:number, c2x:number, c2y:number, x:number, y: number): void; /** * 绘制二次贝赛尔曲线路径。 * @param cx - 起始控制点的坐标 x 轴。 * @param cy - 起始控制点的坐标 y 轴。 * @param x - 终点控制点的坐标 x 轴。 * @param y - 终点控制点的坐标 x 轴。 */ quadraticCurveTo(cx: number, cy: number, x: number, y: number): void; /** * 绘制圆弧路径。圆弧路径的圆心在 (cx, cy) 位置，半径为 r 根据counterclockwise(默认false)指定的方向从startAngle开始绘制，到 endAngle 结束。 * @param cx - 中心控制点的坐标 x 轴。 * @param cy - 中心控制点的坐标 y 轴。 * @param r - 圆弧弧度。 * @param startAngle - 开始弧度，从正 x 轴顺时针方向测量。 * @param endAngle - 结束弧度，从正 x 轴顺时针方向测量。 * @param counterclockwise 如果为真，在两个角度之间逆时针绘制。默认顺时针。 */ arc(cx: number, cy: number, r: number, startAngle: number, endAngle: number, counterclockwise: boolean): void; /** * 绘制椭圆路径。 * @param cx - 中心点的坐标 x 轴。 * @param cy - 中心点的坐标 y 轴。 * @param rx - 椭圆 x 轴半径。 * @param ry - 椭圆 y 轴半径。 */ ellipse(cx: number, cy: number, rx: number, ry: number): void; /** * 绘制圆形路径。 * @param cx - 中心点的坐标 x 轴。 * @param cy - 中心点的坐标 y 轴。 * @param r - 圆半径。 */ circle(cx: number, cy: number, r: number): void; /** * 绘制矩形路径。 * @param x - 矩形起始坐标 x 轴。 * @param y - 矩形起始坐标 y 轴。 * @param w - 矩形宽度。 * @param h - 矩形高度。 */ rect(x: number, y: number, w: number, h: number): void; /** * 绘制圆角矩形路径。 * @param x - 矩形起始坐标 x 轴。 * @param y - 矩形起始坐标 y 轴。 * @param w - 矩形宽度。 * @param h - 矩形高度。 * @param r - 矩形圆角半径。 */ roundRect(x: number, y: number, w: number, h: number, r: number): void; /** * 绘制填充矩形。 * @param x - 矩形起始坐标 x 轴。 * @param y - 矩形起始坐标 y 轴。 * @param w - 矩形宽度。 * @param h - 矩形高度。 */ fillRect(x: any, y: any, w: any, h: any): void; // 擦除之前绘制的所有内容的方法 clear(): void; // 将笔点返回到当前路径起始点的。它尝试从当前点到起始点绘制一条直线 close(): void; // 根据当前的画线样式，绘制当前或已经存在的路径 stroke(): void; // 根据当前的画线样式，填充当前或已经存在的路径 fill(): void; }将这些代码从引擎提取粘贴了下，方便大家进行查阅。 下面将开始具体的示例相关，如果想在浏览器直观的显示出来，可以： const { ccclass, property, executeInEditMode } = _decorator; @executeInEditMode(true) // 设置为true, 在编译器中模拟运行 绘制基础图形主要绘制： 直线样式点线样式圆/椭圆/矩形/半圆贝塞尔曲线示例代码： export class UI_GraphicBaseLayer extends Component { @property(Graphics) graphics: Graphics; start () { // 绘制直线 this.drawLine(); // 绘制点线 this.drawStrokeLine(); // 绘制图形 this.drawGraph(); // 绘制矩形 this.drawRect(); // 绘制贝塞尔曲线 this.drawBezier(); } // 绘制直线 private drawLine() { // 设置线段宽度 this.graphics.lineWidth = 10; // 设置线段末端样式 this.graphics.lineCap = Graphics.LineCap.ROUND; // 设置画笔颜色 this.graphics.strokeColor = Color.RED; // 移动路径起点 this.graphics.moveTo(-400, 220); // 移动路径终点 this.graphics.lineTo(-200, 220); // 绘制 this.graphics.stroke(); this.graphics.miterLimit = 10 } // 绘制点线 private drawStrokeLine() { this.graphics.strokeColor = Color.GREEN; this.graphics.lineWidth = 10; for (let i = 0; i |
【本文地址】
今日新闻 |
推荐新闻 |