Как визуализировать текст в .NET в том же размере, что и браузеры с учетом CSS для текста - PullRequest
Новая
       9

Как визуализировать текст в .NET в том же размере, что и браузеры с учетом CSS для текста

4 голосов
/ 27 января 2009

Я пытаюсь создать функцию «сохранить веб-страницу как растровое изображение» на веб-сайте, и у меня возникли некоторые проблемы с отображением текста правильного размера на стороне сервера.

Настройки размера шрифта для текста на клиенте: 

.textDiv
{
    font-family: Verdana;
    font-size:16px;
}

Если я попытаюсь сделать это на сервере с 

float emSize = 16;
g.DrawString("mytext", new Font("Verdana", emSize), Brushes.Black, x, y);

Текст на сервере увеличится примерно на 20%.

Документация для нового Font () говорит, что второй аргумент (размер шрифта) должен быть указан в em-точках. Что такое одна точка-точка?

Если в браузере указать размер шрифта 16em, текст станет ОГРОМНЫМ. Если я укажу размер шрифта: 1em в браузере, текст будет размером около 14px, но если я укажу 1 в качестве аргумента на сервере, текст станет тонкой линией.

Итак, как мне конвертировать из браузера px или em в .net px / em.

Ответы [ 2 ]

3 голосов
/ 27 января 2009

На самом деле, документы говорят «em-size», а не «em-point» («em-размер, в точках, нового шрифта»). Он просит вас указать размер в пунктах. Есть 72 точки на дюйм. Вам нужно выяснить DPI экрана пользователя и DPI холста, на котором вы рисуете, и умножить размер 16px на разницу в этом соотношении.

, например 

(CSS_Font_Size_Pixels * Canvas_DPI) / (User_Screen_DPI * 72) = Equivalent_Point_Size

Вы можете сэкономить математическую операцию, используя перегрузку конструктора Font, которая принимает GraphicUnit и задает Pixels. Таким образом, соответствующий размер будет: 

(CSS_Font_Size_Pixels  / User_Screen_DPI) * Canvas_DPI
0 голосов
/ 27 января 2009

Я немного сбит с толку, потому что вы используете две разные единицы измерения в своем вопросе. Я постараюсь объяснить оба:

PX

Это высота в пикселях. Это должно быть так же просто, как установка шрифта: 

new Font("Verdana", 16F);

EM

Это будет намного сложнее контролировать, потому что это кратно вашей высоте линии. Например, 1em = 14px, затем 16em = (14 * 16) px. Это будет трудно повторить, если вы не знаете высоту вашей строки.

Также в документе говорится следующее

Размер em, в пунктах, нового шрифта.

Таким образом, он определяется в PX или пикселях для используемого вами конструктора. Вы можете попробовать этот конструктор, но EM на самом деле является реализацией браузера / CSS, которая динамически настраивается в соответствии с экраном, почти как Векторы. Где объект Font - это растровое изображение, которое обрабатывает количество пикселей для рисования.

http://msdn.microsoft.com/en-us/library/ms141986.aspx

...