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

我稍微重写了你的创作流程；看起来这样运作良好。这里的本质是将形状+标签组合在一起，并将全局[缩放]位置应用于这些组，而不是单个图形元素。

代码：

   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 ) );

    } );