So implementieren Sie einen kreisförmigen Echtzeit-Fortschrittsbalken im WeChat-Applet

Dieser Artikel führt Sie hauptsächlich in die Methode zur Verwendung des WeChat-Applets ein, um einen kreisförmigen Echtzeit-Fortschrittsbalken zu realisieren. Ich glaube, dass er für alle Freunde, die ihn benötigen, einen gewissen Referenzwert hat. Werfen Sie einen Blick darauf.

Vorwort

Um kürzlich eine Aufnahmeschaltfläche bei der Arbeit zu erstellen, habe ich die Implementierung eines kreisförmigen Echtzeit-Fortschrittsbalkens in a untersucht Hier ist der Artikel. Dieser Artikel gibt Ihnen eine detaillierte Einführung in die Implementierungsmethode und Beispiele. Schauen wir uns zunächst die Renderings an.

Die Darstellung ist wie folgt

Anfangszustand

Klicken Sie auf die mittlere Schaltfläche, um mit dem Zeichnen zu beginnen

Zeichenvorgang

Ende des Zeichnens

Implementierungsidee

Erstellen Sie zwei Canvas-Tags, zeichnen Sie zuerst den unteren hellgrauen Kreishintergrund und dann den oberen roten Fortschrittsbalken.

WXML-Code

<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>

WXSS-Code

Besonderer Hinweis: Am besten verwenden Sie

z-index:-5 für die untere Leinwand; platzieren Sie es unten

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

JS-Code

//获取应用实例
var app = getApp()

var interval;
var varName;
var ctx = wx.createCanvasContext('canvasArcCir');

Page({
 data: {
 },
 drawCircle: function () {
 clearInterval(varName);
 function drawArc(s, e) {
 ctx.setFillStyle('white');
 ctx.clearRect(0, 0, 200, 200);
 ctx.draw();
 var x = 100, y = 100, radius = 96;
 ctx.setLineWidth(5);
 ctx.setStrokeStyle('#d81e06');
 ctx.setLineCap('round');
 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) {

 }
})

Zu beachtende Punkte

1. Informationen zum Zeichnen des Miniprogramms finden Sie im offiziellen Dokument zum Zeichnen des WeChat-Miniprogramms.

2 Der Pfad zum Starten des Zeichnens kann auf der Variablen startAngle im JS-Code basieren um auszuwählen, wo mit dem Zeichnen begonnen werden soll

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein die chinesische PHP-Website!

Verwandte Empfehlungen:

WeChat-Miniprogramm Implementierung des Überwachungsgesten-Gleitens zum Seitenwechsel

WeChat-Applet Bildskalierung

WeChat-Applet-Entwicklung mit WeChat-Applet

Das obige ist der detaillierte Inhalt vonSo implementieren Sie einen kreisförmigen Echtzeit-Fortschrittsbalken im WeChat-Applet. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!