Konva.js 绘制矩形并删除：使用条件语句和按钮事件

本示例代码使用 Konva.js 库在画布上绘制矩形，根据鼠标位置动态调整矩形的大小和位置。为了方便用户操作，添加了一个按钮事件，可以将所有绘制的矩形删除。

if (pos.x >= startX && pos.x < startX + width / 2) {
  var drawRect = new Konva.Rect({
    x: startX,
    y: pos.y - height / 2,
    width: pos.x - startX + width / 2,
    height: height,
    fill: 'white',
    stroke: 'transparent'
  });
  this.layer.add(drawRect);
  this.getPointData(drawRect);
}
else if (pos.x > endX - width / 2 && pos.x <= endX) {
  var drawRect = new Konva.Rect({
    x: pos.x - width / 2,
    y: pos.y - height / 2,
    width: endX - pos.x + width / 2,
    height: height,
    fill: 'white',
    stroke: 'transparent'
  });
  this.layer.add(drawRect);
  this.getPointData(drawRect);
}
else if (pos.y >= startY && pos.y <= startY + height / 2) {
  var drawRect = new Konva.Rect({
    x: pos.x - width / 2,
    y: startY,
    width: width,
    height: pos.y - startY + height / 2,
    fill: 'white',
    stroke: 'transparent'
  });
  this.layer.add(drawRect);
  this.getPointData(drawRect);
}
else if (pos.y > endY - height / 2 && pos.y <= endY) {
  var drawRect = new Konva.Rect({
    x: pos.x - width / 2,
    y: pos.y - height / 2,
    width: width,
    height: endY - pos.y + height / 2,
    fill: 'white',
    stroke: 'transparent'
  });
  this.layer.add(drawRect);
  this.getPointData(drawRect);
}
else {
  var drawRect = new Konva.Rect({
    x: pos.x - width / 2,
    y: pos.y - height / 2,
    width: width,
    height: height,
    fill: 'white',
    stroke: 'transparent'
  });
  this.layer.add(drawRect);
  this.getPointData(drawRect);
}

// 添加删除按钮
<button id='deleteButton'>删除矩形</button>

// 监听按钮点击事件
var deleteButton = document.getElementById('deleteButton');
deleteButton.addEventListener('click', function() {
  // 删除所有矩形
  this.layer.destroyChildren();
  this.layer.draw();
});

解释:

代码首先根据鼠标位置判断应该绘制的矩形形状，并使用 Konva.Rect 创建相应的矩形对象。
this.layer.add(drawRect) 将绘制的矩形添加到画布层。
this.getPointData(drawRect) 是自定义函数，用来获取矩形的信息，具体实现根据实际需求决定。
添加了一个按钮元素，并为其添加点击事件监听器。
当按钮被点击时，this.layer.destroyChildren() 方法将删除层中的所有子节点，即所有绘制的矩形。
this.layer.draw() 重新绘制画布，更新视图。

注意: this.layer 应该替换为实际的画布层对象。

使用此示例代码，您可以轻松地在 Konva.js 画布上绘制矩形，并通过按钮事件方便地删除所有绘制的矩形。

其他相关信息:

Konva.js 文档: 了解更多 Konva.js API 和功能。
Konva.js 示例: 探索更多 Konva.js 示例代码。
Konva.js GitHub: 获取 Konva.js 源代码和最新更新。

希望本文对您有所帮助!