时间戳

首页 > 解决方案 > 有没有办法通过使用 Konva js 向外/向内拖动圆周来调整圆的大小？

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

问题描述

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

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

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

标签： javascriptcanvaskonvajs

解决方案

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

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>

推荐阅读