How can I translate the contents of a Pixi DisplayObjectContainer and crop it?

[tieTYT]

I wrote some working html5 canvas code that is responsible for rendering a scrollbar.  The way it does this is by:

1. Creating a sub canvas (the variable `containerCanvas`)
2. Translating the offset of that canvas so the content is shifted based on where the scroll bars are at. 

 

  I thought that DisplayObjectContainer would be the object to use, but I don't see any functions to translate its content.  That made me think that maybe I should be using a TilingSprite since it has the ability to translate, but I don't know how to turn arbitrary `DisplayObject`'s into a Texture, which is what the `TilingSprite` needs.

3. Draw that canvas - as an image - onto the parent canvas (the variable `ctx`).  This crops the sub canvas' content to the containers' (0, 0, w, h).  Since the content has already been translated, this only draws what should be seen.  I've done some tests and seen that Pixi will happily render child `DisplayObjects` that are out of bounds of their parent, so I'm not sure how to crop the content.

Here's the coffeescript:

    drawContainer = (ctx, gameState, container, offset) ->      containerCanvas = $("<canvas width='#{container.rect.w}' height='#{container.rect.h}'></canvas>")      containerCanvasCtx = containerCanvas[0].getContext("2d")      containerCanvasCtx.translate(-container.scrollOffset.x, -container.scrollOffset.y) # how do I achieve this?      for innerComponent in container.components        drawComponent containerCanvasCtx, gameState, innerComponent, vec(0, 0)      rect = container.rect      ctx.drawImage(containerCanvas[0], offset.x + rect.x, offset.y + rect.y)      drawScrollbars(ctx, container, offset)

Here's the generated javascript:
 

      drawContainer = function(ctx, gameState, container, offset) {        var containerCanvas, containerCanvasCtx, innerComponent, rect, _i, _len, _ref;        containerCanvas = $("<canvas width='" + container.rect.w + "' height='" + container.rect.h + "'></canvas>");        containerCanvasCtx = containerCanvas[0].getContext("2d");        containerCanvasCtx.translate(-container.scrollOffset.x, -container.scrollOffset.y); //how do I achieve this?        _ref = container.components;        for (_i = 0, _len = _ref.length; _i < _len; _i++) {          innerComponent = _ref[_i];          drawComponent(containerCanvasCtx, gameState, innerComponent, vec(0, 0));        }        rect = container.rect;        ctx.drawImage(containerCanvas[0], offset.x + rect.x, offset.y + rect.y);        return drawScrollbars(ctx, container, offset);      };

[xdiepx]

You could try masking your image if you want to crop it http://www.goodboydigital.com/pixijs/examples/14/

[d13]

> I don't know how to turn arbitrary `DisplayObject`'s into a Texture, which is what the `TilingSprite` needs.

 

Did you try generateTexture()?

 

http://www.goodboydigital.com/pixi-1-5-2-webgl-canvas-renderer/