[原创]微信小程序 实现 圆环 百分百效果
1.最终效果

2.技术点:a. css3 clip-path , b.根据角度和直边计算另一个直边的长度
3.实现思路:
a.3个层(灰色圆形层, 红色圆形层,白色圆形层) ,其中灰色和红色层大小一样, 白色比灰色的小一个环形.
b.通过8个角度百分百分析红色层的剪切点剪切出不同的图形
4.代码
wxml代码:
<view class="chart">
<view>
<view>
<span style="clip-path: polygon({{d1}})"></span>
<view>02月</view>
</view>
<span>档期剩余<em> 100 </em>天</span>
</view> <view>
<view>
<span style="clip-path: polygon({{d2}})"></span>
<view>02月</view>
</view>
<span>档期剩余<em> 100 </em>天</span>
</view>
<view>
<view>
<span style="clip-path: polygon({{d3}})"></span>
<view>02月</view>
</view>
<span>档期剩余<em> 100 </em>天</span>
</view>
</view>
wxss代码:
.chart{
display: flex;
justify-content:space-around;
height: 230rpx;
padding: 25rpx 0;
}
.chart>view{
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
}
.chart>view>view{
display: flex;
justify-content: center;
align-items: center;
width: 140rpx;
height: 140rpx;
border-radius: 50%;
background: #e1e1e1;
}
/* 正方形 */
.chart>view>view>span{
position: absolute;
display: flex;
justify-content: center;
align-items: center;
width: 140rpx;
height: 140rpx;
border-radius: 50%;
background: #ff87a9;
box-sizing: border-box;
z-index:;
}
.chart>view>view>view{
display: flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
width: 116rpx;
height: 116rpx;
background: #fff;
border-radius: 50%;
color: #2b2b2b;
z-index:;
}
js代码:
/**
*
根据百分比计算多边形剪切的点
*
@module fan-point
diameter 半径
*/
//
function getPoint(percentage = 0, diameter = 70) {
var ret = [];
var angle = (percentage * 360).toFixed(0);//角度
if (angle == 0) {
ret.push("0 0");
}
else if (angle == 360) {
ret.push("0 0");
ret.push("100% 0");
ret.push("100% 100%");
ret.push("0 100% 0");
}
else {
ret.push("50% 0");//
if (angle <= 45) {
ret.push(point(((tan(angle) + 1) * diameter)) + "% 0");
}
if (angle > 45) {
ret.push("100% 0");//添加右上角点
} if (angle > 45 && angle <= 90) {
ret.push("100% " + point((1 - tan(90 - angle)) * diameter) + "%");
}
if (angle > 90 && angle <= 135) {
ret.push("100% " + point(((tan(angle - 90) + 1) * diameter)) + "%");
}
if (angle > 90 && angle <= 135) {
ret.push("100% " + point(((tan(angle - 90) + 1) * diameter)) + "%");
} if (angle > 135) {
ret.push("100% 100%");//添加右下角点
} if (angle > 135 && angle <= 180) {
ret.push(point(((tan(180 - angle) + 1) * diameter)) + "% 100%");
}
if (angle > 180 && angle <= 225) {
ret.push(point(((1 - tan(angle - 180)) * diameter)) + "% 100%");
} if (angle > 225) {
ret.push("0 100%");//添加左下角点
} if (angle > 225 && angle <= 270) {
ret.push("0 " + point((tan(270 - angle) + 1) * diameter) + "%");
}
if (angle > 270 && angle <= 315) {
ret.push("0 " + point((1 - tan(angle - 270)) * diameter) + "%");
} if (angle > 315) {
ret.push("0 0");//添加左上角点
} if (angle > 315 && angle < 360) {
ret.push(point((1 - tan(360 - angle)) * diameter) + "% 0");
} ret.push("50% 50%");
}
return ret.toString();
} function tan(angle) {
return Math.tan(angle * 2 * Math.PI / 360);
}
function point(leng, diameter = 70) {
if (leng == 0) {
return 0;
}
else {
return (leng / (diameter * 2) * 100).toFixed(2);
}
} module.exports = {
getPoint: getPoint
}
调用:
var point = require("../../utils/fan-point.js");
var that;
Page({
data: {
d1:"",
d2:"",
d3:""
},
onLoad: function () {
that = this;
that.setData({d1:point.getPoint(0.875),d2:point.getPoint(0.18),d3:point.getPoint(0.625)});
}
})
[原创]微信小程序 实现 圆环 百分百效果的更多相关文章
- 微信小程序-滚动消息通知效果
这次我主要想总结一下微信小程序实现上下滚动消息提醒,主要是利用swiper组件来实现,swiper组件在小程序中是滑块视图容器. 我们通过vertical属性(默认为false,实现默认左右滚动)设置 ...
- 微信小程序实现滑动删除效果
在一些app中,随处可见左滑动的效果,在微信小程序中,官方并未提供相关组件,需要我们自己动手写一个类似的效果 下面仅列举出核心代码,具体的优化需要根据你自身的需求 <view class='li ...
- 原创:微信小程序开发要点总结
废话不多少,下面是对我从开发微信小程序的第一步开始到发布的总结,觉得对您有帮助的话,可以赞赏下,以对我表示鼓励. 一:首先注册登录微信公众平台,这个平台很重要,以后查文档全在上面看.https://m ...
- 微信小程序实现淡入淡出效果(页面跳转)
//目前小程序没有fadeIn(),fadeOut()方法所以还是本方法手写 <!--wxml--><!--蒙版(渐出淡去效果)--><view class=" ...
- 使用movable-view制作可拖拽的微信小程序弹出层效果。
仿了潮汐睡眠小程序的代码.[如果有侵权联系删除 最近做的项目有个弹出层效果,类似音乐播放器那种.按照普通的做了一般感觉交互不是很优雅,设计妹子把潮汐睡眠的弹层给我看了看,感觉做的挺好,于是乘着有空仿照 ...
- 微信小程序动态显示项目倒计时效果
效果: wxml代码: <view class='spellNum'> <view> <text style='color: #fff;'>团长</text& ...
- 微信小程序左右滚动公告栏效果
<view class='notice-wrap' hidden='{{hideNotice}}'> <view class='tongzhitext'> <text c ...
- 微信小程序实现验证码倒计时效果
效果图 wxml <input class='input-pwd' placeholder="新密码" placeholder-style='color: #000' pas ...
- 微信小程序 - 贝塞尔曲线(购物车效果)
转载来源于:https://segmentfault.com/a/1190000011710786 简化了一下,发出来吧 示例源码:点击下载
随机推荐
- UICollectionView的注册
UICollectionView的dataSource中的item的注册 itme的注册和tableview中cell的创建是不同的 cell的创建是在cell中 而itme的注册是在viewDidL ...
- 修改eclipse最近访问的工程的配置文件
此文件为:org.eclipse.ui.ide.prefs 配置项为:RECENT_WORKSPACES= 示例:RECENT_WORKSPACES=E\:\\Workspaces\\wokspace ...
- 对MySQL交换分区的实践
前言 在介绍交换分区之前,我们先了解一下 mysql 分区. 数据库的分区有两种:水平分区和垂直分区.而MySQL暂时不支持垂直分区,因此接下来说的都是水平分区.水平分区即:以行为单位对表进行分区.比 ...
- Custom Hosting in IIS/WAS
常常需要与宿主实例进行交互.这对于使用自托管的方式是不可或缺的.当使用IIS或WAS时,不能直接访问宿主.为了克服这个障碍,WCF提供了一个宿主工厂.在.svc文件中使用Factory标签,使用此工厂 ...
- PHP单词表
输出语句printechovar_dumpprint_rprintf变量的操作unset预定义变量$_SERVER$_GET$_POST$_REQUEST$_COOKIE,$_SESSION 会话技术 ...
- ZBrush中物体的显示与隐藏
在ZBrush®中除了遮罩功能可以对局部网格进行编辑外,通过显示和隐藏局部网格也可以对局部进行控制.选择网格的控制都是手动操作,在软件中并没有相应的命令进行操作.选择局部网格的工作原理也很简单,即被选 ...
- Python内置数据结构之字典dict
1. 字典 字典是Python中唯一的内置映射类型,其中的值不按顺序排列,而是存储在键下.键可能是数(整数索引).字符串或元组.字典(日常生活中的字典和Python字典)旨在让你能够轻松地找到特定的单 ...
- jq点击按钮打开和关闭弹出层,点击除了当前按钮以外的地方关闭弹出层
1.html <a id="more" onclick="moreFun()">更多</a> <ul id="moreL ...
- Django配置MariaDB数据库
Django中配置MariaDB数据库.配置文件如下: DATABASES = { 'default': { 'ENGINE': 'django.db.backends.mysql', 'NAME': ...
- Memcached的实战笔记
官网:http://memcached.org/ 优秀Blogs: http://blog.csdn.net/jingqiang521/article/details/48345021 开启telne ...