亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

KonvaJS 始終將文本置于標簽中心

KonvaJS 始終將文本置于標簽中心

弒天下 2023-10-14 18:13:45
我對代碼表示歉意,它處于我正在積極使用的狀態。在 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 ;           這是視覺結果
查看完整描述

1 回答

?
慕田峪7331174

TA貢獻1828條經驗 獲得超13個贊

我稍微重寫了你的創作流程;看起來這樣運作良好。這里的本質是將形狀+標簽組合在一起,并將全局[縮放]位置應用于這些組,而不是單個圖形元素。

代碼:

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

    } );


查看完整回答
反對 回復 2023-10-14
  • 1 回答
  • 0 關注
  • 178 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號