Is there a way to resize a circle by dragging the circumference outward / inward using Konva js?

问题

Using Konva js, Is there a way to drag a circle's circumference without showing the resizers elements, in order to resize the circle ( make the radius grow)?

Using a Transformer - displays the resizers, and stretches rectangles by changing the scale. I want to actually resize the circle (larger radius) without showing the resizers.

All help will be appreciated. Thx

回答1:

You may need to use two circles for that. One circle is your main shape, another circle for detecting events on stroke (the second circle can be transparent if you don't want to see it on the screen).

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>

来源：https://stackoverflow.com/questions/53261699/is-there-a-way-to-resize-a-circle-by-dragging-the-circumference-outward-inward

标签

javascript

canvas

konvajs