找回密码
 立即注册

QQ登录

只需一步,快速开始

微信小程序 实现 圆环 百分百效果

[复制链接]
查看: 446|回复: 0
最佳答案
0 

2

主题

2

帖子

57

积分

新人求带

积分
57
 楼主| 发表于 2018-3-12 14:46:17 | 显示全部楼层 |阅读模式
1.最终效果
114289-20180309090351727-338846428.png

2.技术点:a. css3 clip-path , b.根据角度和直边计算另一个直边的长度

3.实现思路:

a.3个层(灰色圆形层, 红色圆形层,白色圆形层)  ,其中灰色和红色层大小一样, 白色比灰色的小一个环形.
b.通过8个角度百分百分析红色层的剪切点剪切出不同的图形

4.代码
wxml代码:
  1. <view class="chart">
  2.         <view>
  3.             <view>
  4.                 <span style="clip-path: polygon({{d1}})"></span>
  5.                 <view>02月</view>
  6.             </view>
  7.             <span>档期剩余<em> 100 </em>天</span>
  8.         </view>
  9.         
  10.         <view>
  11.             <view>
  12.                 <span style="clip-path: polygon({{d2}})"></span>
  13.                 <view>02月</view>
  14.             </view>
  15.             <span>档期剩余<em> 100 </em>天</span>
  16.         </view>
  17.         <view>
  18.             <view>
  19.                 <span style="clip-path: polygon({{d3}})"></span>
  20.                 <view>02月</view>
  21.             </view>
  22.             <span>档期剩余<em> 100 </em>天</span>
  23.         </view>
  24.     </view>
复制代码

wxss代码:
  1. .chart{
  2.     display: flex;   
  3.     justify-content:space-around;
  4.     height: 230rpx;
  5.     padding: 25rpx 0;
  6. }
  7. .chart>view{
  8.     display: flex;
  9.     flex-direction: column;
  10.     align-items: center;
  11.     justify-content: space-around;
  12. }

  13. .chart>view>view{
  14.     display: flex;
  15.     justify-content: center;
  16.     align-items: center;
  17.     width: 140rpx;
  18.     height: 140rpx;
  19.     border-radius: 50%;
  20.     background: #e1e1e1;
  21. }
  22. /* 正方形 */
  23. .chart>view>view>span{
  24.     position: absolute;
  25.     display: flex;
  26.     justify-content: center;
  27.     align-items: center;
  28.     width: 140rpx;
  29.     height: 140rpx;
  30.     border-radius: 50%;
  31.     background: #ff87a9;
  32.     box-sizing: border-box;
  33.     z-index: 999;
  34. }
  35. .chart>view>view>view{
  36.     display: flex;
  37.     justify-content: center;
  38.     align-items: center;
  39.     box-sizing: border-box;
  40.     width: 116rpx;
  41.     height: 116rpx;
  42.     background: #fff;
  43.     border-radius: 50%;
  44.     color: #2b2b2b;
  45.     z-index: 1000;
  46. }
复制代码

js代码:
  1. /**
  2. *
  3. 根据百分比计算多边形剪切的点
  4. *
  5. [url=home.php?mod=space&uid=101259]@module[/url] fan-point
  6. diameter 半径
  7. */
  8. //
  9. function getPoint(percentage = 0, diameter = 70) {
  10.     var ret = [];
  11.     var angle = (percentage * 360).toFixed(0);//角度
  12.     if (angle == 0) {
  13.         ret.push("0 0");
  14.     }
  15.     else if (angle == 360) {
  16.         ret.push("0 0");
  17.         ret.push("100% 0");
  18.         ret.push("100% 100%");
  19.         ret.push("0 100% 0");
  20.     }
  21.     else {
  22.         ret.push("50% 0");//
  23.         if (angle <= 45) {
  24.             ret.push(point(((tan(angle) + 1) * diameter)) + "% 0");
  25.         }
  26.         if (angle > 45) {
  27.             ret.push("100% 0");//添加右上角点
  28.         }

  29.         if (angle > 45 && angle <= 90) {
  30.             ret.push("100% " + point((1 - tan(90 - angle)) * diameter) + "%");
  31.         }
  32.         if (angle > 90 && angle <= 135) {
  33.             ret.push("100% " + point(((tan(angle - 90) + 1) * diameter)) + "%");
  34.         }
  35.         if (angle > 90 && angle <= 135) {
  36.             ret.push("100% " + point(((tan(angle - 90) + 1) * diameter)) + "%");
  37.         }

  38.         if (angle > 135) {
  39.             ret.push("100% 100%");//添加右下角点
  40.         }

  41.         if (angle > 135 && angle <= 180) {
  42.             ret.push(point(((tan(180 - angle) + 1) * diameter)) + "% 100%");
  43.         }
  44.         if (angle > 180 && angle <= 225) {
  45.             ret.push(point(((1 - tan(angle - 180)) * diameter)) + "% 100%");
  46.         }

  47.         if (angle > 225) {
  48.             ret.push("0 100%");//添加左下角点
  49.         }

  50.         if (angle > 225 && angle <= 270) {
  51.             ret.push("0 " + point((tan(270 - angle) + 1) * diameter) + "%");
  52.         }
  53.         if (angle > 270 && angle <= 315) {
  54.             ret.push("0 " + point((1 - tan(angle - 270)) * diameter) + "%");
  55.         }

  56.         if (angle > 315) {
  57.             ret.push("0 0");//添加左上角点
  58.         }

  59.         if (angle > 315 && angle < 360) {
  60.             ret.push(point((1 - tan(360 - angle)) * diameter) + "% 0");
  61.         }

  62.         ret.push("50% 50%");
  63.     }
  64.     return ret.toString();
  65. }

  66. function tan(angle) {
  67.     return Math.tan(angle * 2 * Math.PI / 360);
  68. }
  69. function point(leng, diameter = 70) {
  70.     if (leng == 0) {
  71.         return 0;
  72.     }
  73.     else {
  74.         return (leng / (diameter * 2) * 100).toFixed(2);
  75.     }
  76. }

  77. module.exports = {
  78.     getPoint: getPoint
  79. }
复制代码

调用:
  1. var point = require("../../utils/fan-point.js");
  2. var that;

  3. Page({
  4.   data: {
  5.     d1:"",
  6.     d2:"",
  7.     d3:""
  8.   },
  9.   onLoad: function () {
  10.     that = this;
  11.     that.setData({d1:point.getPoint(0.875),d2:point.getPoint(0.18),d3:point.getPoint(0.625)});
  12.   }
  13. })
复制代码
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则



www.henkuai.com—微信开发者的分享交流平台,专注微信开发生态。

天津市滨海新区
中新生态城中成大道生态建设公寓9号楼3层301

微信公众号

广告推广
QQ:805874290

市场合作
zhongcong@henkuai.com