【開源】微信小程式、小遊戲以及 Web 通用 Canvas 渲染引擎
Cax
小程式、小遊戲以及 Web 通用 Canvas 渲染引擎
特性
- Learn Once, Write Anywhere(小程式、小遊戲、PC Web、Mobile Web)
- 支援小程式、小遊戲以及 Web 瀏覽器渲染
- 小程式、小遊戲和 Web 擁有相同簡潔輕巧的 API
- 高效能的渲染架構
- 超輕量級的程式碼體積
- 鬆耦合的渲染架構
- 支援 Canvas 元素管理
- 支援 Canvas 元素事件體系
- 圖靈完畢的 group 巢狀體系
- 內建 tween 運動能力
- 內建文字、點陣圖、序列幀、繪圖物件和多種向量繪製物件
一分鐘入門小程式 cax 使用
到 GitHub 下載 cax 自定義元件
└── cax
├── cax.js
├── cax.json
├── cax.wxml
├── cax.wxss
└── index.js
在 page 或者 component 裡宣告依賴:
{
"usingComponents": {
"cax":"../cax/cax"
}
}
在的 wxml 裡引入 cax 標籤:
<cax id="myCanvas"></cax>
在 js 裡渲染邏輯:
import cax from '../cax/index' Page({ onLoad: function () { //比 web 裡使用 cax 多傳遞 this,this 代表 Page 或 Component 的例項 const stage = new cax.Stage(200, 200, 'myCanvas', this) const rect = new cax.Rect(100, 100, { fillStyle: 'black' }) rect.originX = 50 rect.originY = 50 rect.x = 100 rect.y = 100 rect.rotation = 30 rect.on('tap', () => { console.log('tap') }) stage.add(rect) stage.update() } })
效果如下所示:
除了 tap 事件,也可以幫 rect 繫結其他觸控事件:
rect.on('touchstart', () => {
console.log('touchstart')
})
rect.on('touchmove', () => {
console.log('touchmove')
})
rect.on('touchend', () => {
console.log('touchend')
})
一分鐘入門小遊戲 cax 使用
到 GitHub 下載 cax 小遊戲示例,目錄結構和執行效果如下:
const stage = new cax.Stage()
和小程式以及 Web 不同的是,小遊戲建立 Stage 不需要傳任何引數。
一分鐘入門 Web cax 使用
通過 npm 或者 CDN 獲取:
npm i cax
import cax from 'cax'
const stage = new cax.Stage(200, 200, '#renderTo')
const rect = new cax.Rect(100, 100, {
fillStyle: 'black'
})
stage.add(rect)
stage.update()
除了 Stage 建構函式比小程式第四個引數 this
,其他使用方式都一樣。
內建物件
Group
用於分組, group 也可以巢狀 group,父容器的屬性會疊加在子屬性上, 比如:
- group 的 x 是 100, group 裡的 bitmap 的 x 是 200, 最後 bitmap 渲染到 stage 上的 x 是 300
- group 的 alpha 是 0.7, group 裡的 bitmap 的 alpha 是 0.6, 最後 bitmap 渲染到 stage 上的 alpha 是 0.42
const group = new cax.Group()
const rect = new cax.Rect(100, 100 {
fillStyle: 'black'
})
group.add(rect)
stage.add(group)
stage.update()
group 擁有常用的 add 和 remove 方法進行元素的增加和刪除。先 add 的會先繪製,所有後 add 的會蓋在先 add 的上面。
Bitmap
const bitmap = new cax.Bitmap(img)
stage.add(bitmap)
stage.update()
如果只傳 url 而不是 Image 物件的例項,需要這樣:
const bitmap = new cax.Bitmap('./wepay.png', ()=>{
stage.update()
})
stage.add(bitmap)
這裡需要注意小程式需要配置 downloadFile 需要配置合法域名才能正常載入到圖片。
可以設定圖片裁剪顯示區域,和其他 transform 屬性:
bitmap.rect = [0, 0, 170, 140]
bitmap.x = 200
Sprite
序列幀動畫元件,可以把任意圖片的任意區域組合成一串動畫。
const sprite = new cax.Sprite({
framerate: 7,
imgs: ['./mario-sheet.png'],
frames: [
// x, y, width, height, originX, originY ,imageIndex
[0, 0, 32, 32],
[32 * 1, 0, 32, 32],
[32 * 2, 0, 32, 32],
[32 * 3, 0, 32, 32],
[32 * 4, 0, 32, 32],
[32 * 5, 0, 32, 32],
[32 * 6, 0, 32, 32],
[32 * 7, 0, 32, 32],
[32 * 8, 0, 32, 32],
[32 * 9, 0, 32, 32],
[32 * 10, 0, 32, 32],
[32 * 11, 0, 32, 32],
[32 * 12, 0, 32, 32],
[32 * 13, 0, 32, 32],
[32 * 14, 0, 32, 32]
],
animations: {
walk: {
frames: [0, 1]
},
happy: {
frames: [5, 6, 7, 8, 9]
},
win: {
frames: [12]
}
},
playOnce: false,
currentAnimation: "walk",
animationEnd: function () {
}
});
Text
文字物件
const text = new cax.Text('Hello World', {
font: '20px Arial',
color: '#ff7700',
baseline: 'top'
})
Graphics
繪圖物件,用於使用基本的連綴方式的 Canvas 指令繪製圖形。
const graphics = new cax.Graphics()
graphics
.beginPath()
.arc(0, 0, 10, 0, Math.PI * 2)
.closePath()
.fillStyle('#f4862c')
.fill()
.strokeStyle('black')
.stroke()
graphics.x = 100
graphics.y = 200
stage.add(graphics)
Shape
與 Graphics 不同的是, Shape 一般擁有有限的寬高,所以可以使用離屏 Canvas 進行快取。下面這些屬於 Shape。
Rect
const rect = new cax.Rect(200, 100, {
fillStyle: 'black'
})
Circel
const circel = new cax.Circel(10)
Ellipse
const ellipse = new cax.Ellipse(10)
注意:從技術上小遊戲和 Web 可以離屏 Canvas,小程式不行,因為小程式不支援動態建立離屏 Canvas。
Element
Element 是多種元素的組合,如 Bitmap、Group、 Text、 Shape 等混合起來的影象。
Button
const button = new cax.Button({
width: 100,
height: 40,
text: "Click Me!"
})
屬性
Transform
屬性名 | 描述 |
---|---|
x | 水平偏移 |
y | 豎直偏移 |
scaleX | 水平縮放 |
scaleY | 豎直縮放 |
rotation | 旋轉 |
skewX | 歪斜 X |
skewY | 歪斜 Y |
originX | 旋轉基點 X |
originY | 旋轉基點 Y |
Alpha
屬性名 | 描述 |
---|---|
alpha | 元素的透明度 |
注意這裡父子都設定了 alpha 會進行乘法疊加。
compositeOperation
屬性名 | 描述 |
---|---|
compositeOperation | 源影象繪製到目標影象上的疊加模式 |
注意這裡如果自身沒有定義 compositeOperation 會進行向上查詢,找到最近的定義了 compositeOperation 的父容器作為自己的 compositeOperation。
Cursor
屬性名 | 描述 |
---|---|
cursor | 滑鼠移上去的形狀 |
事件
小程式事件
事件名 | 描述 |
---|---|
tap | 手指觸控後馬上離開 |
touchstart | 手指觸控動作開始 |
touchmove | 手指觸控後移動 |
touchend | 手指觸控動作結束 |
drag | 拖拽 |
Web 事件
事件名 | 描述 |
---|---|
click | 元素上發生點選時觸發 |
mousedown | 當元素上按下滑鼠按鈕時觸發 |
mousemove | 當滑鼠指標移動到元素上時觸發 |
mouseup | 當在元素上釋放滑鼠按鈕時觸發 |
mouseover | 當滑鼠指標移動到元素上時觸發 |
mouseout | 當滑鼠指標移出元素時觸發 |
tap | 手指觸控後馬上離開 |
touchstart | 手指觸控動作開始 |
touchmove | 手指觸控後移動 |
touchend | 手指觸控動作結束 |
drag | 拖拽 |
自定義物件
自定義 Shape
自定義 Shape 繼承自 cax.Shape:
class Sector extends cax.Shape {
constructor (r, from, to, option) {
super()
this.option = option || {}
this.r = r
this.from = from
this.to = to
}
draw () {
this.beginPath()
.moveTo(0, 0)
.arc(0, 0, this.r, this.from, this.to)
.closePath()
.fillStyle(this.option.fillStyle)
.fill()
.strokeStyle(this.option.strokeStyle)
.lineWidth(this.option.lineWidth)
.stroke()
}
}
使用 Shape:
const sector = new Sector(10, 0, Math.PI/6, {
fillStyle: 'red'
lineWidth: 2
})
stage.add(sector)
stage.update()
自定義 Element
自定義 Element 繼承自 cax.Group:
class Button extends cax.Group {
constructor (option) {
super()
this.width = option.width
this.roundedRect = new cax.RoundedRect(option.width, option.height, option.r)
this.text = new cax.Text(option.text, {
font: option.font,
color: option.color
})
this.text.x = option.width / 2 - this.text.getWidth() / 2 * this.text.scaleX
this.text.y = option.height / 2 - 10 + 5 * this.text.scaleY
this.add(this.roundedRect, this.text)
}
}
export default Button
使用:
const button = new cax.Button({
width: 100,
height: 40,
text: "Click Me!"
})
一般情況下,稍微複雜組合體都建議使用繼承自 Group,這樣利於擴充套件也方便管理自身內部的元件。
可以看到小遊戲的 DEMO 裡的 Player、Bullet、Enemy、Background 全都是繼承自 Group。
License
MIT
相關推薦
【開源】微信小程式、小遊戲以及 Web 通用 Canvas 渲染引擎
Cax 小程式、小遊戲以及 Web 通用 Canvas 渲染引擎 特性 Learn Once, Write Anywhere(小程式、小遊戲、PC Web、Mobile Web) 支援小程式、小遊戲以及 Web 瀏覽器渲染 小程式、小遊戲和 Web 擁有相同簡潔輕巧的 API 高效能的渲染架構 超輕量
【轉】微信小程式模板訊息無限制群發
模版訊息推送是微信小程式採用的通知形式, 使用者本人在小程式頁面有互動行為後,可觸發下發通知 ,通過微信聊天列表中的服務通知可快捷進入檢視訊息。此外,點選檢視詳情還能跳轉到下發訊息的小程式的指定頁面。但是為了避免這種通知被濫用,帶來不好的使用者體驗,小程式也對模板訊息推送做了相應的限制。為了
【轉載】微信小程式-開發入門(一)
微信小程式已經火了一段時間了,之前一直也在關注,就這半年的發展來看,相對原生APP大部分公司還是不願意將主營業務放到微信平臺上,以免受制於騰訊,不過就小程式的應用場景(用完即走和二維碼分發等)還是很值得我們學習的,技術上面如果瞭解React的話,會發現他們在元件化上面有很多雷同之處。說白了,小程式就是基於微信
【 分類 】- 微信小程式
專欄達人 授予成功建立個人部落格專欄
【總結】微信小程式
最近小程式有個需求要做一個類似輪播的自定義樣式,搜了一下外掛們,一般都用到了jQuery,但是小程式又不支援操作DOM,所以直接自己捲起袖子幹吧。 如果有任何有問題的地方,歡迎各位看官指出,大家一起討論才能進步地更快XD 文章基本流程:
【筆記】微信小程式
本意是想在小程式使用者授權失敗時,可以在頁面中提供一個按鈕,讓使用者點選按鈕能夠進行再次授權。 附button文件 問題:在小程式中設定的按鈕,在設定了bindtap的情況下點選,都會自動跳轉到log/log介面。 經查錯發現,是因為在
【總結】微信小程式JAVA伺服器統一下單請求BODY欄位中文簽名錯誤總結
之前網上找了好久此問題都沒有解決,總結一下基本有一下幾種: 1.更改Tomcat配置 編碼改為UTF-8 2.String body = new String("body中文欄位值".toString().getBytes("ISO8859-1"),"UTF-8");更改欄位編碼 簽
【開源】小程式、小遊戲和Web運動引擎 to2to 釋出
簡單輕量跨平臺的 Javascript 運動引擎 to2to 中文念 '兔兔兔',作為 cax 內建的運動套件獨立出一個package ,因為它本身可以和平臺環境運動物件無關。既可運動 dom,也可運動 cax 內建物件,也可運動物件子面量。眾所周知,運動需要迴圈的 tick 去不斷執行偏移函式,小程式
【Node】微信小程式網路請求封裝
功能簡介 微信小程式網路請求封裝很簡單,因為我需要在每個網路請求裡面加入自己token、請求來源 等 ,以便於伺服器做驗證。 功能介紹 header :可以填寫每次請求需要新增的資訊到header Code判斷:根據後臺的請求code進行
【iOS】微信小程式開啟APP到底是怎麼回事?
前言 從蘋果官方來看,小程式新增了兩個功能: 1. 支援開啟移動應用 2. 標題欄區域開放自定義 針對第二個功能,就是開發者可以自定義小程式選單欄的顏色風格,根據需求,對小程式選單外的標題區域進行自定義,比如設定標題區域的顏色。這裡主要介紹一下支援開啟移動應用的功
【程式碼】微信小程式 簡單一個頁面,網上圖片展示
//wxss/* 基礎樣式 */ view,scroll-view,swiper,swiper-item,icon,text,progress,button,checkbox-group,checkbox,form,input,label,picker,radio-group
【Java】微信小程式imgSecCheck介面示例-校驗一張圖片是否含有違法違規內容
近期應該部分個人開發者小程式會收到如下通知 為了快速解決問題,就直接使用官方提供的介面 imgSecCheck校驗一張圖片是否含有違法違規內容 個人小程式只是圖片的一些處理識別。固只拿imgSecChec
【helloworld】-微信小程序開發教程-入門篇【3】
window 學習 視圖 小程序教程 href htm mtv 傳送門 lar 1. 開篇導言 本節目標:通過上一節的講解,相信大家對小程序框架MINA有了初步了解。接下來將會對其進行深入介紹。 目標用戶:無編程經驗,但對微信小程序感興趣的同學。 學習目標:了解M
【helloworld】-微信小程序開發教程-入門篇【4】
頁面 lob 分享圖片 簡化 指定 ram 圖層 備註 family 1. 開篇導言 本節目標:通過上一節的講解,相信大家對小程序框架MINA的目錄結構和配置有了一定的了解。接下來將會講解視圖層,邏輯層及其之間的交互。 目標用戶:無編程經驗,但對微信小程序感興趣的
【helloworld】-微信小程序開發教程-入門篇【1】
基本 微信小程序開發 AI 彈出對話框 頁面 com 基本使用 alt 案例演示 1. 開篇導言 本節目標:旨在演示如何用開發者工具構建並運行簡單的 helloworld 應用。 目標用戶:無編程經驗,但對微信小程序感興趣的同學。 學習目標:開發者工具的基本使用流程
【helloworld】-微信小程序開發教程-入門篇【5】
總結 mta top eight page ota 技術分享 小程序 attach 1. 開篇導言 本節目標:通過之前的講解,相信大家對於微信小程序本身有了一定的認識。本篇將專註於講解IDE的調試功能。 目標用戶:無編程經驗,但對微信小程序感興趣的同學。 學習目標
【轉】微信小程序實現微信支付功能(可用)
arr 必須 enc red use sam func 結束 單表 原博: https://blog.csdn.net/fredrik/article/details/79697963 微信小程序實現微信支付功能 直接把裏面的參數替換成你的就
RhaPHP v1.5.8 釋出,微信公眾號、小程式開發 PHP 框架
RhaPHP微信平臺管理系統,支援多公眾號管理,小程式開發,APP介面開發,平臺獨立且快速簡潔易用。靈活的擴充套件應用機制,具有容易上手,幾乎融合微信介面,簡單的呼叫對二次開發與開發擴充套件應用模組大大提高開發效率,降低企業商家運營成本。擴充套件應用模組化,機制靈活,程
統一微信公眾號、小程式、APP的使用者資訊
上次接手一個專案需要整合公眾號、小程式以及APP的使用者,查閱了微信文件以及一些作者的文章,中間踩了不少坑,在此記錄一下解決的流程。 要點 實現統一資訊的有以下幾點: 1. 在微信開放平臺繫結需要統一資訊的應用; 2. 公眾號採用以snsapi_userinfo為scope發起的網頁授權,小程式使用w