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. spark 你要喧宾夺主么?好好干。

    嗯嗯,hadoop EcoSystem.

  2. xcode8控制台输出很多日志

    解决方法:command + shift + <,在环境变量里添加图中字段就行了.

  3. 判断是否为mac电脑 、还是windows操作系统

    /** * 是否为mac系统(包含iphone手机) * */ var isMac = function() { return /macintosh|mac os x/i.test(navigator ...

  4. Git分布式版本控制系统学习笔记

    Git是一个开源的分布式版本控制系统,用以有效.高速的处理从很小到非常大的项目版本管理.[4]  Git 是 Linus Torvalds 为了帮助管理 Linux 内核开发而开发的一个开放源码的版本 ...

  5. android输入限制

    title: 2016-5-30 Android输入验证 tags: EditText,输入验证 --- 前言2 使用EditText让用户输入文字时,需要对输入验证.除过验证是否有效的逻辑不同,Ed ...

  6. .NET Core中遇到奇怪的线程死锁问题:内存与线程数不停地增长

    一个 asp.net core 站点,之前运行在Linux 服务器上,运行一段时间后有时站点会挂掉,在日志中记录很多“EMFILE too many open files”的错误: Microsoft ...

  7. ABP理论学习之日志记录

    返回总目录 本篇目录 服务端 获取Logger 基类中的Logger 配置 客户端 服务端 ABP使用的是Castle Windsor的日志记录设备.它可以和不同的日志类库一起工作,比如Log4Net ...

  8. ABP理论学习之SignalR集成

    返回总目录 本篇目录 介绍 安装 建立连接 内置功能 你自己的SignaR代码 介绍 Abp.Web.SignalR 使得在基于ABP的应用程序中使用 SignalR相当容易.查看SignalR文档获 ...

  9. 干货!表达式树解析"框架"(1)

    最新设计请移步 轻量级表达式树解析框架Faller http://www.cnblogs.com/blqw/p/Faller.html 关于我和表达式树 其实我也没有深入了解表达式树一些内在实现的原理 ...

  10. C语言 · 回文数 · 基础练习

    问题描述 1221是一个非常特殊的数,它从左边读和从右边读是一样的,编程求所有这样的四位十进制数. 输出格式 按从小到大的顺序输出满足条件的四位十进制数.   代码如下: 注意:这里要提醒一下读者:蓝 ...