Nagaraju Posted November 25, 2019 Share Posted November 25, 2019 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. Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted November 25, 2019 Share Posted November 25, 2019 (edited) 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 Quote Link to comment Share on other sites More sharing options...
Nagaraju Posted November 25, 2019 Author Share Posted November 25, 2019 Thanks ivan ?. I have used mask to fix this issue Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.