KonvaJS 始终在 label 中居中文本

Question

我为代码道歉，它在我正在积极使用的 state 中。

在 Konva JS 中，我正在创建标签。 这基本上是一个组，它有一个形状和文本元素。 形状是从数据库中动态绘制的，每个 db 行都有坐标、形状（正方形、圆形等）、大小和旋转。 这些乘以取决于屏幕尺寸的比例。 我有一个工作解决方案，我已经使用了几个星期，但我也有一个 function 可以改变形状的形状。 所以我按下一个按钮，它会更新数据库（例如将方形更改为圆形），然后重新绘制 canvas。 因为从正方形到圆形从从左上角绘制的形状变为从中心绘制的形状，所以它会弄乱坐标。 我决定切换到偏移宽度/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 ;
            
            //If the shape is a square, rectangle, or undefined
            if(shape != "circle" && shape != "ellipse" && shape != "longellipse"){
                offset_x = tableWidth/2
                offset_y = tableHeight/2
            
                table.add(new Konva.Rect({
                    width: tableWidth,
                    height: tableHeight,
                    offsetX: offset_y,
                    offsetY: offset_y,
                    height: tableHeight,
                    fill: fillColor,
                    stroke: strokeColor,
                    strokeWidth: 4
                }));
            //If shape is a circle or ellipse
            } else {
                
                table.add(new Konva.Ellipse({
                    radiusX: tableWidth/2,
                    radiusY: tableHeight/2,
                    fill: fillColor,
                    stroke: strokeColor,
                    strokeWidth: 4
                }));
                
                //Can't remember why this is here, but it seems to work/ Think if these are reused when the text is drawn it centers them. 
                pos_x = -tableWidth/2;
                pos_y = -tableHeight/2;
            }
            //Gets the first shape (ellipse or rectangle) in the label. I think is equivalent to getTag()
            innerShape = getInnerShape(table);
            
            //Rotates the inner shape, while leaving text unRotated. 
            if(rotation != 0){
                canvasX =  pos_x + (tableWidth/2)
                canvasY =  pos_y + (tableHeight/2)
                rotateAroundPoint(innerShape, rotation, {x:canvasX, y:canvasY });
            }
            
            //Currently approach is to get center based on the client rectangle. It's not working
            box = table.getClientRect();
            box_x = box.x + box.width / 2;
            box_y = box.y + box.height / 2; 
                            
            table.add(new Konva.Text({
                width: tableWidth,
                height: tableHeight,
                x: box_x,
                y: box_y,
                text: tableNumber,
                verticalAlign: 'middle',
                align: 'center',
                fontSize: 24,
                fontFamily: 'Calibri',
                fill: 'black',
                listening: false
            }))

这是视觉结果

Answer 1

我稍微改写了你的创作程序； 看起来像这样运作良好。 这里的本质是 shape + label 组合在一起，全局 [scaled] position 应用于这些组，而不是单个图形元素。

代码：

    const tableLayer = new Konva.Layer();
    
    const scale = 1.0; // position scale factor
    
    const mockData = [
        {
            label: "45",
            shape: "circle",
            x: 100,
            y: 150,
            w: 100,
            h: 100,
            r: 0
        },
        {
            label: "46",
            shape: "rect",
            x: 200,
            y: 170,
            w: 150,
            h: 100,
            r: -30
        },
        {
            label: "47",
            shape: "rect",
            x: 70,
            y: 200,
            w: 50,
            h: 100,
            r: 15
        },
        {
            label: "48",
            shape: "ellipse",
            x: 400,
            y: 300,
            w: 250,
            h: 150,
            r: 30
        }
    ];


    function createShapeElement( data ) {
        // Create container group
        let element = new Konva.Group( {
            x: data.x * scale,
            y: data.y * scale,
            draggable: true,
            listening: true,
        } );

        // Create background shape
        let shape;
        switch ( data.shape ) {
            case "circle": // fall-through
            case "ellipse": // fall-through
            case "longellipse":
                shape = new Konva.Ellipse( {
                    x: 0,
                    y: 0,
                    radiusX: data.w * 0.5,
                    radiusY: data.h * 0.5,
                    rotation: data.r,
                    fill: "gray",
                    stroke: "black",
                    strokeWidth: 4,
                    draggable: false,
                    listening: true
                } );
                break;

            default:
                shape = new Konva.Rect( {
                    x: 0,
                    y: 0,
                    offsetX: data.w * 0.5,
                    offsetY: data.h * 0.5,
                    width: data.w,
                    height: data.h,
                    rotation: data.r,
                    fill: "gray",
                    stroke: "black",
                    strokeWidth: 4,
                    draggable: false,
                    listening: true
                } );
                break;
        } // End switch

        // Create label
        let label = new Konva.Text( {
            x: data.w * -0.5,
            y: data.h * -0.5,
            width: data.w,
            height: data.h,
            text: data.label,
            fontSize: 24,
            fill: "black",
            align: "center",
            verticalAlign: "middle",
            draggable: false,
            listening: false
        } );

        element.add( shape, label );

        return element;
    }


    // Loop your data and call the creation method for each data item.
    mockData.forEach( itemData => {
        tableLayer.add( createShapeElement( itemData ) );
    } );