canvas绘图库——Konva入门

首先要区分几个概念

舞台

所有的画面都将在这个舞台展示

Konva.stage(container,width,height);

图层

每个图层都是一个canvas的dom层.在使用时需要将layer通过stage.add方法加入到stage层

Konva.layer();

元素

1、图片

Konva.image(options)

2、图形

Konva.Rect(options)

3、文字

Konva.Text(options)

控件

Konva.Transformer(options)

元素绘制到画布的过程

const stage = new Konva.stage(container,width,height);
const layer = new Konva.layer();
const img = new Konva.image({
	name:"image",
	image:img,
	width,
	height,
	draggable:true,
	x:(this.stage.width() - width) / 2,
	y:(this.stage.height() - height) / 2,
	stroke:"#fff",
	strokeWidth:1,
	dash:[6,6]
});

stage.add(layer);
layer.add(img);
layer.draw();

图层事件

const stage = new Konva.stage(container, width, height);
const layer = new Konva.layer();

starge.on(eventName,callback);
layer.on(eventName,callback)