有没有一种方法可以通过使用Konva js向外/向内拖动圆周来调整圆的大小? [英] Is there a way to resize a circle by dragging the circumference outward / inward using Konva js?

问题描述

使用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

推荐答案

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

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>

这篇关于有没有一种方法可以通过使用Konva js向外/向内拖动圆周来调整圆的大小?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！