這可能只是數(shù)學(xué)。我使用 Konva 動(dòng)態(tài)生成形狀,并將其存儲(chǔ)為標(biāo)簽。因此有一個(gè)標(biāo)簽包含一個(gè) textElement 和一個(gè)矩形。我想確保該矩形中的文本始終a)水平和垂直居中,b)朝上。因此,矩形可以進(jìn)行任何旋轉(zhuǎn),但我總是希望文本居中且朝上。創(chuàng)建代碼;寬度、高度、旋轉(zhuǎn)、x 和 y 都有從數(shù)據(jù)庫(kù)中提取的值。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);問(wèn)題是,如果旋轉(zhuǎn)到位,文本就會(huì)偏離中心,如下圖所示:在某些情況下,我會(huì)手動(dòng)更正 - 例如,如果旋轉(zhuǎn) = 45 度:pos_x = -tableWidth/2;
pos_y = tableHeight/5;但這并不是永久的解決辦法。我希望文本的 x 和 y 坐標(biāo)位于形狀本身的中心點(diǎn)。我嘗試了幾種方法(例如對(duì)標(biāo)簽本身應(yīng)用旋轉(zhuǎn),然后對(duì)文本應(yīng)用負(fù)旋轉(zhuǎn)值)
旋轉(zhuǎn)一組包含文本的形狀,同時(shí)保持文本居中和水平
慕哥6287543
2023-08-10 15:46:42