KonvaJS 始终将文本置于标签中心

Question

我对代码表示歉意，它处于我正在积极使用的状态。

在 Konva JS 中，我正在创建标签。它基本上是一个组，它具有形状和文本元素。形状是从数据库动态绘制的，每个数据库行都有坐标、形状（方形、圆形等）、大小和旋转。这些值乘以取决于屏幕尺寸的比例。我有一个可行的解决方案，我已经使用了几周，但我也有一个可以改变形状的函数。所以我按下一个按钮，它会更新数据库（例如将正方形更改为圆形），然后重新绘制画布。因为从正方形到圆形从从左上角绘制的形状变为从中心绘制的形状，所以它会弄乱坐标。我决定改用宽度/2 的偏移量绘制矩形，以便也从中心绘制矩形。

随后我不断地进一步打破它，现在我根本无法让文本居中。无论形状、大小或旋转如何，我都需要文本居中。

当前代码

        //Gets table array from SQL

        tables = callPhpFunction('getTablesInRoom', room);

        tables = JSON.parse(tables);

        

        numberOfTables = tables.length;

        index = 0;

        

        tableLayer = new Konva.Layer();

        tableLayer.add(transformer);

        

        //For every table

        while(index < numberOfTables){

            tableNumber = tables[index]['tablenumber'];

            offset_x = 0;

            offset_y = 0;

            pos_x = parseInt(tables[index]['posx']) * scale;

            pos_y = parseInt(tables[index]['posy']) * scale;

            shape = tables[index]['shape'];     

            tableWidth = parseInt(tables[index]['width']) * scale;

            tableHeight = parseInt(tables[index]['height']) * scale;

            rotation = parseInt(tables[index]['rotation']); 

            fillColor = "gray";

            strokeColor = "black";

                        

    

            var table = new Konva.Label({

                x: pos_x,

                y: pos_y,

                draggable:canDrag

              });

            pos_x = 0;

            pos_y = 0 ;

           这是视觉结果

Answer 1

我稍微重写了你的创作流程；看起来这样运作良好。这里的本质是将形状+标签组合在一起，并将全局[缩放]位置应用于这些组，而不是单个图形元素。代码：&nbsp; &nbsp;const tableLayer = new Konva.Layer();&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; const scale = 1.0; // position scale factor&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; const mockData = [&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; label: "45",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; shape: "circle",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; x: 100,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; y: 150,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; w: 100,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; h: 100,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; r: 0&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; label: "46",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; shape: "rect",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; x: 200,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; y: 170,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; w: 150,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; h: 100,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; r: -30&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; label: "47",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; shape: "rect",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; x: 70,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; y: 200,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; w: 50,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; h: 100,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; r: 15&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; label: "48",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; shape: "ellipse",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; x: 400,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; y: 300,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; w: 250,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; h: 150,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; r: 30&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; ];&nbsp; &nbsp; function createShapeElement( data ) {&nbsp; &nbsp; &nbsp; &nbsp; // Create container group&nbsp; &nbsp; &nbsp; &nbsp; let element = new Konva.Group( {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; x: data.x * scale,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; y: data.y * scale,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; draggable: true,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; listening: true,&nbsp; &nbsp; &nbsp; &nbsp; } );&nbsp; &nbsp; &nbsp; &nbsp; // Create background shape&nbsp; &nbsp; &nbsp; &nbsp; let shape;&nbsp; &nbsp; &nbsp; &nbsp; switch ( data.shape ) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; case "circle": // fall-through&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; case "ellipse": // fall-through&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; case "longellipse":&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; shape = new Konva.Ellipse( {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; x: 0,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; y: 0,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; radiusX: data.w * 0.5,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; radiusY: data.h * 0.5,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; rotation: data.r,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; fill: "gray",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; stroke: "black",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; strokeWidth: 4,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; draggable: false,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; listening: true&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; } );&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; break;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; default:&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; shape = new Konva.Rect( {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; x: 0,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; y: 0,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; offsetX: data.w * 0.5,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; offsetY: data.h * 0.5,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width: data.w,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height: data.h,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; rotation: data.r,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; fill: "gray",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; stroke: "black",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; strokeWidth: 4,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; draggable: false,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; listening: true&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; } );&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; break;&nbsp; &nbsp; &nbsp; &nbsp; } // End switch&nbsp; &nbsp; &nbsp; &nbsp; // Create label&nbsp; &nbsp; &nbsp; &nbsp; let label = new Konva.Text( {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; x: data.w * -0.5,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; y: data.h * -0.5,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width: data.w,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height: data.h,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; text: data.label,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; fontSize: 24,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; fill: "black",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; align: "center",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; verticalAlign: "middle",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; draggable: false,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; listening: false&nbsp; &nbsp; &nbsp; &nbsp; } );&nbsp; &nbsp; &nbsp; &nbsp; element.add( shape, label );&nbsp; &nbsp; &nbsp; &nbsp; return element;&nbsp; &nbsp; }&nbsp; &nbsp; // Loop your data and call the creation method for each data item.&nbsp; &nbsp; mockData.forEach( itemData => {&nbsp; &nbsp; &nbsp; &nbsp; tableLayer.add( createShapeElement( itemData ) );&nbsp; &nbsp; } );