Le mini widget du programme WeChat implémente la diffusion en direct comme un effet de bulle basé sur Canvas

Cet article présente principalement en détail le mini-widget du programme WeChat et implémente la diffusion en direct comme un effet de bulle basé sur Canvas. Il a une certaine valeur de référence. Les amis intéressés peuvent s'y référer

Premier article sur les implémentations de Canvas. diffusion en direct comme diagramme d'effet de bulle :

Détails de mise en œuvre :

1.JS :

drawImage:function(data){[/align]
    var that = this
    var p10= data[0][0];  /* 三阶贝塞尔曲线起点坐标值*/
    var p11= data[0][1];  /* 三阶贝塞尔曲线第一个控制点坐标值*/
    var p12= data[0][2];  /* 三阶贝塞尔曲线第二个控制点坐标值*/
    var p13= data[0][3];  /* 三阶贝塞尔曲线终点坐标值*/
    var p20= data[1][0];
    var p21= data[1][1];
    var p22= data[1][2];
    var p23= data[1][3];
    var p30= data[2][0];
    var p31= data[2][1];
    var p32= data[2][2];
    var p33= data[2][3];
    var t = factor.t;
    /*计算多项式系数 （下同）*/  
    var cx1 = 3*(p11.x-p10.x);
    var bx1 = 3*(p12.x-p11.x)-cx1;
    var ax1 = p13.x-p10.x-cx1-bx1;
    var cy1 = 3*(p11.y-p10.y);
    var by1 = 3*(p12.y-p11.y)-cy1;
    var ay1 = p13.y-p10.y-cy1-by1;
    var xt1 = ax1*(t*t*t)+bx1*(t*t)+cx1*t+p10.x;
    var yt1 = ay1*(t*t*t)+by1*(t*t)+cy1*t+p10.y;
    var cx2 = 3*(p21.x-p20.x);
    var bx2 = 3*(p22.x-p21.x)-cx2;
    var ax2 = p23.x-p20.x-cx2-bx2;
    var cy2 = 3*(p21.y-p20.y);
    var by2 = 3*(p22.y-p21.y)-cy2;
    var ay2 = p23.y-p20.y-cy2-by2;
    var xt2 = ax2*(t*t*t)+bx2*(t*t)+cx2*t+p20.x;
    var yt2 = ay2*(t*t*t)+by2*(t*t)+cy2*t+p20.y;
    var cx3 = 3*(p31.x-p30.x);
    var bx3 = 3*(p32.x-p31.x)-cx3;
    var ax3 = p33.x-p30.x-cx3-bx3;
    var cy3 = 3*(p31.y-p30.y);
    var by3 = 3*(p32.y-p31.y)-cy3;
    var ay3 = p33.y-p30.y-cy3-by3;
    /*计算xt yt的值 */
    var xt3 = ax3*(t*t*t)+bx3*(t*t)+cx3*t+p30.x;
    var yt3 = ay3*(t*t*t)+by3*(t*t)+cy3*t+p30.y;
    factor.t +=factor.speed;
    ctx.drawImage("../../images/heart1.png",xt1,yt1,30,30);
    ctx.drawImage("../../images/heart2.png",xt2,yt2,30,30);
    ctx.drawImage("../../images/heart3.png",xt3,yt3,30,30);
    ctx.draw();
    if(factor.t>1){
      factor.t=0;
      cancelAnimationFrame(timer);
      that.startTimer();
    }else{
      timer =requestAnimationFrame(function(){
        that.drawImage([[{x:30,y:400},{x:70,y:300},{x:-50,y:150},{x:30,y:0}],[{x:30,y:400},{x:30,y:300},{x:80,y:150},{x:30,y:0}],[{x:30,y:400},{x:0,y:90},{x:80,y:100},{x:30,y:0}]])
     })
    }}

Principe :

a. En dessinant trois courbes de Bézier de troisième ordre différentes, sélectionnez trois images et laissez-les se déplacer le long de leurs courbes de Bézier respectives :

b. Calculez l'expression mathématique de la courbe de Bézier du troisième ordre x(t), y(t).

La courbe de Bézier du troisième ordre forme une courbe passant par quatre points, deux points de contrôle, un point de départ et un point final.

En utilisant des coefficients polynomiaux, vous pouvez obtenir les expressions mathématiques de x(t), y(t) :

cx = 3 * ( x1 - x0 )
bx = 3 * ( x2 - x1 ) - cx
ax = x3 - x0 - cx - bx
cy = 3 * ( y1 - y0 )    
by = 3 * ( y2 - y1 ) - cy
ay = y3 - y0 - cy - by
x(t) = ax * t ^ 3 + bx * t ^ 2 + cx * t + x0
y(t) = ay * t ^ 3 + by * t ^ 2 + cy * t + y0

Trois courbes de Bézier sont dessinées ici, et la formule est appliqué trois fois Voilà, aucune boucle n'est utilisée ici. S'il y a beaucoup de courbes de Bézier, vous pouvez utiliser une boucle pour appeler ctx.drawImage, où factor.t est le paramètre de la courbe de Bézier de troisième ordre et la plage de valeurs est [0,1] Enfin, appelez ctx.draw() et réglez la minuterie pour réaliser l'image se déplaçant le long de la courbe de Bézier.

3.Astuce :

Le minuteur utilisé ici est implémenté via la fonction requestAnimationFrame(). La raison de la dépréciation de setInterval est qu'il existe un phénomène de blocage de trame dans le test réel et. l'affichage de l'animation présente des discontinuités subtiles.

Pour plus de widgets d'applet WeChat permettant d'implémenter la diffusion en direct comme des effets de bulles basés sur Canvas, veuillez faire attention au site Web PHP chinois pour les articles connexes !