Есть ли способ изменить размер круга, перетаскивая окружность наружу / внутрь, используя Konva js? - PullRequest
Новая
       9

Есть ли способ изменить размер круга, перетаскивая окружность наружу / внутрь, используя Konva js?

0 голосов
/ 12 ноября 2018

Используя Konva js, есть ли способ перетащить окружность круга, не показывая элементы изменения размера, чтобы изменить размер круга (увеличить радиус)?

Используя Трансформатор - отображает размеры изменения, ирастягивает прямоугольники, изменяя масштаб.Я хочу изменить размер круга (большего радиуса), не показывая изменения размера.

Вся помощь будет оценена.Thx

1 Ответ

0 голосов
/ 12 ноября 2018

Для этого вам может понадобиться два круга.Один круг - это ваша основная фигура, другой круг - для обнаружения событий при ударе (второй круг может быть прозрачным, если вы не хотите видеть его на экране). 

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>
...