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; / ...
随机推荐
- 消息队列(MQ)入门-activemq,代码级别
第一种:activemq: 1.从官网下载apache-activemq-5.15.3-bin.zip并解压: 2.启动activemq, CMD--/bin/activemq start ,访问12 ...
- js中的各种“位置”——“top、clientTop、scrollTop、offsetTop……”,你知道多少
当要做一些与位置相关的插件或效果的时候,像top.clientTop.scrollTop.offsetTop.scrollHeight.clientHeight.offsetParent...看到这么 ...
- CSS布局(四) float详解
一.float设计初衷 因为float被设计出来的初衷是用于--文字环绕效果.即,一个图片一段文字,图片float:left之后,文字会环绕图片. <div style="width: ...
- Servlet3.0+springmvc5+log4j2正确的开启姿势(WebLookUp)
前言 java社区占据市场份额比较大的日志组件由log4j 1.×,到logback,再到整合后的升级版 log4j 2.×,有网友测试后据说log4j2的性能最NB.于是开始往自己的springmv ...
- UVA 816 bfs
算法入门经典上面的题.题目链接 uva816 大致题意 有一个最多包含9*9个交叉点的迷宫.输入起点.离开起点时的朝向和终点,求一条最短路(多解时任意输出一个即可).详细题意请看原题 思路 其实就是b ...
- CodeForces - 730A 贪心+模拟
贪心策略: 1.只有一个最大值,选着第二大的一起参加比赛减分. 2.有奇数个最大值,选择三个进行比赛. 3.偶数个最大值,选择两个进行比赛. 为什么不把最大值全部选择? 因为最多只能选五个,有可能选择 ...
- Enum枚举写的一个简单状态机
今天下雨,心情有点压抑,所以用枚举写个状态机排解一下心情,顺便记录一下枚举使用方法. package statemachine; import java.util.ArrayList; import ...
- 后台模拟请求 HttpHelper 序列化 MD5 时间戳
使用场景 C# 服务器后台调用其他服务器并处理 场景 /// <summary> /// 获取用户信息 /// </summary> /// <param name=&q ...
- R︱shiny实现交互式界面布置与搭建(案例讲解+学习笔记)
要学的东西太多,无笔记不能学~~ 欢迎关注公众号,一起分享学习笔记,记录每一颗"贝壳"~ --------------------------- 看了看往期的博客,这个话题竟然是第 ...
- 使用poi和jfreechart生成excel图表图片
最近项目在频繁的操作excel,里边涉及到很多和图表有关的东西.有时候需要使用java操作excel自带的图标,比较复杂的我们都是使用excel模板的形式实现. 除此之外,也有一些功能只需要生成对应的 ...