Nagaraju

Members
  • Content Count

    19
  • Joined

  • Last visited

About Nagaraju

  • Rank
    Member

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

  1. Nagaraju

    Multi-Style text

    Working great. Thank you.
  2. Nagaraju

    Multi-Style text

    I am getting PIXI undefined in pixi-multistyle-text.m.js. I am developing in react. ←→1 of 2 errors on the page Unhandled Rejection (ReferenceError): PIXI is not defined node_modules/pixi-multistyle-text/dist/pixi-multistyle-text.m.js:340 how to add PIXI reference in the library ?
  3. Hello, I have been trying to add underline for text but could not able to get it done. I will also have multi lines of text sometimes. Is there any solution or predefined methods in pixi to achieve this?
  4. Is there any possibility to show video thumbnail image?
  5. Thanks. It is working great. Start Video this.videoTexture.baseTexture.resource.source.play(); Pause Video this.videoTexture.baseTexture.resource.source.pause();
  6. I am using PIXI version 5. In my project, I need to play a video when user hits on preview. I could able to stop auto play but I could not able to start the video on clicking on preview. I have used below line to off auto play texture.baseTexture.resource.autoPlay = false; Here is my code this.appRenderer = new Application({ width: width, height: height, }); this.videoTexture = PIXI.Texture.from(video); this.videoSprite = new PIXI.Sprite(this.videoTexture); this.addChild(this.videoSprite); there is no play function in texture.baseTexture.resource.source.
  7. Thanks ivan 🙂. I have used mask to fix this issue
  8. 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.
  9. I could able to fix this issue. This could be the known answer but it is new to me..😄 var video = document.createElement("video"); let id = "videoPixi"+this.screenData.screenId; video.id = id; video.crossOrigin = "anonymous"; video.src = (this.screenData.background.video.currentUrl); document.body.appendChild(video); var video = document.querySelector("#"+id); //video.preload = 'metadata'; video.preload = 'auto'; video.autoload = true; The above two lines in bold made my day
  10. Hi I am getting empty screen saying an error that (INVALID_VALUE: tex(Sub)Image2D: video visible size is empty) while playing video in chrome V77.038 but playing as many times without any issue in firefox V 69.02.
  11. I initialized like below init = (glBaseElement) => { //Create pixi application instance this.baseElement = glBaseElement; this.ticker = PIXI.Ticker.shared; this.ticker.autoStart = false; this.appRenderer = new PIXI.Application({ width: this.appRendererWidth, height: this.appRendererHeight }); this.imageSlideElementHolder = this.refs[glBaseElement]; this.imageSlideElementHolder.appendChild(this.appRenderer.view); this.mainContainer = new PIXI.Container(); this.appRenderer.stage.addChild(this.mainContainer); this.getAllSlides(); };
  12. I have implemented PIXI application with more containers like containers inside another container. I am adding PIXI.Texture for video and PIXI.Sprite for Image view. Everything working fine for the first time. Whenever I try playing video again by closing and opening page, I can see blank and throwing Uncaught TypeError: Cannot read property 'updateTransform' of null I found somewhere that I need to clear the containers and PIXI.Applications. I am doing like below but could not get it done. try{ if (this.appRenderer != null || this.appRenderer.stage != null) { if(this.ticker.started){ this.ticker.stop(); this.ticker.remove(this.tickSlideRight); this.ticker.destroy(true); } this.mainContainer.children.map((item) =>{ //it contains another container in which video and image functionalities implemented item.destroy(true); }) this.mainContainer.destroy(true); this.imageSlideElementHolder.removeChild(this.appRenderer.view); this.appRenderer.stage.destroy(true); this.appRenderer = null; } }catch(ex){ console.log("Component Unmount, Pixi release ",ex.message) //TO-DO }
  13. Thanks for the quick reply. Working great. I can able to get video duration too...✌️
  14. Thanks for the reply. I could not able to load video element on canvas. I am using below code. <div ref="imageSlide"> </div> var video = document.createElement("video"); video.id = "videoPixi"; video.crossOrigin="anonymous"; video.src = "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"; document.body.appendChild(video); var video = document.querySelector("#videoPixi"); var basetx = new PIXI.BaseTexture.from(video); this.videoTexture = PIXI.Texture.from(basetx);//(this.screenData.background.video.currentUrl); var videoSprite = new PIXI.Sprite(this.videoTexture); videoSprite.width = videoWidth; videoSprite.height = videoHeight; this.addChild(videoSprite); I am getting an error as it is showing in the attachments