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

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: 999;
}
.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: 1000;
}

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