Explication détaillée et partage du code source des exemples de composants améliorés de l'applet WeChat Canvas-js tutoriel-php.cn

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

高洛峰

Libérer： 2017-02-08 14:49:04

original

1268 Les gens l'ont consulté

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.

微信小程序 Canvas增强组件实例详解及源码分享

Utiliser

WXML :

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

Copier après la connexion

JS :

 var wezrender = require(&#39;../../lib/wezrender&#39;);

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

Copier après la connexion

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: &#39;red&#39;,
      lineWidth: 10
    }
  });

Copier après la connexion

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: &#39;#ff9999&#39;
    }
  });

Copier après la connexion

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: &#39;../../images/koala.jpg&#39;,
      width: 32,
      height: 24,
      text: &#39;koala&#39;
    }
  });
  zr.add(image);

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

Copier après la connexion

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: &#39;pin&#39;,
    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();
    }
  });

Copier après la connexion

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 !