WeZRender 微信小程式Canvas增強元件

2021-08-02 12:29:38 字數 958 閱讀 8098

canvas增強元件,基於html5 canvas類庫zrender。

wxml:

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

style: 

});

豐富的圖形選項

內建多種圖形元素(圓形、橢圓、圓環、扇形、矩形、多邊形、直線、曲線、心形、水滴、玫瑰線、trochoid、文字、等),統一且豐富的圖形屬性充分滿足個性化需求。

var droplet = new wezrender.graphic.shape.droplet(,

style: 

});

強大的動畫支援:提供promise式的動畫介面和常用緩動函式,輕鬆實現各種動畫需求。

var image = new wezrender.graphic.image(

});zr.add(image);

image.animatestyle(true)

.when(2000, )

.start();

易於擴充套件:分而治之的圖形定義策略允許擴充套件圖形元素。

var pin = wezrender.graphic.path.extend(,

buildpath: function (path, shape) 

});

本專案依據mit開源協議發布,允許任何組織和個人免費使用。

(微信小程式)一 初識微信小程式

需要看的 先是檔案目錄 一 pages 他存放於多個頁面 如 index log頁面。可以把他裡面的每個資料夾看成乙個整體。這個整體存放著 html css 和 資料 1 index資料夾 存放的index頁面的目錄。2 index.js 他可以處理得到 ajax 或自定義定義的資料。把得到的值封裝...

微信小程式

2.單獨設定某一頁面下的頂部欄的背景顏色,在其對應的.json檔案下修改即可 3.this.setdata 注意 onload函式下面執行的是非同步操作,非同步操作裡面this.data.直接賦值,是無效的,必須使用this.setdata this.setdata msg he llo wor l...

微信小程式

你好!這是你第一次使用markdown編輯器所展示的歡迎頁。如果你想學習如何使用markdown編輯器,可以仔細閱讀這篇文章,了解一下markdown的基本語法知識。全新的介面設計,將會帶來全新的寫作體驗 在創作中心設定你喜愛的 高亮樣式,markdown將 片顯示選擇的高亮樣式進行展示 全新的ka...