Как измерить ширину строки в SVG перед созданием фактического элемента SVG (в Angular) - PullRequest
Новая
       1

Как измерить ширину строки в SVG перед созданием фактического элемента SVG (в Angular)

0 голосов
/ 13 декабря 2018

Я хочу создать элемент SVG, который включает в себя список узлов, каждый узел представляет собой прямоугольник с текстом внутри: 

<svg class="chart" width="420" height="150" aria-labelledby="title" role="img">
            <ng-container *ngFor="let item of listNode">
                <g viewBox="0 0 56 18">
                    <rect [attr.width]="item.w" [attr.height]="2*item.h"  fill="white"></rect>

                    <text [attr.x]="item.x" [attr.y]="item.y" text-anchor="middle" font-family="Meiryo" font-size="item.h"
                        fill="black">{{item.label}}</text>
                </g>
            </ng-container>
        </svg>

Но я хочу, чтобы текст находился в центре прямоугольника(как вертикально, так и горизонтально).Чтобы сделать это, я думаю, мне нужно измерить ширину текста перед созданием элемента SVG.Я попытался использовать следующую функцию для измерения размера текста: 

getTextWidth(text, fontSize, fontFace) {
    var canvas = document.createElement('canvas');
    var context = canvas.getContext('2d');
    context.font = fontSize + 'px ' + fontFace;
    return context.measureText(text).width;
  }

Но результат не правильный.Итак, есть ли способ измерить размер текстового элемента SVG перед созданием реального элемента (например, моя функция getTextWidth), или есть какой-либо другой способ создать прямоугольник с текстом точно в центре.

1 Ответ

0 голосов
/ 13 декабря 2018

Есть много способов измерить ширину и высоту текста, но если у вас есть сам текст и его свойства шрифта, он у вас уже есть.

1) Предположим, вы не хотите выполнять математику, вы можете использовать HTMLElement свойства. 

<!DOCTYPE html>
<head>
  <meta charset="UTF-8">
</head>
<body>
  <script>
    const span = document.createElement('span')
    document.body.append(span)
    span.style = 'font-family: Arial; font-size: 14px'
    span.innerHTML = 'TEXT' 
    document.body.textContent = 
      `width: ${span.offsetWidth} height: ${span.offsetHeight}`
    span.remove()
  </script>
</body>
</html>

Примечание: не забудьте добавить свой элемент.

2) Используйте эти размеры, чтобы установить размеры прямоугольника (добавьте дополнительные, если вы хотите заполнить) и установите текст в середине следующим образом: 

<text 
    style="font-family: Arial; font-size: 14px" 
    x="50%" 
    y="50%" 
    dominant-baseline="middle" 
    text-anchor="middle">TEXT</text>

Примечание: используйте всегда один и тот же стиль в вашем тексте.

Надеюсь, эта помощь:)

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...