Как лучше всего изменить семейство шрифтов CanvasRenderingContext2D.font, не влияя ни на что другое? - PullRequest
Новая
       19

Как лучше всего изменить семейство шрифтов CanvasRenderingContext2D.font, не влияя ни на что другое?

0 голосов
/ 28 мая 2020

В настоящее время я создаю игру, используя Javascript и HTML холст.

Я столкнулся с проблемой, когда создавал функцию для изменения семейства шрифтов CanvasRenderingContext2D.font, не меняя ничего другого . Моя функция выглядит так. 

function font(ctx, fontName='sans-serif') {
    /* 
    consider cases where ctx.font is in form:
        '10px Arial', '10px 10px', '10px "Arial Arial"', '10px' 
    */

    ctx.font = ctx.font.split('px')[0] + 'px ' + fontName;
    return ctx.font; // ignore this part
}

Я хочу сделать эту функцию применимой к любой ситуации.

Проблема в том, что я не уверен, что эта функция справится с любыми ситуация.

И мой вопрос такой: Есть ли шанс, что CanvasRenderingContext2D.font не примет форму '... [font size]px [font family]'? Потому что в противном случае моя функция будет определенно сломаться (например, если она может быть в форме '... [font size]px [font family] ...', часть после семейства шрифтов будет полностью удалена)

И это дополнительно, но кто-нибудь знает, как лучше всего установить семейство шрифтов CanvasRenderingContext2D.font, не влияя ни на что другое? Я пробовал искать, но не нашел ответа. Спасибо :)

(PS Я почти уверен, что SOF - подходящее место, чтобы опубликовать это, а не обзор кода, извините, если я ошибаюсь!)

1 Ответ

0 голосов
/ 28 мая 2020

Есть ли вероятность, что CanvasRenderingContext2D.font не примет форму '... [размер шрифта] px [семейство шрифтов]'?

Да, вы вполне можете размер шрифта установлен на значение, отличное от px: 

const ctx = document.createElement('canvas').getContext('2d');
ctx.font = "1cm sans-serif";
console.log( ctx.font );

Для синтаксического анализа сокращенного свойства font лучшим, вероятно, будет CSSOM.

Вы можете использовать фиктивный элемент HTML, установите его .style.font до значения font ctx, а затем лучше контролировать каждый компонент: 

const ctx = document.createElement('canvas').getContext('2d');
ctx.font = "bold 1em sans-serif";

function editFontFamily( short, new_value ) {
  const dummy_el = document.createElement('i');
  const style = dummy_el.style; 
  style.font = short;
  style.fontFamily = new_value;
  const new_short = [ "font-style", "font-variant", "font-weight", "font-stretch", "font-size", "font-family" ]
    .map( (long) => style[ long ] );
  return new_short.join( " " );
}

ctx.font = editFontFamily( ctx.font, "myOwnFontFamily" );
console.log( ctx.font );

Теперь, если вы полностью отвечаете за то, что контролирует ваш контекст (а вы должны это делать), было бы намного лучше просто хранить каждый компонент в своих собственных переменных и обновите их по мере необходимости.

...