多端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);

完整代码，详见 https://guyoung.github.io/str...

Node.js

• streakjs 在 Node.js 服务端使用，需要安装 node-canvas

npm install canvas

node-canvas 安装方法，详见 https://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，详见 https://github.com/guyoung/st...

实际运行效果，请扫描小程序码

基础概念

核心类

• 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);

完整代码，详见 https://guyoung.github.io/str...

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);

完整代码，详见 https://guyoung.github.io/str...

选择器

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");

完整代码，详见 https://guyoung.github.io/str...

序列化、反序列化及导出

• 将舞台保存成 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");

完整代码，详见 https://guyoung.github.io/str...

了解更多使用方法，请访问项目网站 https://guyoung.github.io/str...

项目网站

• https://github.com/guyoung/st...

---

关注微信公众号，获取软件最新消息