uando comience a usar offset () para establecer el punto de rotación de una forma o grupo, se sentirá confundido porque la posición del grupo también cambia.

Esta es la función que he producido para ajustar las matemáticas correctas. ¿Alguien tiene una solución mejor

Historia más larga: descubrí la necesidad de volver a calcular la (x, y) f, o una forma al configurar el desplazamiento para que no sea intuitivo. En mi humilde opinión, al imaginar el proceso de rotación, la mayoría de las personas conceptualizará el lienzo basado en las primeras lecciones de matemáticas. Si imagino que el pizarrón y mi maestra de matemáticas hablan de girar un triángulo, ella apuntaría al centro de rotación y yo podría imaginar el triángulo girando alrededor de su dedo. Entiendo que en Konvajs el desplazamiento está relacionado con las operaciones de dibujo y tiene una relación con las posiciones x, y de la forma por razones más profundas; ¡simplemente no es intuitivo para mí pensar en rotar como mover la posición de dibujo!

enga en cuenta que en la función del fragmento a continuación, la posición x, y del punto de rotación que se está pasando está en relación con la esquina superior izquierda del escenario.

/*
Set the offset for rotation to the given location and re-position the shape
*/
function RotatePoint(shape, pos){  // where pos = {x: xpos, y: yPos}
var initialPos = shape.getAbsolutePosition();
var moveBy = {x: pos.x - initialPos.x, y: pos.y - initialPos.y};

// offset is relative to initial x,y of shape, so deduct x,y.
shape.offsetX(moveBy.x);
shape.offsetY(moveBy.y);

// reposition x,y because changing offset moves it.
shape.x(initialPos.x + moveBy.x);
shape.y(initialPos.y + moveBy.y);
}

Y en acción ...

/*
Set the offset for rotation to the given location and re-position the shape
*/
function RotatePoint(shape, pos){  // where pos = {x: xpos, y: yPos}
var initialPos = shape.getAbsolutePosition();
var moveBy = {x: pos.x - initialPos.x, y: pos.y - initialPos.y};

// offset is relative to initial x,y of shape, so deduct x,y.
shape.offsetX(moveBy.x);
shape.offsetY(moveBy.y);

// reposition x,y because changing offset moves it.
shape.x(initialPos.x + moveBy.x);
shape.y(initialPos.y + moveBy.y);
}


// from here on was just a part-complete project I grabbed to illustrate the above function

// kpi chart is one or more circles.
var outputKpiChart = function(opts){

// Set up the canvas / stage
var stage = new Konva.Stage({container: opts.ele, width: opts.size.width, height: opts.size.height});
var layer = new Konva.Layer({draggable: false});
stage.add(layer);

var theCfg = getFormat('one');

for (var i = 0; i < theCfg.length; i = i + 1){
	var cfg = theCfg[i];
	
	var group = new Konva.Group({});

	var w = opts.size.width;
	var h = opts.size.height;
	var r = opts.size.width/4;
	var ctr = {x: opts.size.width/2, y: opts.size.height/2};
	var circle = new Konva.Circle({
		x: w * cfg.pos.x,
		y: h * cfg.pos.y,
		radius: w * cfg.r,
		stroke: '#D4B22B',
		strokeWidth: 4,
		fill: '#7D8DF9'
		});
	group.add(circle);

	var text = new Konva.Text({
		x: w * cfg.pos.x,
		y: h * cfg.pos.y,
		text: '42',
		fill: 'blue',
		fontSize: 140,
		fontFamily: 'Roboto'
		});

	text.offset({x: text.getWidth()/2, y: text.getHeight()/2});
	group.add(text);

	var text1 = new Konva.Text({
		x: w * cfg.pos.x,
		y:   (h * cfg.pos.y) - (w * cfg.r * .25),
		text: 'Meaning of Life',
		fill: 'blue',
		fontSize: 20,
		fontFamily: 'Roboto'
		});
  
  text1.x(text1.x() + (text.width() - text1.width())/2); // centre over text 1

  text1.offset({x: text.getWidth()/2, y: text.getHeight()/2});
	group.add(text1);
	
	layer.add(group)
		
	var pos = group.getClientRect();

  // set the group rotate point. Note - x,y is relative to top-left of stage !
  RotatePoint(group, {x: pos.x + pos.width/2, y: pos.y + pos.height/2});

	var c1 = new Konva.Circle({x: group.offsetX(), y:  group.offsetY(), radius: 4, fill: 'red'});
	layer.add(c1)
	
    // the tween has to be created after the node has been added to the layer
    var tween = new Konva.Tween({
        node: group,
        duration: 4,
        rotation: 360,
        easing: Konva.Easings.BackEaseOut
    });	
	tween.play();
}


stage.draw();

}

// this is a dashboard project, this func is intended to return positioning 
// metrics for complex kpi displays
var getFormat = function(formatName){

switch (formatName){
	
	case 'one': // display a single circle kpi display
		config = [{name: 'c1', r: .25, pos: {x: .5, y: .5}, size: {x: .5, y: .5}}]
		break;
	}
return config;
}

outputKpiChart({ele: '#container', size: {width: 600, height: 300} })

<script src="https://cdnjs.cloudflare.com/ajax/libs/konva/2.5.1/konva.js"></script>
<p>A function to move the rotaton point of a group.</p>
<div id='container' style="display: inline-block; width: 300px, height: 200px; background-color: silver; overflow: hidden; position: relative;"></div>