Question

使用Konva js，是否有一种方法可以拖动圆的圆周而不显示调整大小元素，以便调整圆的大小（使半径增大）？

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

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

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>

有没有一种方法可以通过使用Konva js向外/向内拖动圆周来调整圆的大小？

1 个答案: