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)});
}
})

[原创]微信小程序 实现 圆环 百分百效果的更多相关文章

  1. 微信小程序-滚动消息通知效果

    这次我主要想总结一下微信小程序实现上下滚动消息提醒,主要是利用swiper组件来实现,swiper组件在小程序中是滑块视图容器. 我们通过vertical属性(默认为false,实现默认左右滚动)设置 ...

  2. 微信小程序实现滑动删除效果

    在一些app中,随处可见左滑动的效果,在微信小程序中,官方并未提供相关组件,需要我们自己动手写一个类似的效果 下面仅列举出核心代码,具体的优化需要根据你自身的需求 <view class='li ...

  3. 原创:微信小程序开发要点总结

    废话不多少,下面是对我从开发微信小程序的第一步开始到发布的总结,觉得对您有帮助的话,可以赞赏下,以对我表示鼓励. 一:首先注册登录微信公众平台,这个平台很重要,以后查文档全在上面看.https://m ...

  4. 微信小程序实现淡入淡出效果(页面跳转)

    //目前小程序没有fadeIn(),fadeOut()方法所以还是本方法手写  <!--wxml--><!--蒙版(渐出淡去效果)--><view class=" ...

  5. 使用movable-view制作可拖拽的微信小程序弹出层效果。

    仿了潮汐睡眠小程序的代码.[如果有侵权联系删除 最近做的项目有个弹出层效果,类似音乐播放器那种.按照普通的做了一般感觉交互不是很优雅,设计妹子把潮汐睡眠的弹层给我看了看,感觉做的挺好,于是乘着有空仿照 ...

  6. 微信小程序动态显示项目倒计时效果

    效果: wxml代码: <view class='spellNum'> <view> <text style='color: #fff;'>团长</text& ...

  7. 微信小程序左右滚动公告栏效果

    <view class='notice-wrap' hidden='{{hideNotice}}'> <view class='tongzhitext'> <text c ...

  8. 微信小程序实现验证码倒计时效果

    效果图 wxml <input class='input-pwd' placeholder="新密码" placeholder-style='color: #000' pas ...

  9. 微信小程序 - 贝塞尔曲线(购物车效果)

    转载来源于:https://segmentfault.com/a/1190000011710786 简化了一下,发出来吧 示例源码:点击下载

随机推荐

  1. Core Bluetooth的基本常识

    每个蓝牙4.0设备都是通过服务(Service)和特征(Characteristic)来展示自己的 一个设备必然包含一个或多个服务,每个服务下面又包含若干个特征 特征是与外界交互的最小单位 比如说,一 ...

  2. Spark RDD概念学习系列之不同角度看RDD

    不多说,直接上干货!

  3. SQL Server 日常维护--查询当前正在执行的语句、死锁、堵塞

    查询当前正在执行的语句: SELECT der.[session_id],der.[blocking_session_id], sp.lastwaittype,sp.hostname,sp.progr ...

  4. 欢迎来到SQL学院

    给学习SQL的同学的福利@ http://sqlschool.modeanalytics.com/ 第一部分 学习SQL 本教程是专为那些想用数据回答问题的人们而设计的.从很大程度上讲,SQL是数据分 ...

  5. Linux下编译安装Memcache

    需要gcc,make,cmake,autoconf,libtool等工具,联网后,yum install -y gcc,make,cmake,autoconf,libtool 编译安装libevent ...

  6. 理解HashMap底层原理,一个简单的HashMap例子

    package com.jl.testmap; /** * 自定义一个HashMap * @author JiangLai * */ public class MyHashMap<K,V> ...

  7. 查看md文件

    使用命令将md文件转为html,在浏览器中演示 通过npm安装i5ting_toc 安装好node之后,可以直接使用npm.Windows+R打开运行框,输入cmd,打开命令窗口.连网的情况下,输入如 ...

  8. java真实面试题(1)

    2019年春杭州邦盛科技java面试题. 1,java基本类型 byte,char,short,int,long,float,double,boolean. 2,重写重载 重写,子类重写父类的方法,方 ...

  9. 使用短信猫发送短信java代码

    短信猫简单配置:https://www.cnblogs.com/Big-Boss/p/9699880.html 发送短信: package utils; import org.smslib.AGate ...

  10. (5)pyspark----共享变量

    如果想在节点之间共享一份变量,spark提供了两种特定的共享变量,来完成节点之间的变量共享. (1)广播变量(2)累加器 二.广播变量 概念: 广播变量允许程序员缓存一个只读的变量在每台机器上,而不是 ...