Use WeChat applet to implement a circular progress bar

高洛峰
Release: 2017-02-27 14:02:32
Original
2548 people have browsed it

As the popularity of mini programs declines, more people have begun to calm down and develop WeChat mini programs. Recently, I encountered a problem in the process of developing a WeChat mini program: how to use WeChat mini programs to implement a circle shaped progress bar? After sorting it out, record it and share it with everyone.
The idea and principle of code implementation:

Create two canvas tags, first draw the bottom light gray circle background, and then draw the upper red progress bar. The code of

.wxml is as follows:

<view class="wrap">
  <view class="circle-box">
    <canvas class="circle" style="width:200px; height:200px;" canvas-id="canvasArcCir">
    </canvas>
    <canvas class="circle" style="z-index: -5; width:200px; height:200px;" canvas-id="canvasCircle">
    </canvas>
    <view class="draw_btn" bindtap="drawCircle">开始动态绘制</view>
  </view>
</view>
Copy after login

WXSS code

Special note: It is best to use the underlying canvas.

page {
  width: 100%;
  height: 100%;
  background-color: #fff;
}
 
.circle-box {
  text-align: center;
  margin-top: 10vw;
}
 
.circle {
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
}
 
.draw_btn {
  width: 35vw;
  position: absolute;
  top: 33vw;
  right: 0;
  left: 0;
  margin: auto;
  border: 1px #000 solid;
  border-radius: 5vw;
}
Copy after login

js code is as follows:

//获取应用实例
var app = getApp()
 
var interval;
var varName;
var ctx = wx.createCanvasContext(&#39;canvasArcCir&#39;);
 
Page({
  data: {
  },
  drawCircle: function () {
    clearInterval(varName);
    function drawArc(s, e) {
      ctx.setFillStyle(&#39;white&#39;);
      ctx.clearRect(0, 0, 200, 200);
      ctx.draw();
      var x = 100, y = 100, radius = 96;
      ctx.setLineWidth(5);
      ctx.setStrokeStyle(&#39;#d81e06&#39;);
      ctx.setLineCap(&#39;round&#39;);
      ctx.beginPath();
      ctx.arc(x, y, radius, s, e, false);
      ctx.stroke()
      ctx.draw()
    }
    var step = 1, startAngle = 1.5 * Math.PI, endAngle = 0;
    var animation_interval = 1000, n = 60;
    var animation = function () {
      if (step <= n) {
        endAngle = step * 2 * Math.PI / n + 1.5 * Math.PI;
        drawArc(startAngle, endAngle);
        step++;
      } else {
        clearInterval(varName);
      }
    };
    varName = setInterval(animation, animation_interval);
  },
  onReady: function () {
    //创建并返回绘图上下文context对象。
    var cxt_arc = wx.createCanvasContext(&#39;canvasCircle&#39;);
    cxt_arc.setLineWidth(6);
    cxt_arc.setStrokeStyle(&#39;#eaeaea&#39;);
    cxt_arc.setLineCap(&#39;round&#39;);
    cxt_arc.beginPath();
    cxt_arc.arc(100, 100, 96, 0, 2 * Math.PI, false);
    cxt_arc.stroke();
    cxt_arc.draw();
  },
  onLoad: function (options) {
 
  }
})
Copy after login

Points to note

1. For mini program canvas drawing, please watch WeChat mini program official document drawing

2. The path to start drawing can be selected based on the variable startAngle in the JS code.

Use WeChat applet to implement a circular progress bar

The effect of the circular progress bar is as follows:

Use WeChat applet to implement a circular progress bar

Initial state

Use WeChat applet to implement a circular progress bar

Click the middle button to start drawing

Use WeChat applet to implement a circular progress bar

The drawing process

Use WeChat applet to implement a circular progress bar

End of drawing

For more related articles about using WeChat applet to implement a circular progress bar, please pay attention to the PHP Chinese website!


Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template