WeChatアプレットで円形のプログレスバーを作成する方法

今回は、WeChat アプレットで円形のプログレス バーを作成する方法を説明します。WeChat アプレットで円形のプログレス バーを実装するための 注意事項 は何ですか? ここで実際のケースを見てみましょう。 Requirement Summaryは、アプレットの円形のカウントダウンを使用し、レンダリング：2つのキャンバスを使用します。1つはバックグラウンドリング、もう1つはカラーリングです。

setInterval を使用して、色付きの円を段階的に描画します。

解決策

最初のステップは構造を記述することですボックスは2つのキャンバスとテキストボックスをラップします

ボックスは親としての相対位置、フレックスレイアウト、およびセンタリングを使用します。
• 1 つのキャンバス、

  絶対位置

  を背景として使用、canvas-id="canvasProgressbg"
• もう 1 つのキャンバス、相対位置を進行状況バーとして使用、canvas-id="canvasProgress" >"<p style="text-align: left;"></p>コードは次のとおりです:

// wxml
 <view class="container">
 <view class=&#39;progress_box&#39;>
 <canvas class="progress_bg" canvas-id="canvasProgressbg"> </canvas> 
 <canvas class="progress_canvas" canvas-id="canvasProgress"> </canvas> 
 <view class="progress_text">
  <view class="progress_dot"></view> 
  <text class=&#39;progress_info&#39;> {{progress_txt}}</text>
 </view> 
 </view>
</view>
// wxss
.progress_box{
 position: relative;
 width:220px;
 height: 220px; 
// 这里的宽高是必须大于等于canvas圆环的直径 否则绘制到盒子外面就看不见了
// 一开始设置 width:440rpx; height:440rpx; 发现 在360X640分辨率的设备，下绘制的圆环跑盒子外去了
// 小程序使用rpx单位适配 ，但是canvas绘制的是px单位的。所以只能用px单位绘制的圆环在盒子内显示
 display: flex; 
 align-items: center;
 justify-content: center;
 background-color: #eee;
}
.progress_bg{
 position: absolute;
 width:220px;
 height: 220px; 
}
.progress_canvas{ 
 width:220px;
 height: 220px; 
} 
.progress_text{ 
 position: absolute; 
 display: flex; 
 align-items: center;
 justify-content: center
}
.progress_info{ 
 font-size: 36rpx;
 padding-left: 16rpx;
 letter-spacing: 2rpx
} 
.progress_dot{
 width:16rpx;
 height: 16rpx; 
 border-radius: 50%;
 background-color: #fb9126;
}

ステップ 2データ バインディング

wxml から、データ progress_txt を使用していることがわかります。そのため、js でデータを次のように設定します。

 data: {
 progress_txt: '正在匹配中...', 
 },

キャンバス描画の第3ステップ

黒板を叩いて要点を描きますcanvas-id="canvasProgressbg"

另一个canvas，使用相对定位作为进度条，canvas-id="canvasProgress

1.まず背景を描画します

円を描く関数drawProgressbgをjsでカプセル化し、キャンバスに円を描きますonReadyで実行されます

アプレットのキャンバスコンポーネントは以下のとおりです

drawProgressbg: function(){
 // 使用 wx.createContext 获取绘图上下文 context
 var ctx = wx.createCanvasContext('canvasProgressbg')
 ctx.setLineWidth(4);// 设置圆环的宽度
 ctx.setStrokeStyle('#20183b'); // 设置圆环的颜色
 ctx.setLineCap('round') // 设置圆环端点的形状
 ctx.beginPath();//开始一个新的路径
 ctx.arc(110, 110, 100, 0, 2 * Math.PI, false);
 //设置一个原点(100,100)，半径为90的圆的路径到当前路径
 ctx.stroke();//对当前路径进行描边
 ctx.draw();
 },
 onReady: function () {
 this.drawProgressbg(); 
 },

を見てください。次のような効果：draw jsは、この機能を描く関数を描写します) 効果は次のとおりです: this.drawCircle(1) 効果は次のとおりです: this.drawCircle(2) 効果は次のとおりです:

3. タイマーを設定します

カウンターカウントを設定します。ステップと js のデータ内のタイマー

1. タイマー関数 countInterval を js でカプセル化し、
   この関数を onReady で実行します

 drawCircle: function (step){ 
 var context = wx.createCanvasContext('canvasProgress');
 // 设置渐变
 var gradient = context.createLinearGradient(200, 100, 100, 200);
 gradient.addColorStop("0", "#2661DD");
 gradient.addColorStop("0.5", "#40ED94");
 gradient.addColorStop("1.0", "#5956CC");
 
 context.setLineWidth(10);
 context.setStrokeStyle(gradient);
 context.setLineCap('round')
 context.beginPath(); 
 // 参数step 为绘制的圆环周长，从0到2为一周 。 -Math.PI / 2 将起始角设在12点钟位置 ，结束角 通过改变 step 的值确定
 context.arc(110, 110, 100, -Math.PI / 2, step * Math.PI - Math.PI / 2, false);
 context.stroke(); 
 context.draw() 
 },
 onReady: function () {
 this.drawProgressbg(); 
 this.drawCircle(2) 
 },

2. 最終的な効果

この記事の事例を読んだ後は、PHP 中国語 Web サイトの他の関連記事にも注目してください。

推奨読書:

デフォルトのアバター充填を実装するための JS
2. JavaScript 正規表現のヒント

以上がWeChatアプレットで円形のプログレスバーを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。