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

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.

Verwenden Sie

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

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

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

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: '../../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();

Einfach zu erweitern

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

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

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!