這可能只是數學。我使用 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 坐標位于形狀本身的中心點。我嘗試了幾種方法(例如對標簽本身應用旋轉,然后對文本應用負旋轉值)
旋轉一組包含文本的形狀,同時保持文本居中和水平
慕哥6287543
2023-08-10 15:46:42