旋转一组包含文本的形状，同时保持文本居中和水平

Question

这可能只是数学。我使用 Konva 动态生成形状，并将其存储为标签。因此有一个标签包含一个 textElement 和一个矩形。我想确保该矩形中的文本始终a）水平和垂直居中，b）朝上。因此，矩形可以进行任何旋转，但我总是希望文本居中且朝上。创建代码；宽度、高度、旋转、x 和 y 都有从数据库中提取的值。var table = new Konva.Label({                x: pos_x,                y: pos_y,                width: tableWidth,                height: tableHeight,                draggable:true              });table.add(new Konva.Rect({                    width: tableWidth,                    height: tableHeight,                    rotation: rotation,                    fill: fillColor,                    stroke: strokeColor,                    strokeWidth: 4                }));table.add(new Konva.Text({                width: tableWidth,                height: tableHeight,                x: pos_x, //Defaults to zero                y: pos_y, //Default to zero                text: tableNumber,                 verticalAlign: 'middle',                align: 'center',                fontSize: 30,                fontFamily: 'Calibri',                fill: 'black'            }))tableLayer.add(table);问题是，如果旋转到位，文本就会偏离中心，如下图所示：在某些情况下，我会手动更正 - 例如，如果旋转 = 45 度：pos_x = -tableWidth/2; pos_y = tableHeight/5;但这并不是永久的解决办法。我希望文本的 x 和 y 坐标位于形状本身的中心点。我尝试了几种方法（例如对标签本身应用旋转，然后对文本应用负旋转值）