Streakjs is a multi-terminal JavaScript Canvas framework

Streakjs is a multi-terminal JavaScript Canvas framework that supports desktop and mobile browsers, Node.js, and wechat apps. Streakjs uses a unified API to quickly draw, transform, animate, and interact graphics.

The main features

• Multiterminal support
• Provides rich graphic elements
• Provides a complete event processing mechanism to support touch events on mobile devices
• Supports serialization and deserialization
• Based on object-oriented modular design, easy to expand
• Provides a quick and simple API to support method chain calls
• Supports TypeScript and provides complete type definition files

Begin to use

• The introduction of streakjs

Streakjs has no dependencies. You can download the js file directly from Github or install it using the NPM command

npm install streakjs
Copy the code

You can also use the CDN version

<script src="https://cdn.jsdelivr.net/npm/streakjs/dist/streakjs.min.js"></script>
Copy the code

• Creating a stage container

Add a container to the HTML for streakJS to create the stage

<div id="container"></div>
Copy the code

• Create the stage and bind the container, set the width and height

var stage = new streakjs.Stage({
  container: "container".width: 640.height: 480
});
Copy the code

• Create a layer

var layer = new streakjs.Layer();
Copy the code

• Create a graphic object and add it to the layer

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

layer.add(circle);
Copy the code

• Add layers to the stage

stage.add(layer);
Copy the code

The complete code, see guyoung. Making. IO/streakjs / # /…

Node.js

• Streakjs is used on the Node.js server and node-Canvas is required

npm install canvas
Copy the code

For details on how to install Node-Canvas, see github.com/Automattic/…

• Install streakjs

npm install streakjs
Copy the code

• Using 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());
Copy the code

Wechat applets

Wechat applet uses StreakJS, see github.com/guyoung/str…

Actual operation effect, please scan the small program code

Basic concept

Core classes

• Streakjs. Node Node

The Node class is the base class for scenes, layers, graphics, graphics groups, and so on, providing common properties and methods.

• Streakjs. Stage Stage

Stage is a container object, and in StreakJS, the Stage object is used as the top-level container. Multiple layers can be added to a Stage object.

• Streakjs. Layer Layer

Layer is a container object that encapsulates the Canvas object internally.

• Streakjs. Shape pattern

Shape is the base class for all graphics objects. You can customize graphics objects either by inheriting Shape or by creating Shape objects

• Streakjs. Group graphics Group

Group is a container object, which is used to combine multiple different Shape objects or other Group objects into a complex graph for unified management.

Built-in graphics

Streakjs has a variety of graphical objects built in

• Streakjs. Shapes. The Arc Arc
• Streakjs. Shapes. Arrow Arrow
• Streakjs. Shapes. The Button Button
• Streakjs. Shapes. Circle Circle
• Streakjs. Shapes. The Ellipse Ellipse
• Streakjs. Shapes. The Label tag
• Streakjs. Shapes. The Line Line
• Streakjs. Shapes. The Path Path
• Streakjs. Shapes. Polygon Polygon
• Streakjs. Shapes. The Rect rectangle
• Streakjs. Shapes. RegularPolygon regular polygon
• Streakjs. Shapes. Ring Ring
• Streakjs. Shapes. Sector fan
• Streakjs. Shapes. Star Star
• Streakjs. Shapes. The Text Text
• Streakjs.shapes.TextPath specifies the TextPath
• Streakjs. Shapes. Image picture
• Streakjs. Shapes. Sprite elves

In addition to using the built-in graphics objects above, you can customize the graphics objects by inheriting the StreakJS Shape class or by defining the sceneFunc function when you create the Shape object

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
});
Copy the code

Basic attributes

All sreakJS objects that inherit from Node, including Stage, Layer, Shape, Group, etc., have the following properties:

• ID
• The Name of the Name
• The Position location
• The Size Size
• Scale zooming
• Rotation Rotation
• Skew tilt
• Offset the Offset
• Opacity is transparent
• Visible shows/hides

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
});
Copy the code

style

Each graphic object in SreakJS supports the following style properties:

• Stroke Stroke
• StrokeLinearGradient Linear gradient stroke
• The Fill to Fill
• FillLinearGradient FillLinearGradient
• FillRadialGradient Fill with radial gradient
• FillPattern Fills the image
• Shadow Shadow
• LineJoin Indicates the inflection point of the line intersection
• End point of LineCap line
• LineDash dotted line

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

drag

Streakjs all objects that inherit from the Node class can be draggable by setting the draggable property of the object to 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
});
Copy the code

The event

All objects in SreakJS that inherit from Node can be bound to events

• The binding event

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");
});
Copy the code

• Bind multiple events

rect.on("mouseover mouseout mousedown mouseup touchstart touchend".function(
  evt
) {
  writeMessage("Rect Multi Events: " + evt.type);
});
Copy the code

animation

The Animation object in StreakJS provides basic Animation functionality.

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);
Copy the code

The complete code, see guyoung. Making. IO/streakjs / # /…

The Tween object in StreakJS provides the function of slow animation, which can realize the linear change of the graph from the original state to the new state, including position, size, rotation, scale, tilt, color, transparency and so on

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);
Copy the code

The complete code, see guyoung. Making. IO/streakjs / # /…

The selector

Streakjs container objects such as Stage, Layer, and Group all have find and findOne methods that can be used to retrieve objects by ID, Name, and class Name

• Gets objects by ID

var shape = layer.find("#circle1") [0];
Copy the code

• Gets the object by Name

var shape = layer.find(".circle2") [0];
Copy the code

• Gets objects by class name

var shapes = layer.find("Circle");
Copy the code

The complete code, see guyoung. Making. IO/streakjs / # /…

Serialization, deserialization, and export

• Save the stage as JSON data

stage.toJSON();
Copy the code

• Load the JSON data onto the stage

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");
Copy the code

• You can export it directly as an image file

var dataURL = stage.toDataURL({ pixelRatio: 3 });
downloadURI(dataURL, "stage.png");
Copy the code

The complete code, see guyoung. Making. IO/streakjs / # /…

Learn more methods of use, please visit the project site guyoung. Making. IO/streakjs

Project web site

• Github.com/guyoung/str…

---

Follow the wechat official account to get the latest news about the software