Есть curved text, который рендерится с помощью Konva.TextPath:
const konvaText = new Konva.TextPath({
text: 'Community',
fontSize: 160,
fontFamily: 'AgencyFB',
fill: 'blue',
stroke: 'yellow',
strokeThickness: 1,
align: 'center',
letterSpacing: 17 * 4,
data: 'M 31.2 -116 A 416 320 0 1 1 88.4 -108',
});
konvaText.toImage({
callback: (sprite) => {
const pixiSprite = new PIXI.Sprite(new PIXI.Texture(new PIXI.BaseTexture(sprite)));
const preview = new PIXI.Application({ width: 1500, height: 600 });
preview.stage.addChild(pixiSprite);
document.querySelector('body').prepend(preview.view);
}
});
В браузере шрифт превращается в стандартный times new roman, буквы начинают плясать, весь текст сдвигается, и выглядит это так:
Самое странное, если постоянно нажимать f5, то примерно 1 случай из 10 заканчивается правильным рендером:
Вот так добавлял шрифт:
@font-face {
font-family: "AgencyFB";
src: url("assets/fonts/AgencyFB.ttf") format("truetype");
}
Как это исправить?