canvas绘图库——Konva入门

不知名前端

于 2021-03-08 00:04:16 发布

阅读量1.8k

点赞数 1

分类专栏： canvas

本文链接：https://blog.csdn.net/yun_master/article/details/114502458

版权

canvas 专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了Konva.js库中舞台（stage）、图层（layer）和元素（如图片、图形、文字）的概念及用法。通过创建Konva.stage()来设定舞台，使用Konva.layer()创建图层，并将元素如Konva.image()、Konva.Rect()、Konva.Text()添加到图层，最后将图层添加到舞台并绘制。同时，还提到了图层事件监听的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先要区分几个概念

舞台

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

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)