Jump to content

hack : making all 2D drawing functions available to PIXI


Recommended Posts

First I would like to thank you for this awesome rendering engine :) I'm using it to write a mobile gameto test it's performance and everything is going just fine now :)
one of my needs was to use 2D context drawing routines (arc, bezier, rect ....etc) witch are not available in PIXI since WebGL don't provide such functions.
for people like me who need those methods I have a three lines code that make all this available inside PIXI context :)
here is the code :

        PIXI.Texture.Draw = function (cb) {            var canvas = document.createElement('canvas');            if (typeof cb == 'function') cb(canvas);            return PIXI.Texture.fromCanvas(canvas);        } 

this will add the Draw method to PIXI.Texture  namespace, now suppose you had this code that load a texture from image.

var stage = new PIXI.Stage(0xffffff);var sprite = new PIXI.Sprite(PIXI.Texture.fromImage("sprite.png"));stage.addChild(sprite); 


now you want to dynamically draw your own sprite for some reason, here is how you use Draw() method

var stage = new PIXI.Stage(0xffffff);//drawing a red circle and use it as a PIXI spritevar sprite = new PIXI.Sprite(PIXI.Texture.Draw(function (canvas) {    //we are now in a 2D context     var r = 10; //radius    canvas.width = r * 2;   //you need to specify your canvas width and height otherwise it'll have a size of 0x0 and you'll get an empty sprite    canvas.height = r * 2;    var ctx = canvas.getContext('2d');  //get  canvas 2D context    ctx.fillStyle = 'rgb(255, 0, 0)';    ctx.beginPath();    ctx.arc(r, r, r, 0, Math.PI * 2, true);    ctx.closePath();    ctx.fill();}));stage.addChild(sprite); 


hope it'll help :)
PS : I don't know if such addition have it's place in the official repository to make a pull request or suggest it as a simple hack ...

Link to comment
Share on other sites

Hi Ezilia,


Looks like a cool fix for now!


I definitely plan on including support for primitive drawing in pixi.js soon as its clearly an important part of the what a rendering engine should do. I have a few other features I'm working on at the moment and once they are done I can move onto primitive drawing, ensuring that it works with both webGL and Canvas renderers. 

Link to comment
Share on other sites

  • 2 years later...
  • 1 month later...

No longer works - I get TypeError: PIXI.Texture.Draw is not a function now. Any way to get this to work?


Maybe you missed the definition above:


PIXI.Texture.Draw = function (cb) {   var canvas = document.createElement('canvas');   if (typeof cb == 'function') cb(canvas);   return PIXI.Texture.fromCanvas(canvas); }
@xerver, I found a variant of this useful for setting pixels. 5X faster than drawing 1px rectangles.
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...