javascript - 有没有办法通过使用 Konva js 向外/向内拖动圆周来调整圆的大小？

Question

使用 Konva js，有没有办法在不显示调整器元素的情况下拖动圆的周长，以调整圆的大小(使半径增大)？

使用 Transformer - 显示调整器，并通过更改比例来拉伸(stretch)矩形。我想在不显示调整器的情况下实际调整圆的大小(更大的半径)。

所有帮助将不胜感激。谢谢

Answer 1

您可能需要为此使用两个圆圈。一个圆圈是您的主要形状，另一个圆圈用于检测笔画事件(如果您不想在屏幕上看到它，第二个圆圈可以是透明的)。

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

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

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

const border = new Konva.Circle({
  x: stage.width() / 2,
  y: stage.height() / 2,
  radius: 50,
  stroke: 'black',
  strokeWidth: 6,
  fillEnabled: false
});

layer.add(border);

function distance(p1, p2) {
  return Math.sqrt(Math.pow(p1.x - p2.x, 2) + Math.pow(p1.y - p2.y, 2));
}

border.on('mouseenter', () => {
  border.stroke('red');
  layer.batchDraw();
})

border.on('mouseleave', () => {
  border.stroke('black');
  layer.batchDraw();
})

border.on('mousedown', () => {
  // attach move event
  stage.on('mousemove.resizer', () => {
    const center = border.position();
    const pointer = stage.getPointerPosition();
    const radius = distance(center, pointer);
    
    border.radius(radius);
    circle.radius(radius)
    
    layer.batchDraw();
  });
  
  
  // remove all events at end
  stage.on('mouseup.resizer', () => {
    stage.off('.resizer')
  });
  
})

layer.draw();

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