• Content count

  • Joined

  • Last visited

  1. PIXI.Text with solid color background

    Thanks a lot man!
  2. hey guys, I'm wondering if there is an easy and efficient way to add background to the PIXI.Text object. For now, my plan is to add a scaled solid color image as background and put them in the right position. Not sure if this is the recommended way. Thanks
  3. Saving PIXI content to Image

    Finally, I hacked the canvas methods and used double buffer to draw a container onto a canvas with background. The below code did the trick: const canvasBuffer = new PIXI.CanvasRenderTarget(width, height); const background = new PIXI.CanvasRenderTarget(width, height); if (textureBuffer) { // bind the buffer renderer.bindRenderTarget(textureBuffer); // set up an array of pixels const webglPixels = new Uint8Array(BYTES_PER_PIXEL * width * height); // read pixels to the array const gl = myRenderer.gl; gl.readPixels( frame.x * resolution, frame.y * resolution, width, height, gl.RGBA, gl.UNSIGNED_BYTE, webglPixels, ); // canvasBuffer.context.fillStyle = 'blue'; background.context.fillStyle = '#' + visConfig.backgroundColor.toString(16); background.context.fillRect(0, 0, width, height); // add the pixels to the canvas const canvasData = canvasBuffer.context.getImageData(0, 0, width, height); canvasData.data.set(webglPixels); // canvasBuffer.context.drawImage(canvasData.data, 0, 0); canvasBuffer.context.putImageData(canvasData, 0, 0); background.context.drawImage(canvasBuffer.canvas, 0, 0); // pulling pixels if (flipY) { background.context.scale(1, -1); background.context.drawImage(background.canvas, 0, -height); } } // send the canvas back.. return background.canvas;
  4. Saving PIXI content to Image

    Well´╝î the root container doesn't actually have a size. As we move the diagram elements around its bounding rectangle changes and the output image size changes. It will be quite verbose if we want to keep a rectangle as the background when diagram shape changes. My thoughts is to hack the WebGLExtract.canvas method to accept a background color parameter and set it as the internal canvas color. Sounds viable?
  5. Saving PIXI content to Image

    Wow. This really worked! I'm able to save the whole diagram as image with this solution. Two remaining issues: The root container that holds all the diagram elements are transparent, the background color is set on the renderer. So the exported images have transparent background. which is weird. Also, the image is a little blurry. Not sure how I can fix them. Their seems no background color property on the Container class.
  6. Does pixi have native SVG support

    well, I think it has two folds. PIXI could render svg image and use it as Sprite texture. But, AFAIK, under the cover it renders that svg onto canvas and clip the canvas as image for texture use. So, yes it support svg, but the current implementation isn't so "NATIVE"
  7. Saving PIXI content to Image

    Guys, We recently have new requirement that we need to save the content we rendered with pixi.js to image file like PNG. The canvas's toDataURL method worked well at first, however we need more than that. The content (a diagram) could be zoomed and the canvas only shows part of that diagram at the time we save the image. Also, if we zoom out and try to capture the whole diagram, the output diagram seems not so crisp, or sharp. Hope I've made my self clear. So, my question is whether their is a way to export the whole content image with desired resolution? BR, Yeling
  8. @OlegVolkov We went with pixijs. But didn't customize too much. End up with about ~5k sprites and ~10k links(curves).
  9. Thanks, will try that out and post back my results.
  10. But d3 is rendering with SVG, right? I'm afraid that too many elements would make the DOM heavy. But I could take a try though.
  11. hi Folks, I am new to here and I'm trying to find out whether pixijs could be a good choice for me. What I need to do is render a possibly very large graph on the canvas, like the attached picture shows. As a bottom line, I need to draw like thousands of vertices and maybe 4-10 times of that many edges on the canvas and still stay responsive to user actions like panning around, zooming and selecting nodes and moving nodes around( the attached edge should be updated while moving). Other stuff like highlight and scale some vertex/edge I think should be trivial. No layout computing is required. The graph layout is calculated in advance. I've tried some other frameworks like fabricjs and echarts. They could not handle more than 1000 vertices. My questions is pixijs suitable for such task? And can I achieve the performance goal with reasonable amount of tweaks? Thanks in advance!