脚本之家

原创:WeZRender:微信小程序Canvas增强组件

上一篇
原创:经验分享:微信小程序外包接单常见问题及流程
下一篇
原创:去繁存简,回归本源:微信小程序公开课信息分析《一》

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,

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,y

);

path.bezierCurveTo(

x,

x - dx + tanX * cpLen,

x - dx,cy + dy

);

path.closePath();

}

});

开源协议

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

项目地址

https://github.com/guyoung/WeZRender

来源

来源地址

以上就是原创:WeZRender:微信小程序Canvas增强组件的全部内容,希望这篇技术文档对大家的学习有所帮助,转发给身边的程序猿朋友,感谢各位大大支持:脚本之家 jb51.cc

原创:WeZRender:微信小程序Canvas增强组件 由脚本之家 jb51.cc 收集整理
本文版权归原作者所有,转载请注明出处并带上本文链接!

上一篇
原创:经验分享:微信小程序外包接单常见问题及流程
下一篇
原创:去繁存简,回归本源:微信小程序公开课信息分析《一》

您可能感兴趣的小程序开发教程

小程序开发

微信小程序中将多个view居中显示的方法

我们在这里要实现的效果是这样的,在小程序中将多个view居中显示 先看一下效果图如下图效果所示:我们需要将“延长收货”,”查看物流”,“提醒发货”,“提醒发货”是四个按钮放在页面最中间,并且间隔适当的

小程序开发

微信小程序如何居中布局?

前段时间小程序上线后就弃坑了,回到网页开发去了,最近又有新项目,再次入坑,难免需要一些demo来重新熟悉,在这个过程中,发现demo中很少有人使用flex布局,今天给大伙稍微讲一下这个布局。 

小程序开发

防止小程序多次点击跳转解决方案

场景在使用小程序的时候会出现这样一种情况:当网络条件差或卡顿的情况下,使用者会认为点击无效而进行多次点击,最后出现多次跳转页面的情况,就像下图(快速点击了两次):解决办法然后从轻松理解JS函数节流和函..

小程序开发

微信小程序-事件

微信小程序的"事件"挺有意思。看了说明文档后发现它的功能很全,事件可以向父节点传递,而且打印这个事件的信息很透明,调试起来应该非常方便。接下来把文档copy过来,原文地址:https://mp.weixin.qq.com