Skip to content

luozt/pie-shape.js

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

2 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

#pie-shape.js插件

此插件是本人在第一间公司做项目时开发的,颇有纪念价值。

许多插件实现扇形都是通过canvas来实现,本插件利用border-radius:50%;原理制作的半圆形,把它放在一个长方形的DIV中,通过rotate半圆形以及overflow:hidden;长方形实现遮住超出长方形的半圆形部分来实现扇形。是不是很巧妙?

特点:

  • 纯js实现,无需jQuery
  • 支持AMD模块规范

缺点:

  • 暂时只支持webkit浏览器
  • 代码有待优化,有存在少许bug,如teardown()功能未完全
  • 启用transition时,浏览器对webkitTransitionEnd事件支持不流畅

##使用方法

  1. 引入pie-shape.css
  2. 引入pie-shape.js
  3. js调用:
var pie1 = new PieShape({
  parentNode: document.getElementById("test"),
  radius: 100,
  initialAngle: 145,
  transition: false
});

##参数配置

new PieShape(options)中的options配置,{}里面是传参格式,冒号:后面是默认值。带*星号的参数是必选的,不过本插件没有必选的参数。

  • parentNode: {DOM object : } 扇形父容器div,扇形将创建在该容器内
  • containerId: {String : ""} 创建扇形容器的ID
  • containerClass: {String : ""} 添加给创建扇形容器的class
  • position: {String : "absolute"} 创建扇形容器定位方式,可选absolute | relative
  • backgroundColor: {String : "yellow"} 创建扇形容器的背景色
  • radius: {number : 100} 创建扇形的半径
  • transition: {boolean : true} 扇形改变角度时是否动画过渡显示
  • initialAngle: {number : 45} 扇形创建后创始角度

返回的对象,提供调用的API有:

  • setAngle(angle):@angle: {number} 改变扇形的角度
  • resize(radius):@radius: {number} 改变扇形的大小,传入半径
  • get(which):@which:{string} 获取扇形的元素,如容器DIV。which可选值:"wrap"
  • teardown():卸载插件,删除该扇形

About

基于DOM实现的扇形

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published