参考:

Egret教程Arc是使用示例:http://edn.egret.com/cn/article/index/id/673

我封装的工具类:

/**
* 圆形进度
* @author chenkai 2018/8/10
*/
class CircleProgress{
private target:egret.DisplayObject; //遮罩的目标
private shape:egret.Shape; //遮罩
private anticlockwise:boolean; //true逆时针 false顺时针
private dic:number; //角度增加方向 /**
* (anticlockwise, dic) (false,1)顺时针显示对象 (true,1)顺时针隐藏对象 (true,-1)逆时针显示对象 (false,-1)逆时针隐藏对象
* @param target 遮罩的对象
* @param anticlockwise
* @param dic
*/
public constructor(target:egret.DisplayObject, anticlockwise:boolean, dic:number){
this.target = target; this.shape = new egret.Shape();
this.shape.x = this.target.x + this.target.width/2;
this.shape.y = this.target.y + this.target.height/2;
target.parent && target.parent.addChild(this.shape); this.target.mask = this.shape; this.anticlockwise = anticlockwise;
this.dic = dic;
} /**
* 绘制进度
* @param value 0-1 进度
* @param offerAngle 角度偏移值,默认从0度开始画
*/
public drawProgress(value:number, offerAngle:number = 0){
if(value > 1){
value = 1;
}
var r = Math.max(this.target.width/2, this.target.height/2) / 2 * 1.5;
let startAngle = offerAngle;
let endAngle = (360*value + offerAngle)*this.dic;
this.shape.graphics.clear();
this.shape.graphics.beginFill(0x00ffff, 1);
this.shape.graphics.lineTo(r, 0);
this.shape.graphics.drawArc(0, 0, r, startAngle*Math.PI/180, endAngle * Math.PI / 180, this.anticlockwise);
this.shape.graphics.lineTo(0, 0);
this.shape.graphics.endFill();
} //销毁
public destroyMe(){
this.target = null;
}
}

  

使用方法:

let progress = new CircleProgress(this.clock,false,1);
progress.drawProgress(1/10);

  

圆形CD绘制 (扇形)的更多相关文章

  1. IOS-使用CAShapLayer绘制扇形

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

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

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

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

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

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

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

  5. canvas自适应圆形时钟绘制

    前面的话 前面介绍过canvas粒子时钟的绘制,本文将详细介绍canvas自适应圆形时钟绘制 效果演示 最终自适应圆形时钟的效果如下所示 功能分析 下面来分析一下该圆形时钟的功能 [1]静态背景 对于 ...

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

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

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

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

  8. AS3绘制扇形算法解析

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

  9. 在 Canvas 中绘制扇形

    在 HTML5 Canvas 中,我们可以通过 arc 方法来绘制圆形: // context.arc(x, y, r, sAngle, eAngle, counterclockwise); var ...

随机推荐

  1. 内存管理 初始化(五)kmem_cache_init 初始化slab分配器(上)

    看了下kmem_cache_init,涉及到不同MIGRATE间的buddy system的迁移,kmem_cache的构建,slab分配器头的构建.buddy system的伙伴拆分. 对于SMP系 ...

  2. QT基础:QMainWindow学习小结

    简述 普通的桌面应用程序有个共同的特性,有菜单栏.工具栏.状态栏.中央窗口等部件.菜单栏其实可以看成是一个窗口,菜单栏中的每一个菜单也可以看成一个窗口,每个部件基本都可以认为是一个窗口.那么这些典型的 ...

  3. 如何更改webstrom的默认端口63342

  4. Chrome扩展应用

    现在越来越多的用户将chrome浏览器设置为自己默认的浏览器,不仅是因为他的界面美,最重要的是他对html5和CSS3完美的支持,且调试工具非常好用,还有丰富的扩展库.如何安装自己的扩展呢? 点击自定 ...

  5. Java使用选择排序法对数组排序

    编写程序,实现将输入的字符串转换为一维数组,并使用选择排序法对数组进行排序. 思路如下: 点击"生成随机数"按钮,创建Random随机数对象: 使用JTextArea的setTex ...

  6. 8 -- 深入使用Spring -- 8...1 Spring提供的DAO支持

    8.8.1 Spring提供的DAO支持. DAO模式是一种标准的Java EE设计模式,DAO模式的核心思想是,所有的数据库访问都通过DAO组件完成,DAO组件封装了数据库的增.删.查.改等原子操作 ...

  7. php 安装rabbitmq扩展无报错版

    需要安装rabbitmq-c,rabbitmq-c是一个用于C语言的,与AMQP server进行交互的client库.下载了v0.5.2版本(https://github.com/alanxz/ra ...

  8. Splash args 属性

    args属性可以获取加载时配置的参数,一般我们只传入URL,如下,args.url 就相当于加载时配置的URL参数,我们把它赋值给 url 变量然后返回:

  9. Java中有几种线程池?

    缓存,修正,计划,单一 newCachedThreadPool newFixedThreadPool newScheduleThreadPool newSingleThreadExecutor

  10. open-falcon之agent

    功能 采集数据,解析数据,上报数据至transfer 基本涵盖了系统层面监控指标,直接将数据转换为metricValue形式,上报至transfer 支持插件采集,代码插件放可受git管理,放置在pl ...