Detaillierte Erläuterung und Quellcode-Freigabe von Beispielen für erweiterte WeChat-Applet-Canvas-Komponenten-js-Tutorial-php.cn

Detaillierte Erläuterung und Quellcode-Freigabe von Beispielen für erweiterte WeChat-Applet-Canvas-Komponenten

高洛峰

Freigeben： 2017-02-08 14:49:04

Original

1231 Leute haben es durchsucht

In diesem Artikel werden hauptsächlich Beispiele für die erweiterte Komponente des WeChat-Miniprogramms und Informationen zum Teilen des Quellcodes vorgestellt. Freunde, die es benötigen, können sich darauf beziehen

WeZRender ist eine WeChat-Applet-Canvas-Erweiterungskomponente, die auf der HTML5-Canvas-Klassenbibliothek ZRender basiert.

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

Verwenden Sie

WXML:

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

Nach dem Login kopieren

JS:

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

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

Nach dem Login kopieren

Funktionen

Datengesteuert

Wenn Sie WeZRender zum Zeichnen verwenden, müssen Sie nur die Grafikdaten definieren.

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

Nach dem Login kopieren

Umfassende Grafikoptionen

Eingebaute Vielzahl grafischer Elemente (Kreis, Ellipse, Ring, Sektor, Rechteck, Polygon, Linie, Kurve, Herz). Form, Wassertropfen, Rosenlinie, Trochoide, Text, Bild usw.), die einheitlichen und reichhaltigen Grafikattribute erfüllen vollständig personalisierte Bedürfnisse.

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

Nach dem Login kopieren

Leistungsstarke Animationsunterstützung

Bietet eine Animationsoberfläche im Promise-Stil und allgemeine Beschleunigungsfunktionen, um verschiedene Animationsanforderungen einfach zu realisieren.

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

Nach dem Login kopieren

Einfach zu erweitern

Die Divide-and-Conquer-Graphdefinitionsstrategie ermöglicht das Erweitern von Graphelementen.

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

Nach dem Login kopieren

Vielen Dank fürs Lesen, ich hoffe, es kann Ihnen helfen, vielen Dank für Ihre Unterstützung dieser Website!

Ausführlichere Erläuterungen zu Beispielen für erweiterte WeChat-Applet-Canvas-Komponenten und Artikel zum Thema Quellcode-Freigabe finden Sie auf der chinesischen PHP-Website!