WeChat 애플릿은 순환 진행률 표시줄 예시 공유를 구현합니다.

이 기사에서는 주로 WeChat 애플릿에서 순환 진행률 표시줄을 구현하는 예를 공유합니다.

애플릿에서 원형 카운트다운을 사용하여 효과 그림을 만듭니다.

Idea

1. 2개의 캔버스를 사용합니다. 하나는 배경 링이고 다른 하나는 컬러 링입니다.

2. setInterval을 사용하여 색칠된 원을 단계별로 그립니다.

해결책

첫 번째 단계는 구조를 작성하는 것입니다.

상자는 2개의 캔버스와 텍스트 상자를 감쌉니다.
상자는 상대 위치 지정을 상위, 플렉스 레이아웃 및 중심으로 사용합니다. 배경, canvas-id="canvasProgressbg"
상대 위치 지정을 진행률 표시줄로 사용하는 또 다른 캔버스, canvas-id="canvasProgress"
코드는 다음과 같습니다.

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

데이터 바인딩의 두 번째 단계

가능한 대로 wxml에서 볼 수 있듯이 A 데이터 Progress_txt를 사용하므로 js에서 데이터를 다음과 같이 설정합니다.

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

캔버스 그리기의 세 번째 단계

敲黑板，划重点

1 먼저 배경을 그립니다.

1. js에서 drawProgressbg 함수를 캡슐화합니다. 원을 그리면 캔버스가 원을 그립니다

2. onReady에서 이 함수를 실행하세요

애플릿의 캔버스 구성 요소는 H5의 캔버스와 약간 다릅니다. 문서를 확인하세요. 코드는 다음과 같습니다

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

다음과 같이 효과를 살펴보세요.

2. 색상 그리기 Circle

1. 은 js에서 원을 그리는 drawCircle 함수를 캡슐화하고,

2. 는 onReady에서 이 함수를 실행합니다. 에

this.drawCircle(0.5) 효과는 다음과 같습니다. this drawCircle(1)의 효과는 다음과 같습니다. 3. 타이머 설정

this.drawCircle(2) 효과는 다음과 같습니다.

js의 데이터에 카운터 카운트, 단계 및 타이머 설정

1. 타이머 함수 countInterval을 생성합니다. js에서는

2. onReady에서 이 함수를 실행합니다.

3.   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) 
     },

   최종 효과

관련 권장 사항:

캔버스에서 원형 진행률 표시줄 애니메이션을 구현하는 방법의 예

소개 WeChat 애플릿에서 순환 진행률 표시줄을 구현하는 방법

순환 진행률 표시줄에 대한 기본 입문 튜토리얼 추천

위 내용은 WeChat 애플릿은 순환 진행률 표시줄 예시 공유를 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!