konva 点击拖动

Konva是一个HTML5 Canvas库，可以轻松地创建交互式Canvas应用程序。要实现Konva中的点击拖动，可以使用Konva的drag and drop API。可以通过以下步骤实现：

1. 创建Konva.Stage和Konva.Layer对象。
2. 创建Konva.Rect对象并将其添加到Konva.Layer对象中。
3. 使用Konva.Rect对象的on()方法，监听"mousedown"事件，并调用Konva.Rect对象的dragstart()方法。
4. 使用Konva.Rect对象的on()方法，监听"mousemove"事件，并调用Konva.Rect对象的dragmove()方法。
5. 使用Konva.Rect对象的on()方法，监听"mouseup"事件，并调用Konva.Rect对象的dragend()方法。
6. 将Konva.Layer对象添加到Konva.Stage对象中，并调用Konva.Stage对象的draw()方法。

以下是一个示例代码：

var stage = new Konva.Stage({
  container: 'container',
  width: 500,
  height: 500
});

var layer = new Konva.Layer();
stage.add(layer);

var rect = new Konva.Rect({
  x: 100,
  y: 100,
  width: 100,
  height: 100,
  fill: 'red',
  draggable: true
});

rect.on('dragstart', function() {
  console.log('drag start');
});

rect.on('dragmove', function() {
  console.log('drag move');
});

rect.on('dragend', function() {
  console.log('drag end');
});

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

在此示例中，创建了一个Konva.Stage对象和一个Konva.Layer对象，并将Konva.Rect对象添加到Konva.Layer对象中。通过设置Konva.Rect对象的draggable属性为true，启用了拖动功能。然后，使用Konva.Rect对象的on()方法监听鼠标事件，并在事件发生时调用相应的方法。最后，将Konva.Layer对象添加到Konva.Stage对象中，并调用Konva.Stage对象的draw()方法来渲染图形。