how to hide overflow text in container

[Nagaraju]

I am working on displaying a text with background color in pixi.  I could not able to hide overflow text (see attached) .  I have added bit of related code below. Please someone help me!!

renderer(){

let style = {

breakWords: true,

wordWrap: true,

align: "center",

dropShadowAngle: 0,

dropShadowDistance: 0,

fill: textColor, //Text color

stroke: textColor, //Text color,

fontSize: textSize + "px",

fontFamily: fontFamily != null ? fontFamily : "Arial", //TODO

fontWeight: fontStyle == "bold" ? fontStyle : "normal", //TODO

fontStyle: fontStyle == "italic" ? fontStyle : "normal", //TODO

align: "center",

wordWrap: true,

cacheAsBitmap: true, // for better performance

wordWrapWidth: this.textWidth != null ? parseInt(this.textWidth) : ""

};

 

let textPIXI = new PIXI.Text(textName, style);

this.setTextPosition(textPIXI, textBackgroundColor, textDimensions);

 

 

}

 

setTextPosition(textPIXI, textBackgroundColor, textDimensions) {

if (Object.keys(textDimensions).length > 0) {

const textBackgroundGraphics = new PIXI.Graphics();

 

// Rectangle

textBackgroundGraphics.beginFill(

PIXI.utils.string2hex(textBackgroundColor)

);

 

textPIXI.x = this.textPosX + (this.textWidth/2 - textPIXI.width/2);

textPIXI.y = this.textPosY + (this.textHeight/2 - textPIXI.height/2);;

 

textBackgroundGraphics.drawRect(

this.textPosX,

this.textPosY,

this.textWidth,

this.textHeight

);

textBackgroundGraphics.endFill();

 

//Add text and backgroundcolor to the container

this.addChild(textBackgroundGraphics, textPIXI);

}

}

 

I want to hide which is outside of the box.

[ivan.popelyshev]

If you know how to use html5 canvas 2d context, you can just look inside Text class and patch it, or find already existing feature:

https://github.com/pixijs/pixi.js/blob/dev/packages/text/src/Text.js#L324

https://github.com/pixijs/pixi.js/blob/dev/packages/text/src/Text.js#L128

In general, you can just apply a Graphics mask to container with that size. Look up how masks are done in pixi: https://pixijs.io/examples/#/masks/graphics.js

If your brain is already exploding, put your example to codepen/jsfiddle or pixi-playground, post it here, and wait for someone to fix it.

Edited November 25, 2019 by ivan.popelyshev

[Nagaraju]

Thanks ivan  ?. I have used mask to fix this issue