위 챗 애플 릿 의 원형 진도 조 실현 사고

수요 개요
애플 릿 에서 원형 카운트다운 사용,효과 그림:

사고의 방향
4

2 개 를 사용 합 니 다canvas하 나 는 배경 링 이 고 하 나 는 컬러 링 입 니 다

4.567917.4.567915 를 사용 하여 컬러 링 을 점차적으로 그립 니 다해결 방안
첫 번 째 단 계 는 먼저 구 조 를 쓴다.
한 상자 에 canvas 2 개 와 문자 상자 감 싸 기;
상 자 는 상대 적 으로 부모 급,flex 레이아웃 을 사용 하여 가운데 설정 합 니 다.
하나의 canvas,절대 포 지 셔 닝 을 배경 으로 합 니 다canvas-id="canvasProgressbg"
또 다른 canvas 는 상대 적 인 포 지 셔 닝 을 진도 항목 으로 사용 합 니 다canvas-id="canvasProgress"
코드 는 다음 과 같 습 니 다:

// wxml
 <view class="container">
 <view class='progress_box'>
 <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='progress_info'> {{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 를 다음 과 같이 설정 합 니 다.

 data: {
 progress_txt: '     ...', 
 },

세 번 째 canvas 그리 기
칠판 을 두 드 리 고 요점 을 긋다.
1.배경 그리 기

js 에 원 환 을 그 리 는 함수 draw Progressbg,canvas 그림 원

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

H5 의 canvas 와 차이 가 있 습 니 다.문 서 를 보십시오.코드 는 다음 과 같 습 니 다.

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.컬러 링 그리 기

js 에 원 환 을 그 리 는 함수 drawCircle,

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

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

3.타이머 설정
js 의 data 에 계수기 count,단계 step,타이머 설정
js 에 타이머 함수 countInterval 을 패키지 합 니 다.
onReady 에서 이 함 수 를 실행 합 니 다.

data: {
 progress_txt: '     ...', 
 count:0, //           0
 countTimer: null //           null
 },
 countInterval: function () {
 //            100      ，   count+1 ,  6    
 this.countTimer = setInterval(() => {
 if (this.data.count <= 60) {
 /*           
         step      0 2，
            60    2    ，   count=60   step=2
 */
  this.drawCircle(this.data.count / (60/2))
 this.data.count++;
 } else {
 this.setData({
  progress_txt: "    "
 }); 
 clearInterval(this.countTimer);
 }
 }, 100)
 },
 onReady: function () {
 this.drawProgressbg();
 // this.drawCircle(2) 
 this.countInterval()
 },

최종 효과

총결산
위 에서 말 한 것 은 편집장 이 여러분 에 게 소개 한 위 챗 애플 릿 의 원형 진도 조 가 생각 을 실현 하 는 것 입 니 다.여러분 에 게 도움 이 되 기 를 바 랍 니 다.만약 에 궁금 한 점 이 있 으 면 저 에 게 메 시 지 를 남 겨 주세요.편집장 은 신속하게 여러분 에 게 답 할 것 입 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!