扇形由三段线条组成,两条直线和一条弧线,直线可以用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绘制扇形的方法的更多相关文章

  1. [ActionScript 3.0] 绘制扇形方法

    /** * 绘制扇形 * @param mc 承载扇形的对象 * @param x 圆心角x * @param y 圆心角y * @param r 半径 * @param angle 绘制角度 * @ ...

  2. AS3绘制扇形算法解析

    网上有很多使用AS3画一个扇形的方法,但是却一个都没有解释这个函数是如何运作来画出扇形的,下面浅谈下我对这个函数的理解. 首先上代码,代码来自http://blog.csdn.net/weiming8 ...

  3. IOS-使用CAShapLayer绘制扇形

    IOS-使用CAShapLayer绘制扇形 为了增加应用体验感,我们动态绘制扇形或者饼状图效果. 这里我们使用CAShapeLayer,这样就不必再-(void)draw函数内绘制图形 参考代码 -( ...

  4. Unity3D之Mesh(六)绘制扇形、扇面、环形

    前言: 绘制了圆,就想到绘制与之相关的几何图形,以便更灵活的掌握Mesh动态创建模型的机制与方法. 一.分析: 首先,结合绘制圆的过程绘制环形: 圆形是由segments个等腰三角形组成的(上一篇中, ...

  5. html5--5-9 绘制扇形

    html5--5-9 绘制扇形 学习要点 综合运用已经学过的知识绘制一个扇形 矩形的绘制方法 rect(x,y,w,h)创建一个矩形 strokeRect(x,y,w,hx,y,w,h) 绘制矩形(无 ...

  6. 绘制扇形效果线条小Bug解决

    绘制线条基本代码: 变量: CPoint m_ptOrigin;//起点坐标 bool m_bTrue;//检查鼠标左键是否按下 CPoint m_ptOldOrigin;//记录上一次绘制终点坐标, ...

  7. Android中View的绘制过程 onMeasure方法简述 附有自定义View例子

    Android中View的绘制过程 onMeasure方法简述 附有自定义View例子 Android中View的绘制过程 当Activity获得焦点时,它将被要求绘制自己的布局,Android fr ...

  8. Python解析Wav文件并绘制波形的方法

    资源下载 #本文PDF版下载 Python解析Wav文件并绘制波形的方法 #本文代码下载 Wav波形绘图代码 #本文实例音频文件night.wav下载 音频文件下载 (石进-夜的钢琴曲) 前言 在现在 ...

  9. [ActionScript 3.0] 动态绘制扇形实例(拖拽绘制)

    package { import flash.display.Shape; import flash.display.Sprite; import flash.events.MouseEvent; / ...

随机推荐

  1. 我不知道的行高——line-height

    概述 对于块级元素,CSS属性line-height指定了元素内部line-boxes的最小高度. 对于非替代行内元素,line-height用于计算line box的高度. 对于替代行内元素,如bu ...

  2. w !sudo tee %

    w !sudo tee % 该命令可用于保存有权限的写文件

  3. LNMP Yii2 验证码不显示问题最终解决方案

    首先,本地使用OK! 然后,新配置的LNMP环境,验证码一直显示不出来,看了Yii2的验证码存在session里,怀疑是session有问题. 在测试其他页面的时候,发现:session_start( ...

  4. UVA - 1371 Period 二分+dp

    思路:设字符串x的长度为n,y的长度为m,那么答案一定在[0, m]之间,那么可以二分求答案. d(i, j)表示第一个串前i个字符至少需要经过多少次才能的到第二个串的前j个字符,转移方程d(i, j ...

  5. SpringBoot+gradle+idea实现热部署和热加载

    前言 因为之前使用myeclipes的同学就知道,在使用myeclipes的时候,java文件或者jsp文件写完之后会被直接热加载到部署的容器中,从而在开发的时候,不同经常去重启项目,从而达到了增加开 ...

  6. JavaScript基础教程2-20160612

    1.JavaScript之操作html元素,Dom Dom是抽象出来的网页对象,需要了解面向对象的思想:调用对象下的方法实现相应的功能 使用JS调用dom来创建标签. //document是网页对象 ...

  7. ACL访问控制列表

    acl是基于文件系统的,所以支不支持acl在于使用什么文件系统. FAT32文件系统不支持权限,也不区分大小写 如果一个分区不是安装系统时分的分区,是一个新的分区的话,默认是不支持acl CentOS ...

  8. python函数式编程之装饰器(二)

    以前用装饰器,都是定义好了装饰器后,使用@装饰器名的方法写入被装饰函数的正上方 在这里,定义的装饰器都是没有参数的 在定义装饰器的函数的时候,没有在括号里定义参数,这就叫做无参装饰器 既然有无参装饰器 ...

  9. Micropython 如何用Turnipbit做一个自动浇水装置

    最近在研究Turnipbit这块板子,打算是连接一个摄像头模块,正在实验练习中,(祝自己早日弄好)上篇文章我们讲了用Turnipbit连接LCD5110显示英文词句,前几天给家里花浇水的时候发现花招了 ...

  10. 【php】windows安装PHP5.5+Apache2.4

    php5.5和apache2.4的整合 看到php的版本升级了,就想试下新的特性 一.准备下载的文件 apache2.4.9 http://www.apachelounge.com/download/