ztcanvas

Appearance

Return to top
On this page

Why ZTCanvas

by using ZTCanvas you can create a Rect such like the red one:

the code is succinct and clear

<canvas id="canvas"></canvas>
1
const engine = new CanvasEngine({
  w: "200",
  h: "200"
})
const rect = new Rect({
  x: 10,
  y: 10,
  w: 100,
  h: 100,
  zIndex: 0
})
engine.render(rect, {
  color: '#dd6d50'
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14

but when you create a Rect with vanilla js, it will It becomes complicated and difficult to understand

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

ctx.fillStyle = 'green';
ctx.fillRect(10, 10, 100, 100);
1
2
3
4
5
  • you need to understand what is Context2D
  • you need to figure out what the function fillRect params means
  • and If you want add event listeners such as click, it'hard.

👇 an example

With Event Listener

you can click the purple rectangle and see what happens


With ZTCanvas 

import { CanvasEngine, Rect, EventName } from 'ztcanvas'

const engine2 = new CanvasEngine({
  w: "200",
  h: "200",
  canvasTarget: "canvas2"
})
// a object and five params are all valid
// we support two modes
const rect1 = new Rect(10, 20, 80, 80, 0)
engine2.render(rect1, {
  color: "purple"
})
engine2.addEventListener(rect1, EventName.click, () => {
  alert("rect1 clicked")
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

With vanilla js 

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

ctx.fillStyle = 'purple';
const path2d = new Path2D()
path2d.rect(10, 20, 80, 80)
ctx.fill(path2d);

canvas.addEventListener("click", e => {
  const { clientX, clientY } = e
  if (ctx.isPointInPath(path2d, clientX, clientY)) {
    alert("rect clicked")
  }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14

In order to support event listening, you need to use path2d, and you need to figure out a lot of concepts.

Also, if you're writing with vanilla javascript, when you want to remove a rectangle's listeners, if all the events have been cleared, doesn't canvas dom's event listeners need to be removed as well?

ZTCanvas has this functionality built in to help you manage all the events, you just need to add and remove shapes.

Manage Layers

also, ZTCanvas support switch layers.

an example 👇


source code 

import { CanvasEngine, Rect } from 'ztcanvas'

const engine3 = new CanvasEngine({
  w: "200",
  h: "200",
  canvasTarget: "canvas3"
})
let flag = false
const rect = new Rect(10, 10, 80, 80, 0)
engine3.render(rect, {
  color: '#dd6d50'
})
const rect2 = new Rect(40, 40, 80, 80, 1)
engine3.render(rect2, {
  color: "purple"
})

setInterval(() => {
  flag = !flag
  // use `modifyShapeLayer` to change shapes layers
  engine3.modifyShapeLayer(rect, flag ? 1 : 0)
  engine3.modifyShapeLayer(rect2, flag ? 0 : 1)
}, 500)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

Events with layers

We all know that canvas is just a plane, no layers. So if shapes are overlapped, shape bind events are all triggered, it's weird.

But ZTCanvas can manage relationships between layers and events.

Open your browser devtools, go to console panel, click the overlapping parts between the three rectangles.

The overlapping part just trigger the top layer shape, right? Just like dom.

Thanks to our event management system, this feature realizes very cleverly and clearly. Welcome to check ZTCanvas source code.

source code 

const engine3 = new CanvasEngine({
  w: "200",
  h: "200",
  canvasTarget: "canvas4",
});
const rect = new Rect(10, 10, 80, 80, 0);
engine3.render(rect, {
  color: "#dd6d50",
});
const rect2 = new Rect(40, 40, 80, 80, 1);
engine3.render(rect2, {
  color: "purple",
});
const rect3 = new Rect(60, 60, 80, 80, 1);
engine3.render(rect3, {
  color: "red",
});
engine3.addEventListener(rect, EventName.click, () => {
  console.log(1);
});
engine3.addEventListener(rect2, EventName.click, () => {
  console.log(2);
});
engine3.addEventListener(rect3, EventName.click, () => {
  console.log(3);
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27