drawCircle 绘制圆形

laya.display.Graphics 类的 drawCircle() 方法可以快捷的绘制圆形。

/**
* 绘制圆形。
* @param x 圆点X 轴位置。
* @param y 圆点Y 轴位置。
* @param radius 半径。
* @param fillColor 填充颜色，或者填充绘图的渐变对象。
* @param lineColor （可选，默认为null）边框颜色，或者填充绘图的渐变对象。
* @param lineWidth （可选，默认为1）边框宽度。
*/
drawCircle(x: number, y: number, radius: number, fillColor: any, lineColor?: any, lineWidth?: number): DrawCircleCmd;

//使用立即执行函数方式
(function(){//初始化舞台,设置大小,当浏览器不支持 WebGL 时自动切换为 Canvas,Laya.init(1334, 750,Laya.WebGL);let sp = new Laya.Sprite();//可以先添加精灵，后设置精灵Laya.stage.addChild(sp);showCircle();showAudi();//绘制圆形---一个8字的形状function showCircle(){//直接使用 Sprite 的 grapahics 属性获取 Graphics(绘图)对象进行绘制//圆心坐标(120,80)，半径 60px，红色填充sp.graphics.drawCircle(120,80,60,"#f00");//圆心坐标(120,180)，半径 60px，红色填充，这样两个圆会有20px的重合sp.graphics.drawCircle(120,180,60,"#f00");}//绘制一个类似奥迪的4环图标function showAudi(){//直接使用 Sprite 的 grapahics 属性获取 Graphics(绘图)对象进行绘制//圆形的颜色与舞台背景色(默认黑色)一致，边框为白色sp.graphics.drawCircle(350,120,60,"#000","#fff",5);sp.graphics.drawCircle(450,120,60,"#000","#fff",5);sp.graphics.drawCircle(550,120,60,"#000","#fff",5);sp.graphics.drawCircle(650,120,60,"#000","#fff",5);}
})();

drawPie 绘制扇形

laya.display.Graphics 类的 drawPie() 方法可以快捷的绘制扇形。

/**
* 绘制扇形。
* @param x 开始绘制的 X 轴位置。
* @param y 开始绘制的 Y 轴位置。
* @param radius 扇形半径。
* @param startAngle 开始角度
* @param endAngle 结束角度。
* @param fillColor 填充颜色，或者填充绘图的渐变对象。
* @param lineColor （可选）边框颜色，或者填充绘图的渐变对象。
* @param lineWidth （可选）边框宽度。
*/
drawPie(x: number, y: number, radius: number, startAngle: number, endAngle: number, fillColor: any, lineColor?: any, lineWidth?: number): DrawPieCmd;

开始角度、结束角度直接使用数值，如 90,180 ...，而不要使用 Math.PI 来表示。

绘制扇形与圆形类似，前三个参数的用法也是一样的，只是增加了绘制开始与结束的角度。

//使用立即执行函数方式
(function(){//初始化舞台,设置大小,当浏览器不支持 WebGL 时自动切换为 Canvas,Laya.init(1334, 750,Laya.WebGL);let sp = new Laya.Sprite();//可以先添加精灵，后设置精灵Laya.stage.addChild(sp);showPie();showTrident();//绘制一把扇子的形状function showPie(){//直接使用 Sprite 的 grapahics 属性获取 Graphics(绘图)对象进行绘制//扇形的圆心为(150,200)、半径为 120px，起始角度为 225度(第2象限中间)，终点为 315度(第1象限中间)sp.graphics.drawPie(150,200,120,225,315,"#f00","#ff0",3);}//绘制一把禅杖function showTrident(){//绘制左边的扇形//圆形(400,120)、半径 100，起始边在第3象限中间、终点边在第2象限中间sp.graphics.drawPie(400,120,100,135,225,"#fff");//绘制中间的横杆，起点在(390,110)，刚好与上面的扇形保持10px的重合sp.graphics.drawRect(390,110,300,20,"#fff");//绘制右侧的圆形，圆心为(700,120)，因为横杆高是20，所以圆心要在横杆y的基础上+10，圆形半径为30sp.graphics.drawCircle(700,120,30,"#fff");}
})();

锯齿消除设置

在 PC电脑的浏览器上，经常发现 LayaAir 引擎绘制的矢量图会有一些锯齿，这是由于 LayaAir 引擎基于性能的考虑，做的优化处理，由于移动手机端的像素密度比较大，所以在 PC 上看起来明显的锯齿问题，其实在移动设备上基本上看不出来。

如果有追求完美的开发者，也可以通过在 "Laya.init();" 初始化舞台的代码之前，加一行代码“Laya.Config.isAntialias=true;”开启锯齿消除设置，那么在手机端，就完全看不到锯齿了。当然，开启这个设置后是会增加性能的消耗。因此，建议游戏开发过程中尽可能少用矢量图形，即便使用后，基于性能考虑，尽可能不要开启锯齿消除设置。

//消除矢量绘制的锯齿，但会增加性能消耗
Laya.Config.isAntialias=true;
//初始化舞台
Laya.init(500, 300, WebGL);

官网介绍地址：https://ldc.layabox.com/doc/?nav=zh-js-1-4-6

LayaAir graphics 矢量绘图之圆形与扇形相关推荐

Android绘图机制（二）——自定义View绘制形, 圆形, 三角形, 扇形, 椭圆, 曲线,文字和图片的坐标讲解
Android绘图机制(二)--自定义View绘制形, 圆形, 三角形, 扇形, 椭圆, 曲线,文字和图片的坐标讲解我们要想画好一些炫酷的View,首先我们得知道怎么去画一些基础的图案,比如矩形,圆 ...
【sketchup 2021】草图大师的基础使用【矩形与橡皮擦、直线与圆、手绘线与多边形、圆形与扇形、推拉工具】
文章目录矩形与橡皮擦矩形普通使用矩形进阶使用[画立面和分割面] 擦除连续擦除选中后不想删除了... 隐藏/显示边线柔化边线/取消柔化另一种擦除:删除直线与圆直线工具鼠标绘制默认绘 ...
游戏开发中的数学问题:技能伤害的区域检测(方形,圆形,三角形,扇形)
众所周知,moba中的每个英雄都有一套自己的技能的攻击范围方式,有如廉颇一样的圆形范围,有火舞一样的直线范围,吕布的扇形方天戟范围,还有牛魔大招时的矩形范围等等一些技能是通过物理的碰撞检测来判断的, ...
绘制圆形/圆环/扇形/扇面Mesh
using UnityEngine; using System.Collections;[RequireComponent(typeof(MeshRenderer), typeof(MeshFilte ...
python画圆并填充图形颜色_如何使用python设计语言graphics绘制圆形图形
在python设计语言中,可以利用第三方包graphics绘制不同的图形,有圆形.直线.矩形等.如果想要绘制一个圆形,可以设置圆形的半径和坐标位置.下面利用一个实例说明绘制圆形,操作如下: 工具/原料 ...
（4.1.36.1）Graphics图形学解析补充篇：路径Path
本篇内容基本都来自参考文献,有兴趣的可自行阅读查看一基本操作 1 moveTo setLastPoint lineTo 和 close 2 addXxx与arcTo 3 路径方向PathDirect ...
SVG画扇形，可以改变数量、扇形角度、扇形方向
效果图有点low,忍一忍吧最近做项目,需求是在地图上实现一个基站,虽然基站是由扇形组成的2D图标(就像一个风扇) 来个图吧: 但是有个要求用户可以配置任意多个扇形,任意角度大小,任意方向的扇形,后 ...
基于winform的GIS离线地图
基于winform的离线地图项目 1.下载GMap(一个国外开源控件,codeplex有源码),不了解的百度一下, 2.项目引入GMap.NET.Core和GMap.NET.WindowsForms ...
Android群英传笔记——第三章：Android控件架构与自定义控件讲解
Android群英传笔记--第三章:Android控件架构与自定义控件讲解真的很久没有更新博客了,三四天了吧,搬家干嘛的,心累,事件又很紧,抽时间把第三章大致的看完了,当然,我还是有一点View的基 ...
Android特效专辑（六）——仿QQ聊天撒花特效，无形装逼，最为致命
Android特效专辑(六)--仿QQ聊天撒花特效,无形装逼,最为致命我的关于特效的专辑已经在CSDN上申请了一个专栏--http://blog.csdn.net/column/details/li ...

LayaAir graphics 矢量绘图之圆形与扇形

drawCircle 绘制圆形

drawPie 绘制扇形

锯齿消除设置

LayaAir graphics 矢量绘图之圆形与扇形相关推荐

最新文章

热门文章

LayaAir graphics 矢量绘图之 圆形与扇形

drawCircle 绘制圆形

drawPie 绘制扇形

锯齿消除设置

LayaAir graphics 矢量绘图之 圆形与扇形相关推荐

最新文章

热门文章

LayaAir graphics 矢量绘图之圆形与扇形

LayaAir graphics 矢量绘图之圆形与扇形相关推荐