Jump to content

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


Recommended Posts

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);      };
Link to comment
Share on other sites

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.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...