如何在用户悬停时创建可调整大小的 konva 形状

Question

我正在研究 konva js。我正在开发一款允许用户创建自定义形状的应用程序。创建后，他们可以通过鼠标调整它的大小，用一条线连接两个形状。至此特征图自定义形状及其连线完成。

现在我想像这样在用户将鼠标悬停在自定义形状上时在自定义形状周围显示圆点

P.S 我从 https://app.diagrams.net/ 看到了这个。我想构建与 it.If 相同的绘图应用程序，有人可以将我导航到我可以像这样构建绘图应用程序的资源，这真的很有帮助。

Answer 1

您可以将 mouseenter 和 mouseleave 事件用于形状的 show/hide 锚点。

如何实现锚点由您决定。它可以是自定义锚点，如 https://konvajs.org/docs/sandbox/Modify_Curves_with_Anchor_Points.htm or it can be Konva.Transformer https://konvajs.org/docs/select_and_transform/Basic_demo.html.

在 mouseenter 您可以显示锚点。隐藏锚点对于演示来说有点诡计我会在鼠标离形状太远时隐藏锚点。我们不能像这里那样使用mouseleave，因为它会在我们简单地悬停在Konva.Transformer.

时触发隐藏

在演示中，尝试将圆圈悬停。

const stage = new Konva.Stage({
  container: 'container',
  width: window.innerWidth,
  height: window.innerHeight
});

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

const shape = new Konva.Circle({
  x: stage.width() / 2,
  y: stage.height() / 2,
  radius: 50,
  fill: 'green'
});
layer.add(shape);

const tr = new Konva.Transformer();
layer.add(tr);

// from 
function getDistance(rect, p) {
  var dx = Math.max(rect.x - p.x, 0, p.x - (rect.x + rect.width));
  var dy = Math.max(rect.y - p.y, 0, p.y - (rect.y + rect.height));
  return Math.sqrt(dx*dx + dy*dy);
}

shape.on('mouseenter', () => {
  tr.nodes([shape]);
});



stage.on('mousemove', () => {
  if (!tr.nodes().length) {
    return;
  }
  if (tr.isTransforming()) {
    return;
  }
  const rect = shape.getClientRect();
  const dist = getDistance(rect, stage.getPointerPosition());
  if (dist > 60) {
    tr.nodes([]);
  }
});

layer.draw();

  <script src="https://unpkg.com/konva@^8/konva.min.js"></script>
<div id="container"></div>

如何在用户悬停时创建可调整大小的 konva 形状

How to create a resizable konva shape when user hovers

konvajs