多端JavaScript Canvas框架streakjs

streakjs 是一款多端 JavaScript Canvas 框架，支持桌面及移動瀏覽器、Node.js、微信小程序等平臺，使用統一的 API，快速實現圖形繪製、變換、動畫和交互等功能。

主要特性

• 多端支持
• 提供豐富的圖形元素
• 提供完善的事件處理機制，支持移動端設備的觸摸事件
• 支持序列化、反序列化
• 基於面向對象模塊化設計，易於擴展
• 提供簡單快捷的API，支持方法的鏈式調用
• 支持 TypeScript，提供完整的類型定義文件

開始使用

• 引入 streakjs

streakjs 無依賴庫，能夠直接在github下載js文件，或使用 npm 命令安裝

npm install streakjs
複製代碼

也能夠使用 CDN 版本

<script src="https://cdn.jsdelivr.net/npm/streakjs/dist/streakjs.min.js"></script>
複製代碼

• 建立舞臺容器

在 html 中添加一個用於 streakjs 建立舞臺的容器

<div id="container"></div>
複製代碼

• 建立舞臺並綁定容器、設置寬度和高度

var stage = new streakjs.Stage({
  container: "container",
  width: 640,
  height: 480
});
複製代碼

• 建立圖層

var layer = new streakjs.Layer();
複製代碼

• 建立圖形對象，並添加到圖層

var circle = new streakjs.shapes.Circle({
  x: stage.width / 2,
  y: stage.height / 2,
  radius: 70,
  fill: "red",
  stroke: "black"
});

layer.add(circle);
複製代碼

• 添加圖層至舞臺

stage.add(layer);
複製代碼

完整代碼，詳見 guyoung.github.io/streakjs/#/…

Node.js

• streakjs 在 Node.js 服務端使用，須要安裝 node-canvas

npm install canvas
複製代碼

node-canvas 安裝方法，詳見 github.com/Automattic/…

• 安裝 streakjs

npm install streakjs
複製代碼

• 使用 streakjs

var streakjs = require("streakjs");

streakjs.adaptive.getGlobal().canvas = require("canvas");

var stage = new streakjs.Stage({
  width: 400,
  height: 400
});

var layer = new streakjs.Layer();

var circle = new streakjs.shapes.Circle({
  x: stage.width / 2,
  y: stage.height / 2,
  radius: 70,
  fill: "red",
  stroke: "black",
  strokeWidth: 4
});

layer.add(circle);

stage.add(layer);

console.log(circle.toDataURL());
複製代碼

微信小程序

微信小程序使用 streakjs，詳見 github.com/guyoung/str…

實際運行效果，請掃描小程序碼

基礎概念

核心類

• streakjs.Node 節點

Node 類是場景、圖層、圖形、圖形組等對象的基類，提供公共屬性和方法。

• streakjs.Stage 舞臺

Stage 是一個容器對象，在 streakjs 中,Stage 對象做爲頂層容器使用。一個 Stage 對象能夠添加多個圖層。

• streakjs.Layer 圖層

Layer 是一個容器對象，內部封裝了 canvas 對象。

• streakjs.Shape 圖形

Shape 類是全部圖形對象的基類，能夠經過繼承 Shape 類或經過建立 Shape 對象方式來自定義圖形對象

• streakjs.Group 圖形組

Group 是一個容器對象，Group 對象用於把多個不一樣的 Shape 對象，或其餘 Group 對象組合成一個複雜的圖形進行統一管理。

內置圖形

streakjs 內置多種圖形對象

• streakjs.shapes.Arc 圓弧
• streakjs.shapes.Arrow 箭頭
• streakjs.shapes.Button 按鈕
• streakjs.shapes.Circle 圓形
• streakjs.shapes.Ellipse 橢圓
• streakjs.shapes.Label 標籤
• streakjs.shapes.Line 線條
• streakjs.shapes.Path 路徑
• streakjs.shapes.Polygon 多邊形
• streakjs.shapes.Rect 矩形
• streakjs.shapes.RegularPolygon 正多邊形
• streakjs.shapes.Ring 圓環
• streakjs.shapes.Sector 扇形
• streakjs.shapes.Star 星形
• streakjs.shapes.Text 文本
• streakjs.shapes.TextPath 文本路徑
• streakjs.shapes.Image 圖片
• streakjs.shapes.Sprite 精靈

除了使用以上內置圖形對象外，您也能夠經過繼承 streakjs Shape 類或經過建立 Shape 對象時定義 sceneFunc 函數方式來自定義圖形對象

var triangle = new streakjs.Shape({
  sceneFunc: function(context, shape) {
    context.beginPath();
    context.moveTo(20, 50);
    context.lineTo(220, 80);
    context.quadraticCurveTo(150, 100, 260, 170);
    context.closePath();
    context.fillStrokeShape(shape);
  },
  fill: "#00D2FF",
  stroke: "black",
  strokeWidth: 4
});
複製代碼

基本屬性

sreakjs 中全部繼承自 Node 的對象，包括 Stage、Layer、Shape、Group 等，都具備如下屬性：

• ID
• Name 名稱
• Position 位置
• Size 大小
• Scale 縮放
• Rotation 旋轉
• Skew 傾斜
• Offset 偏移
• Opacity 透明
• Visible 顯示/隱藏

var rect2 = new streakjs.shapes.Rect({
  x: (stage.width - 100) / 2,
  y: 150,
  width: 100,
  height: 50,
  fill: "green",
  stroke: "black",
  strokeWidth: 5,
  cornerRadius: 10,
  skewY: 30
});
複製代碼

樣式

sreakjs 中每一個圖形對象都支持如下的樣式屬性：

• Stroke 描邊
• StrokeLinearGradient 線性漸變描邊
• Fill 填充
• FillLinearGradient 線性漸變填充
• FillRadialGradient 徑向漸變填充
• FillPattern 圖像填充
• Shadow 陰影
• LineJoin 線條相交拐點
• LineCap 線條結束端點
• LineDash 虛線

var rect = new streakjs.shapes.Rect({
  x: (stage.width - 240) / 2,
  y: 100,
  width: 240,
  height: 80,
  fillPatternImage: res,
  fillPatternOffset: { x: -220, y: 70 }
});
複製代碼

拖曳

streakjs 全部繼承自 Node 類的對象都能實現拖曳功能，須要將對象的 draggable 屬性設爲 true

var circle = new streakjs.shapes.Circle({
  x: stage.width / 2,
  y: stage.height / 2,
  radius: 70,
  fill: "red",
  stroke: "black",
  strokeWidth: 4,
  draggable: true
});
複製代碼

事件

sreakjs 中全部繼承自 Node 的對象均可以綁定事件

• 綁定事件

circle.on("mouseover", function() {
  writeMessage("Mouseover Circle");
});
circle.on("mouseout", function() {
  writeMessage("Mouseout Circle");
});
circle.on("mousedown", function() {
  writeMessage("Mousedown Circle");
});
circle.on("mouseup", function() {
  writeMessage("Mouseup Circle");
});
複製代碼

• 綁定多個事件

rect.on("mouseover mouseout mousedown mouseup touchstart touchend", function( evt ) {
  writeMessage("Rect Multi Events: " + evt.type);
});
複製代碼

動畫

streakjs 中 Animation 對象提供基本動畫功能。

var period = 2000;

anim = new streakjs.Animation(function(frame) {
  var scale = Math.sin((frame.time * 2 * Math.PI) / period) + 0.001;
  regularPolygon.scale = { x: scale, y: scale };
}, layer);
複製代碼

完整代碼，詳見 guyoung.github.io/streakjs/#/…

streakjs 中 Tween 對象提供緩動動畫功能，能夠實現圖形從原始的狀態到新的狀態線性變化，包括位置、大小、旋轉、縮放、傾斜、顏色、透明等變化

var tween = new streakjs.Tween({
  node: rect,
  duration: 1,
  x: 240,
  y: 100,
  fill: "red",
  rotation: Math.PI * 2,
  opacity: 1,
  strokeWidth: 6,
  scaleX: 1.5
});

setTimeout(function() {
  tween.play();
}, 5000);
複製代碼

完整代碼，詳見 guyoung.github.io/streakjs/#/…

選擇器

streakjs 的 Stage、Layer、Group 等容器對象都具備 find、findOne 方法，能夠根據 ID、Name 和類名來獲取對象

• 根據 ID 獲取對象

var shape = layer.find("#circle1")[0];
複製代碼

• 根據 Name 獲取對象

var shape = layer.find(".circle2")[0];
複製代碼

• 根據類名獲取對象

var shapes = layer.find("Circle");
複製代碼

完整代碼，詳見 guyoung.github.io/streakjs/#/…

序列化、反序列化及導出

• 將舞臺保存成 JSON 數據

stage.toJSON();
複製代碼

• 把 JSON 數據加載至舞臺

var json =
  '{"attrs":{"width":578,"height":200},"className":"Stage","children":[{"attrs":{},"className":"Layer","children":[{"attrs":{"x":100,"y":100,"sides":6,"radius":70,"fill":"red","stroke":"black","strokeWidth":4},"className":"RegularPolygon"}]}]}';

var stage = streakjs.Node.load(json, "container");
複製代碼

• 能夠直接導出爲圖片文件

var dataURL = stage.toDataURL({ pixelRatio: 3 });
downloadURI(dataURL, "stage.png");
複製代碼

完整代碼，詳見 guyoung.github.io/streakjs/#/…

瞭解更多使用方法，請訪問項目網站 guyoung.github.io/streakjs

項目網站

• github.com/guyoung/str…

---

關注微信公衆號，獲取軟件最新消息