createjs绘制扇形的方法
扇形由三段线条组成,两条直线和一条弧线,直线可以用createjs中的lineTo函数画出,弧线用Graphics.arc函数来画。
一、关于createjs中的Graphics.Arc API
Graphics.Arc用来画一条弧线,函数签名如下:
Graphics.Arc
(x,
y,
半径,
开始的弧度a,
结束的弧度b,
逆时针方向的
)
默认情况下开始的角度和结束的角度指从x轴方向开始逆时针旋转的弧度(弧度取值为0~2π),最后一个参数决定是按逆时针还是顺时针旋转(默认为true,即按逆时针方向)。本实例按顺时针编程,如下图:
二、已知圆心、半径、起始角度和弧度画扇形的方法
如上图,扇形由三条线段组成(两条直线和一条弧线),画第一条线段时,需要知道a点的位置,由于已知圆心(x,y)、起始角度(startFrom)和半径r,根据三角函数,a点很容易求出,即:
//为了使方法方便使用,这里的起始角度和扇形弧度参数都用角度表示,由于三角函数用的弧度制,这里先转换为弧度。
startFrom = startFrom * Math.PI / 180; var x1=x+r * Math.cos(startFrom);
var y1=y+r * Math.sin(startFrom);
画弧线时,根据以上Graphic.Arc 参数可知需要先算出结束角度,用起始角度+扇形弧度即可:
var endAngle=startFrom+angle*Math.PI/180;
最后,再将线段画回至圆心即可。代码如下,这里加入了填充颜色的参数color:
function drawSector(mc, x, y, r, angle, startFrom, color) { mc.graphics.clear();
mc.graphics.beginFill(color);
mc.graphics.moveTo(x, y); angle = (Math.abs(angle) > 360) ? 360 : angle;
//为了使方法方便使用,这里的起始角度和扇形弧度都用角度表示,由于三角函数用的弧度制,这里先转换为弧度。
startFrom = startFrom * Math.PI / 180; var x1=x+r * Math.cos(startFrom);
var y1=y+r * Math.sin(startFrom);
var endAngle=startFrom+angle*Math.PI/180; mc.graphics.lineTo(x1,y1);
mc.graphics.arc(x,y,r,startFrom,endAngle,false); if (angle != 360) {
mc.graphics.lineTo(x, y);
}
mc.graphics.endFill();
}
createjs绘制扇形的方法的更多相关文章
- [ActionScript 3.0] 绘制扇形方法
/** * 绘制扇形 * @param mc 承载扇形的对象 * @param x 圆心角x * @param y 圆心角y * @param r 半径 * @param angle 绘制角度 * @ ...
- AS3绘制扇形算法解析
网上有很多使用AS3画一个扇形的方法,但是却一个都没有解释这个函数是如何运作来画出扇形的,下面浅谈下我对这个函数的理解. 首先上代码,代码来自http://blog.csdn.net/weiming8 ...
- IOS-使用CAShapLayer绘制扇形
IOS-使用CAShapLayer绘制扇形 为了增加应用体验感,我们动态绘制扇形或者饼状图效果. 这里我们使用CAShapeLayer,这样就不必再-(void)draw函数内绘制图形 参考代码 -( ...
- Unity3D之Mesh(六)绘制扇形、扇面、环形
前言: 绘制了圆,就想到绘制与之相关的几何图形,以便更灵活的掌握Mesh动态创建模型的机制与方法. 一.分析: 首先,结合绘制圆的过程绘制环形: 圆形是由segments个等腰三角形组成的(上一篇中, ...
- html5--5-9 绘制扇形
html5--5-9 绘制扇形 学习要点 综合运用已经学过的知识绘制一个扇形 矩形的绘制方法 rect(x,y,w,h)创建一个矩形 strokeRect(x,y,w,hx,y,w,h) 绘制矩形(无 ...
- 绘制扇形效果线条小Bug解决
绘制线条基本代码: 变量: CPoint m_ptOrigin;//起点坐标 bool m_bTrue;//检查鼠标左键是否按下 CPoint m_ptOldOrigin;//记录上一次绘制终点坐标, ...
- Android中View的绘制过程 onMeasure方法简述 附有自定义View例子
Android中View的绘制过程 onMeasure方法简述 附有自定义View例子 Android中View的绘制过程 当Activity获得焦点时,它将被要求绘制自己的布局,Android fr ...
- Python解析Wav文件并绘制波形的方法
资源下载 #本文PDF版下载 Python解析Wav文件并绘制波形的方法 #本文代码下载 Wav波形绘图代码 #本文实例音频文件night.wav下载 音频文件下载 (石进-夜的钢琴曲) 前言 在现在 ...
- [ActionScript 3.0] 动态绘制扇形实例(拖拽绘制)
package { import flash.display.Shape; import flash.display.Sprite; import flash.events.MouseEvent; / ...
随机推荐
- haproxy下X-Frame-Options修复方法
X-Frame-Options是网页常见漏洞之一,在其他的frame下加载你网页的内容,达到劫持的目的. 修复方法很简单,在http 请求投中添加X-Frame-Options参数.网上可以查一下Ap ...
- Visual Studio 2017 Enterprise 发布 15.3.2 版,附离线安装包下载。
Visual Studio 2017 Enterprise 更新至 15.3.2 ,本安装包使用微软原版安装文件,配合layout指令全量下载后制作,内置中文语言包,包含 Visual Studio ...
- [Code] 递归函数在函数式 Java 中的实现
这里以阶乘函数为例,对于阶乘函数 fact :: Integer -> Integer fact 0 = 1 fact n = n * fact (n - 1) 在函数式 Java 中可以使用 ...
- Golang里实现Http服务器并解析header参数和表单参数
在http服务里,header参数和表单参数是经常使用到的,本文主要是练习在Go语言里,如何解析Http请求的header里的参数和表单参数,具体代码如下: package server import ...
- Spring Boot 整合 Mybatis Annotation 注解的完整 Web 案例
摘要: 原创出处 www.bysocket.com 「泥瓦匠BYSocket 」欢迎转载,保留摘要,谢谢! 『 公司需要人.产品.业务和方向,方向又要人.产品.业务和方向,方向… 循环』 本文提纲一. ...
- hexo持续更新记录
port:50187
- ActiveMq笔记1-消息可靠性理论
原博客:http://shift-alt-ctrl.iteye.com/blog/2020182 https://mp.weixin.qq.com/s/h74d6LtGB5M8VF0oLrXdCA 我 ...
- app后端session共享问题
在分布式中,session如何共享,用户登陆要解决的问题如下图所示,通过nignx请求转发,到不同的应用模块中,需要判断用户有没有登陆验证通过,问题又来了,app的移动端不像浏览器,没有cookie, ...
- ajax常用实例代码总结新手向参考(一)
http的交互方法有四种:get.post.put(增加数据).delete(删除数据) put和delete实现用的是get和post get方式 页面不能被修改,只是获取查询信息.但是提交的数 ...
- 整理几个js上传多张图片的效果
一.普通的上传图片,张数不限制 <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"&g ...