Как я могу установить размер рендеринга нестандартного шрифта за пределами экрана canvas в three.js? - PullRequest
Новая
       14

Как я могу установить размер рендеринга нестандартного шрифта за пределами экрана canvas в three.js?

0 голосов
/ 18 сентября 2018

Мне нужно использовать пользовательские шрифты и отображать их на неэкранном холсте, я уже сделал это, но не могу установить размер рендеринга шрифта - в результате получается крошечный рендеринг.

Все источники, которые я видел, включая w3schools.com, developer.mozilla.org и т. Д., Наивно полагают, что мы все используем системные шрифты и определяем размер небрежным образом, смешивая его с именем шрифта как: ctx.font ="30px Arial";

Факт, ̶ что если использовать имя мой пользовательский файл шрифта Размещенные на той же папке ̶ (̶ «̶c̶u̶s̶t̶o̶m̶.̶w̶o̶f̶f̶» ̶) ̶ ̶ (ОШ .otf) ̶ это работает, ̶̶B̶u̶t̶, если я добавлю размер в пикселях или в точках ("30px custom.woff"), который НЕ работает!

К сожалению, другие параметры, такие как вес шрифта, по-видимому, определяются отдельно (говорят о невероятной несогласованности HTML5, которая напоминает нам о прошлом).Итак, есть ли способ изменить размер отрисовки пользовательского шрифта для внеэкранного холста, созданного в JS?

Я создаю закадровый холст следующим образом: 

var offScreenCanvas = document.createElement('canvas');
offScreenCanvas.width = 256;
offScreenCanvas.height = 256;
var ctx = offScreenCanvas.getContext("2d");

позже, я рендерим шрифт так: 

ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
ctx.font = 'custom.woff'; 
ctx.fillStyle = 'white';
ctx.fillRect(0, 0, offScreenCanvas.width, 256);

ctx.fillStyle = 'black';
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.fillText(txt, offScreenCanvas.width / 2, offScreenCanvas.height / 2);

Затем я создаю текстуру этогорендеринг и использование его на поверхности three.js.

three.js r96.0

Замена шрифта в jsfiddle (см. комментарии):

Ответы [ 2 ]

0 голосов
/ 20 сентября 2018

Поскольку я создаю закадровый холст в JS без , предварительно задав его сначала в HTML, потому что я создаю несколько текстур из различных шрифтов на холсте и поскольку я использую размещенные пользовательские шрифтыв папке вместо загрузки шрифтов Google ни одно из предложенных решений не сработало, но оба Gabriele Petrioli и Mugen87 из discourse.threejs.org очень помогли.

Итак, наконец-то все заработало на Firefox, Chrome и Opera.Об IE11 не может быть и речи, так как он в любом случае не поддерживает все функции three.js, поэтому у меня нет оснований вообще его поддерживать (и я не имею никакого представления о браузере Edge, поскольку я до сих пориспользуя Windows 7, но я подозреваю подобные проблемы ...).

1) Предложение Mugen87 ждать загрузки шрифтов было ключевым: 

document.fonts.onloadingdone = function (fontFaceSetEvent) {

   // create canvas and render the font here (see above) 

}

2) Для пользовательских шрифтов в папкев моем случае это сработало:

помещено в стиль или в CSS (формат не обязателен, но рекомендуется): 

  @font-face {
    font-family: 'custom bold';
    src: url('fonts/custom bold.woff') format('woff');
  }
  @font-face {
    font-family: 'custom reg';
    src: url('fonts/custom regular.woff') format('woff');;
  }

3) Для работы в Chrome я обнаружил, что это было ключевымтакже включить семейство шрифтов в стиль тела, но так как я хотел использовать больше шрифтов, чем один (очевидно), я делал это в JS каждый раз, когда мне требовался шрифт, например: 

var fontreg;

fontreg = "custom reg";
document.body.style.fontFamily = fontreg;

ctx.font = "40px " + fontreg;

Надеждаэто тоже помогает кому-то еще.

0 голосов
/ 18 сентября 2018

Вы можете создать правило шрифта CSS и назвать его как хотите.Затем вы можете использовать свое собственное имя. 

<style>
@font-face {
    font-family: 'myfontname';
    src: url('custom.woff');
}
</style>

и затем в вашем скрипте 

ctx.font = '30px myfontname';

Если, как вы говорите, это работает с передачей файла шрифта, попробуйте 

ctx.font = "fontfile.woff";
// most likely you need to wait/check that the font has loaded first and then
ctx.font = ctx.font.replace('(\d+)px', "20px");
...