KonvaJS-오프셋을 사용하지 않고 커서 주위로 사각형 회전

var width = window.innerWidth;
var height = window.innerHeight;

var rectangleLayer = new Konva.Layer();
var holdingSlotsLayer = new Konva.Layer();
var controlLayer = new Konva.Layer();
var stage = new Konva.Stage({
  container: 'container',
  width: width,
  height: height,
  draggable: true
});
//vertical holding spot
holdingSlotsLayer.add(new Konva.Rect({
  x: 300,
  y: 25,
  width: 130,
  height: 25,
  fill: '#fff',
  draggable: false,
  rotation: 90,
  stroke: '#000'
}));

//horizontal holding spot
holdingSlotsLayer.add(new Konva.Rect({
  x: 25,
  y: 75,
  width: 130,
  height: 25,
  fill: '#fff',
  draggable: false,
  rotation: 0,
  stroke: '#000'
}));

//mask to set boundaries around where we wannt to flip the rectangle
controlLayer.add(new Konva.Rect({
  x: 215,
  y: 15,
  width: 150,
  height: 150,
  fill: '#fff',
  draggable: false,
  name: 'A',
  opacity: 0.5
}));
stage.add(holdingSlotsLayer, controlLayer);

//function for finding intersections
function haveIntersection(placeHolder, rectangle, zone) {
  if (rectangle.rotation == 0 || zone == true) {
    return !(
      rectangle.x > placeHolder.x + placeHolder.width ||
      rectangle.x + rectangle.width < placeHolder.x ||
      rectangle.y > placeHolder.y + placeHolder.height ||
      rectangle.y + rectangle.height < placeHolder.y
    );
  } else {
    return !(
      rectangle.x > placeHolder.x + 25 ||
      rectangle.x + rectangle.width < placeHolder.x ||
      rectangle.y > placeHolder.y + placeHolder.height + 90 ||
      rectangle.y + rectangle.height < placeHolder.y
    );
  }
}

//function to create rectangle group (so we can place text on the rectangle)
function spawnRectangle(angle) {
  var rectangleGroup = new Konva.Group({
    x: 95,
    y: 95,
    width: 130,
    height: 25,
    rotation: angle,
    draggable: true,
  });

  rectangleGroup.add(new Konva.Rect({
    width: 130,
    height: 25,
    fill: 'lightblue'
  }));

  rectangleGroup.add(new Konva.Text({
    text: '123',
    fontSize: 18,
    fontFamily: 'Calibri',
    fill: '#000',
    width: 130,
    padding: 5,
    align: 'center'
  }));

  //function tied to an on drag move event
  rectangleGroup.on('dragmove', (e) => {
    //shrink rectangle hitbox for use in placeholder intersection
    var dimensions = {
      "height": 3,
      "width": 5,
      "x": e.target.attrs.x,
      "y": e.target.attrs.y,
      'rotation': e.target.attrs.rotation
    };
    //loop over holding slots to see if there is an intersection.
    for (var i = 0; holdingSlotsLayer.children.length > i; i++) {
      //if true, change the look of the slot we are hovering
      if (haveIntersection(holdingSlotsLayer.children[i].attrs, dimensions, false)) {
        holdingSlotsLayer.children[i].attrs.fill = '#C41230';
        holdingSlotsLayer.children[i].attrs.dash = [10, 3];
        holdingSlotsLayer.children[i].attrs.stroke = '#000';
        //set attributes back to normal otherwise
      } else {
        holdingSlotsLayer.children[i].attrs.fill = '#fff';
        holdingSlotsLayer.children[i].attrs.dash = null;
        holdingSlotsLayer.children[i].attrs.stroke = null;
      }
    }

    //check to see if we are in a zone that requires the rectangle to be flipped 90 degrees 
    if (haveIntersection(controlLayer.children[0].attrs, dimensions, true)) {
      if (rectangleGroup.attrs.rotation != 90) {
        rectangleGroup.attrs.rotation = 90;
      }
    } else {
      rectangleGroup.attrs.rotation = 0;
    }

    stage.batchDraw();
  });

  rectangleGroup.on('dragend', (e) => {

    for (var i = 0; holdingSlotsLayer.children.length > i; i++) {
      //If the parking layer has an element that is lit up, then snap to position.. 
      if (holdingSlotsLayer.children[i].attrs.fill == '#C41230') {
        rectangleGroup.position({
          x: holdingSlotsLayer.children[i].attrs.x,
          y: holdingSlotsLayer.children[i].attrs.y
        });
        holdingSlotsLayer.children[i].attrs.fill = '#fff';
        holdingSlotsLayer.children[i].attrs.dash = null;
        holdingSlotsLayer.children[i].attrs.stroke = null;
      }
    }

    stage.batchDraw();
  });


  rectangleLayer.add(rectangleGroup);
  stage.add(rectangleLayer);
}

body {
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #D3D3D3;
  background-size: cover;
}

#desc {
  position: absolute;
  top: 5px;
  left: 5px;
}

<script src="https://unpkg.com/[email protected]/konva.min.js"></script>

<body>
  <div id="container"></div>
  <div id="desc">
    <button onclick="spawnRectangle(0)">spawn rectangle</button>
  </div>
</body>