Detailed explanation and source code sharing of WeChat applet Canvas enhanced component examples-JS Tutorial-php.cn

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

高洛峰

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

Original

1268 people have browsed it

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.

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

Using

WXML:

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

Copy after login

JS:

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

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

Copy after login

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

Copy after login

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

Copy after login

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: &#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();

Copy after login

Easy to Expand

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

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

Copy after login

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!