Detailed explanation and source code sharing of WeChat applet Canvas enhanced component examples

This article mainly introduces the detailed explanation of the WeChat mini program Canvas enhanced component examples and source code sharing related information. WeZRender is a WeChat mini program Canvas enhanced component. Here is a detailed introduction. Friends who need it can refer to it

WeZRender is a WeChat applet Canvas enhancement component based on the HTML5 Canvas class library ZRender.

Using

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

Features

Data-driven

Using WeZRender to draw, you only need to define the graphics data.

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

Rich graphic options

Built-in a variety of graphic elements (circle, ellipse, ring, sector, rectangle, polygon, straight line, curve, heart shape, Water drops, rose lines, Trochoid, text, pictures, etc.), unified and rich graphic attributes fully meet personalized needs.

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

Powerful animation support

Provides a promise-style animation interface and common easing functions to easily realize various animation needs.

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

Easy to Expand

The divide and conquer graph definition strategy allows for extending graph elements.

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

Thank you for reading, I hope it can help everyone, thank you for your support of this site!

For more detailed explanations of WeChat applet Canvas enhanced component examples and source code sharing related articles, please pay attention to the PHP Chinese website!