环形百分比控件iantoo.percent()

2020-04-26 11:51:47 阅读：287 来源： 互联网

标签：控件 canvas 百分比必填 percent number 默认 iantoo subject

使用

引入文件:

./build/js/iantooPercent.js

并在页面执行

<canvas id="iantooPercent" style="width: 150px;height: 150px"> </canvas>
<script type="text/javascript" src="../../build/js/iantooPercent.js"></script>
<script type="text/javascript">
    iantoo.percent({
        el:'iantooPercent'
    })

既可正常显示如下
haha
该模块不依赖任何三方模块，并于iantoo系列其它功能可同时存在。

兼容性

所有支持canvas的浏览器均支持该模块

可以参考canvas基本支持属性
haha

预览

haha

iantooPercent

API

el

canvas对应的ID名称,必填。

模块最终使用querySelector方法进行DOM 查找,并自动添加#为id查找。

line

指边线,也就是背景中的整圆。

line.size

非必填、number,默认:4

边线的粗细。

line.color

非必填、string,默认:'#D3EDFD'，十六进制颜色值。

边线的颜色。

subject

主要旋转部分的样式设置

subject.size

非必填、number,默认:8。

旋转主线条的粗细。

subject.color

非必填、string,默认:'#57C0FD'，十六进制颜色值。

旋转的主线条的颜色。

subject.Start_Position

非必填、number,默认:0，取值:0,1,2,3。

制旋转主线条的开始位置，取值:0,1,2,3 ;按照时钟的时间说明 0代表从00点钟方向开始; 1代表是3点钟方向,依此类推。

subject.percentage

非必填、number,默认:0，取值:0～1。

旋转的百分比，取值在0～1之间，如果浮点数在小数点后三位的数，不会进行四舍五入，而是通过直接取小数点后面两位数为准。

subject.content

非必填、string,默认:'附加文字'

除显示百分比数字以外，的附加内容显示文字，将显示在百分比内容下面，此处并未对传入字符长度做限制。

perStyle

百分比文字样式

perStyle.fontSize

非必填、number,默认:30。

百分比文字大小,会通过subject.percentage的值自动计算百分数的数字并添加百分号。

perStyle.color

非必填、string,默认:'#EF5A3C'。

百分比文字现实的颜色。

contentStyle.

附加内容的样式

contentStyle.fontSize

非必填、number,默认:16。

附加文字内容显示的字体大小

contentStyle.color

非必填、string,默认:'#77828C'。

附加内容的文字颜色。

注：该模块必须对canvas标签设置style的宽高属性，或者通过class属性指定宽高。源码中会通过获取canvas的offsetWidth和offsetHeight去重新设置canvas的width和height属性，但这并不影响自身style属性下所对应显示的大小。

标签：控件,canvas,百分比,必填,percent,number,默认,iantoo,subject
来源： https://www.cnblogs.com/baimeishaoxia/p/12778525.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9