Explication détaillée et partage du code source des exemples de composants améliorés de l'applet WeChat Canvas

Cet article présente principalement l'explication détaillée des exemples de composants améliorés du mini-programme WeChat Canvas et des informations relatives au partage de code source. WeZRender est un composant amélioré du mini-programme WeChat Canvas. Voici une introduction détaillée.

WeZRender est un composant d'amélioration Canvas de l'applet WeChat basé sur la bibliothèque de classes HTML5 Canvas ZRender.

Utiliser

WXML :

<canvas style="width: 375px; height: 600px;" canvas-id="line-canvas-1">canvas>

JS :

var wezrender = require('../../lib/wezrender');

 zr = wezrender.zrender.init("line-canvas-1", 375, 600);

Fonctionnalités

Basées sur les données

En utilisant WeZRender pour le dessin, il vous suffit de définir les données graphiques.

var circle = new wezrender.graphic.shape.Circle(
   shape: {
     cx: 50,
     cy: 50,
     r: 50
   },
   style: {
     fill: 'red',
     lineWidth: 10
   }
 });

Options graphiques riches

Une variété d'éléments graphiques intégrés (cercle, ellipse, anneau, secteur, rectangle, polygone, ligne, courbe, cœur forme, goutte d'eau, trait de rose, trochoïde, texte, image, etc.), les attributs graphiques unifiés et riches répondent pleinement aux besoins personnalisés.

var droplet = new wezrender.graphic.shape.Droplet({
   shape: {
     cx: 200,
     cy: 300,
     width: 50,
     height: 50
   },
   style: {
       fill: '#ff9999'
   }
 });

Support d'animation puissant

Fournit une interface d'animation de style promesse et des fonctions d'assouplissement communes pour réaliser facilement divers besoins d'animation.

var image = new wezrender.graphic.Image({
    style: {
      x: 0,
      y: 0,
      image: '../../images/koala.jpg',
      width: 32,
      height: 24,
      text: 'koala'
    }
  });
  zr.add(image);

  image.animateStyle(true)
    .when(2000, {
      x: 350,
      y: 450,
      width: 360,
      height: 270,
    })
    .start();

Facile à étendre

La stratégie de définition de graphique diviser pour mieux régner permet d'étendre les éléments du graphique.

var Pin = wezrender.graphic.Path.extend({
    type: 'pin',
    shape: {
      // x, y on the cusp
      x: 0,
      y: 0,
      width: 0,
      height: 0
    },
    buildPath: function (path, shape) {
      var x = shape.x;
      var y = shape.y;
      var w = shape.width / 5 * 3;
      // Height must be larger than width
      var h = Math.max(w, shape.height);
      var r = w / 2;

      // Dist on y with tangent point and circle center
      var dy = r * r / (h - r);
      var cy = y - h + r + dy;
      var angle = Math.asin(dy / r);
      // Dist on x with tangent point and circle center
      var dx = Math.cos(angle) * r;

      var tanX = Math.sin(angle);
      var tanY = Math.cos(angle);

      path.arc(
        x, cy, r,
        Math.PI - angle,
        Math.PI * 2 + angle
      );

      var cpLen = r * 0.6;
      var cpLen2 = r * 0.7;
      path.bezierCurveTo(
        x + dx - tanX * cpLen, cy + dy + tanY * cpLen,
        x, y - cpLen2,
        x, y
      );
      path.bezierCurveTo(
        x, y - cpLen2,
        x - dx + tanX * cpLen, cy + dy + tanY * cpLen,
        x - dx, cy + dy
      );
      path.closePath();
    }
  });

Merci d'avoir lu, j'espère que cela pourra vous aider, merci pour votre soutien à ce site !

Pour des explications plus détaillées sur les exemples de composants améliorés de l'applet WeChat Canvas et les articles liés au partage de code source, veuillez faire attention au site Web PHP chinois !