in pixijs, many fonts get cut off when you curve them

[seafarer111]

hello, pixijs @experts
im building the curve text tool using pixijs, but when curve text, the bounds get cut off for many fonts.
please help me to prevent this issues

[bigtimebuddy]

How are you curving the text?

[seafarer111]

Hello. Thanks for your reply.
I have checked your profile and it looks like you are Co-owner of PixiJS. :) Really Happy to meet you!!!
This is my code.

   const curveRadian = Math.abs(curve) * (Math.PI / 180);
   const circumference = (360 / Math.abs(curve)) * object.width;
   const radius = circumference / (2 * Math.PI);
   const startDegree = (curve > 0 ? Math.PI : Math.PI * 2) - curveRadian / 2;
   const degreeIncrement = curveRadian / 100;
   let points = [];
   for (let i = 0; i <= curveRadian; i += degreeIncrement) {
     let degree = startDegree + i;
     let radian = degree;
     radian = radian + Math.PI / 2;
     if (degree > 2 * Math.PI) degree = degree - 2 * Math.PI;
     points.push(
       new PIXI.Point(Math.cos(radian) * radius, Math.sin(radian) * radius)
     );
   }
   if (curve < 0) points = points.reverse();
   const container = new PIXI.Container();
   const rope = new PIXI.mesh.Rope(object.texture, points);
   container.addChild(rope);
   const bounds = container.getLocalBounds();
   const matrix = new PIXI.Matrix();
   matrix.tx = -bounds.x;
   matrix.ty = -bounds.y;
   const renderTexture = PIXI.RenderTexture.create(
     bounds.width,
     bounds.height
   );
   window.editor
     .getRenderer()
     .render(container, renderTexture, true, matrix, false);
   const sprite = PIXI.Sprite.from(renderTexture);
   sprite.position.set(object.x, object.y);
   if (object.curveSprite)
     window.editor.getStickerContainer().removeChild(object.curveSprite);
   sprite.id = JSONUtils.guid();
   sprite.childId = object.id;
   sprite.curveSprite = true;
   sprite.interactive = true;
   sprite.buttonMode = true;
   sprite.anchor.set(0.5);
   stickerContainer.addChild(sprite);
   object.curveSprite = sprite;

Please help me for this urgent issue. Thanks in advance.

[talhaozdemir]

import { Container, Matrix, Point, SimpleRope, Text } from 'pixi.js';

export default class CurvedText extends Container {
    constructor(txt, style) {
        super();
        var text = new Text(txt, style);
        text.resolution = 1;
        text.style.trim = true;
        text.updateText();

        var radius = 256; // PLAY WITH THIS VALUE
        var maxRopePoints = 100;
        var step = Math.PI / maxRopePoints;

        var ropePoints = maxRopePoints - Math.round((text.texture.width / (radius * Math.PI)) * maxRopePoints);
        ropePoints /= 2;

        var points = [];
        for (var i = maxRopePoints - ropePoints; i > ropePoints; i--) {
            var x = radius * Math.cos(step * i);
            var y = radius * Math.sin(step * i);
            points.push(new Point(x, -y));
        }

        var rope = new SimpleRope(text.texture, points);
        this.addChild(rope);
        var bounds = this.getLocalBounds();
        var matrix = new Matrix();
        matrix.tx = -bounds.x;
        matrix.ty = -bounds.y;
    }
}

//// *** USAGE *** ////
// const cont = new CurvedText(
//     "YOU WIN!",
//     {
//         fontFamily: "ui-font",
//         fontSize: 64,
//         fill: "#000000",
//     }
// );
// app.stage.addChild(cont);

I handle curving text like this, I hope it helps.

[talhaozdemir]

You can try adding padding property to TextStyle for the text in your case. it may solve cut off issue.

For example;

{
 fontFamily: "Arial",
 fontSize: 64,
 padding: 10
}