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