Konva入门

简介：Konva是一个基于Canvas开发的2d js框架库, 它可以轻松的实现桌面应用和移动应用中的图形交互。

官网：https://konvajs.org/api/Konva.html（详情查看）

 

konva概念：

1.画布 stage

let stage = new Konva.Stage({ container:"box", width:600, height:600 });

2.层 layer（一个画布尽量少一些图层）

let layer = new Konva.Layer();

stage.add(layer);

layer.draw(); //绘制层

图层删除：layer.remove();

3.组 group

let group = new Konva.Group({
    draggable: true,
    x: 0,
    y: 0
});
group.add(circle);
group.add(simpleText);

组删除：group.remove();

组添加到图层(layer)中

4.图形

1.Konva.Rect() 矩形   2.Konva.Circle() 圆形   3.Konva.Wedge() 扇形

4.Konva.Ellipse() 椭圆   5.Konva.Text() 文字   6.Konva.Image() 图片

7.Konva.Line() 划线   8.Konva.star() 星星 ......

图形可以添加到组(group)中，也可以添加到图层(layer)中

5.事件绑定

rect.on("mouseenter", function(){

  console.log('mouseenter')

  layer.draw();

}).on("mouseleave", function(){ 

  console.log('mouseenter')

  layer.draw();

})

layer.draw();

事件：mouseover, mouseout, mouseenter, mouseleave, mousemove, mousedown, mouseup, wheel, click, dblclick, dragstart, dragmove,  dragend 

事件移除：rect.off("click");

6.属性设置(stage，layer，group，图形)

layer.setAttrs({
    scale: {
        x: 1,
        y: 1
    }
});

 

标签：layer,group,入门,Konva,图层,stage,mouseenter
来源： https://www.cnblogs.com/zigood/p/11423589.html