如何通过调整节点动态修改矩形尺寸：构建交互式画布

动态调整节点以修改矩形尺寸：打造交互式画布

引言

在交互式设计中，能够动态调整图形元素的大小和位置至关重要。本指南将教你如何构建一个交互式画布，让用户可以通过调整节点来修改矩形的尺寸。

创建画布

首先，使用 Konva.js 库创建一个画布：

• 在 HTML 中创建 <div> 元素，并设置其 id 属性。
• 使用 JavaScript 创建一个 Konva Stage，并将其附加到画布 div。

添加矩形

在画布上创建一个矩形：

• 创建一个新的 Konva Rect 对象，并指定其属性（例如，位置、尺寸、填充颜色和边框）。
• 将矩形添加到画布层中。

编写调整代码

使用 Konva Transformer 类来启用节点调整：

• 创建一个 Transformer 对象，并将其节点设置为要调整的矩形。
• 在 Transformer 中实现 boundBoxFunc 函数，以自定义调整逻辑。例如，你可以指定形状只能沿一个方向调整大小，或者保持其宽高比。

优化用户界面

为提升用户体验，添加一些功能：

• 在悬停节点时显示指针光标。
• 在单击节点时激活 Transformer。
• 在输入字段中显示矩形的当前尺寸。

实施特定要求

本指南中，特定要求是修改宽度时保持矩形面积不变。在 boundBoxFunc 函数中实现以下代码：

if (oldBoundBox.width != newBoundBox.width && oldBoundBox.height == newBoundBox.height) {
  newBoundBox.height = oldBoundBox.height * oldBoundBox.width / newBoundBox.width;
}

完整代码

将所有代码片段组合在一起，得到以下完整代码：

// 创建画布
const stage = new Konva.Stage({
  container: 'canvas',
  width: 512,
  height: 896
});

// 创建矩形
const rect = new Konva.Rect({
  x: 100,
  y: 100,
  width: 100,
  height: 100,
  fill: 'red',
  stroke: 'black',
  strokeWidth: 2
});

// 添加到画布
const layer = new Konva.Layer();
layer.add(rect);
stage.add(layer);

// 添加 Transformer
const tr = new Konva.Transformer({
  nodes: [rect],
  boundBoxFunc: function(oldBoundBox, newBoundBox) {
    // 调整逻辑（保持面积不变）
    if (oldBoundBox.width != newBoundBox.width && oldBoundBox.height == newBoundBox.height) {
      newBoundBox.height = oldBoundBox.height * oldBoundBox.width / newBoundBox.width;
    }

    return newBoundBox;
  }
});

// 优化用户界面
rect.on('mouseover', function() {
  document.body.style.cursor = 'pointer';
});

rect.on('mouseout', function() {
  document.body.style.cursor = 'default';
});

rect.on('click', function() {
  tr.nodes([rect]);
});

$('#widthInput').val(rect.width());
$('#heightInput').val(rect.height());

// 添加 Transformer 到画布
stage.add(tr);

结论

按照本指南的步骤，你可以构建一个交互式画布，让用户可以通过调整节点来修改矩形的尺寸，同时保持特定要求（例如，保持面积不变）。这种技术适用于创建可调整大小和定位的自定义形状，增强了交互式设计应用程序的功能性。

常见问题解答

1. 如何限制调整的范围？
   你可以在 Transformer 中使用 boundBoxFunc 函数来限制调整的最小或最大尺寸。

2. 如何添加旋转功能？
   你可以通过设置 rotateEnabled 属性为 true 来启用 Transformer 中的旋转。

3. 如何限制调整的轴向？
   在 boundBoxFunc 函数中，你可以限制 newBoundBox 的属性（例如，x 和 y），以仅允许沿特定轴向调整。

4. 如何将调整应用于多个形状？
   你可以将多个形状作为参数传递给 Transformer 的 nodes 属性。

5. 如何在调整后更新形状的数据？
   在 Transformer 中监听 transformend 事件，并使用 getAttrs() 方法获取调整后的形状属性。