WeZRender是一个微信小程序Canvas增强组件,基于HTML5 Canvas类库ZRender。

使用

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

特性

数据驱动

利用WeZRender绘图,只需定义图形数据。

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

丰富的图形选项

内置多种图形元素(圆形、椭圆、圆环、扇形、矩形、多边形、直线、曲线、心形、水滴、玫瑰线、Trochoid、文字、图片等),统一且丰富的图形属性充分满足个性化需求。

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

强大的动画支持

提供promise式的动画接口和常用缓动函数,轻松实现各种动画需求。

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

易于扩展

分而治之的图形定义策略允许扩展图形元素。

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

开源协议

本项目依据MIT开源协议发布,允许任何组织和个人免费使用。

项目地址

来源

来源地址

原创:WeZRender:微信小程序Canvas增强组件的更多相关文章

  1. 原创:微信小程序之MaterialDesign--input组件

    作者:jeffer 来自:原文地址 主要通过input输入事件配合css的transform动态改变实现这种效果. 实际调试过程中,input组件bindinput事件触发后回调的detail对象,在 ...

  2. 微信小程序--canvas画布实现图片的编辑

    技术:微信小程序   概述 上传图片,编辑图片大小,添加文字,改变文字颜色等 详细 代码下载:http://www.demodashi.com/demo/14789.html 概述 微信小程序--ca ...

  3. 微信小程序之swiper组件高度自适应

    微信小程序之swiper组件高度自适应 要求: (顶部广告栏 ) 改变swiper组件的固定高度,使之随内部每张图片的高度做自适应 原理: 图片加载完之后,获取图片的原始宽高,根据宽高比,计算出适应后 ...

  4. 微信小程序中的组件使用1

    不管是vue还是react中,都在强调组件思想,同样,在微信小程序中也是使用组件思想来实现页面复用的,下面就简单介绍一下微信小程序中的组件思想. 组件定义与使用 要使用组件,首先需要有组件页面和使用组 ...

  5. 微信小程序-canvas绘制文字实现自动换行

    在使用微信小程序canvas绘制文字时,时常会遇到这样的问题:因为canvasContext.fillText参数为 我们只能设置文本的最大宽度,这就产生一定的了问题.如果我们绘制的文本长度不确定或者 ...

  6. 微信小程序 canvas 字体自动换行(支持换行符)

    微信小程序 canvas 自动适配 自动换行,保存图片分享到朋友圈  https://github.com/richard1015/News 微信IDE演示代码https://developers.w ...

  7. 微信小程序基于swiper组件的tab切换

    代码地址如下:http://www.demodashi.com/demo/14010.html 一.前期准备工作 软件环境:微信开发者工具 官方下载地址:https://mp.weixin.qq.co ...

  8. 微信小程序canvas生成并保存图片

    ---恢复内容开始--- 微信小程序canvas生成并保存图片,具体实现效果如下图     实现效果需要做以下几步工作 一.先获取用户屏幕大小,然后才能根据屏幕大小来定义canvas的大小 二.获取图 ...

  9. uni-app开发微信小程序引入UI组件库(Vant-weapp)步骤

    uni-app开发微信小程序引入UI组件库(Vant-weapp)步骤 这里以vant-weapp为例 uni-app官方文档介绍引入组件的方法 1. 新建相关目录 根目录下创建 wxcomponen ...

随机推荐

  1. Android通用流行框架大全

    1. 缓存 名称 描述 DiskLruCache Java实现基于LRU的磁盘缓存 2.图片加载 名称 描述 Android Universal Image Loader 一个强大的加载,缓存,展示图 ...

  2. Eclipse 安装 Maven 插件(图文解说)

    Help  --> 选择Eclipse Marketplace -->  在 Find 中输入 Maven integration for Eclipse  --> 回车搜索

  3. pythonchallenge 解谜 Level 1

    得到第一关地址后可以进行第一关的解析了. 看起来好神秘的样子.但是也就是把字母 k 变成 m , o 变成 q ,e 变成 g.将字母对应的ASCII的值+2就行了. #-*- coding:utf- ...

  4. bootstarp3 支持ie8

    http://blog.csdn.net/hyb3280660/article/details/51850832 想要bootstarp3 支持ie8? 引入 <!-- 存放全局css/js - ...

  5. Dexpress 中 grid的使用

    grid 中加入checkbox Run desiger Columns ColumnEdit中选择checkbox 此时我们要在后台手动指定一个数据列如下代码: dtRebatesReport.Co ...

  6. 浏览器全屏事件(Html5)

    <button onclick="launchFullscreen(document.documentElement);"></button> functi ...

  7. (转载)开始iOS 7中自动布局教程(一)

    这篇教程的前半部分被翻译出来很久了,我也是通过这个教程学会的IOS自动布局.但是后半部分(即本篇)一直未有翻译,正好最近跳坑翻译,就寻来这篇教程,进行翻译.前半部分已经转载至本博客,后半部分即本篇.学 ...

  8. vector删除元素浅析

    <<effectSTL>>书中提到erase-remove方法  即c.rease(remove(c.begin(),c.end(),1963),c.end()) 关于remo ...

  9. Linux新手扫盲(转载)

    一. Linux特点 1.免费/开源: 2.支持多线程/多用户: 3.安全性好: 4.对内存和文件管理优越. Linux最小只需4M ——> 嵌入式开发 二. 文件目录 Linux系统所有软硬件 ...

  10. Scala 笔记

    环境 1. Intellij Idea 2. Scala 插件 3. http://scala-lang.org/ 教程: idea官方教程: https://www.jetbrains.com/he ...