PhysicsJS и растровое изображение

Question

Существует новая библиотека физики http://wellcaffeinated.net/PhysicsJS/ Я бы хотел поиграть с ней и использовать растровое изображение вместо «canvas path». Существует эта функция в https://github.com/wellcaffeinated/PhysicsJS/blob/master/examples/physicsjs-full.js

drawCircle: function(x, y, r, styles, ctx){ 

      ctx = ctx || this.ctx; 

      ctx.beginPath(); 
      this.setStyle(styles, ctx); 
      ctx.arc(x, y, r, 0, Pi2, false); 
      ctx.closePath(); 
      ctx.stroke(); 
      ctx.fill(); 
      /* 

      var i = new Image(); 
      i.src = "http://www.pngfactory.net/_png/_thumb/19626-bubka-R2D2.png"; 
      i.onload = function() { 
      console.log("load"); 
      ctx.drawImage(i, 0, 0); 
      }; 
      */ 
    } 

Но когда я добавляю IMG в холст, img.src и нагрузки; ничего не происходит ...

Вот "официальный" jsfiddle http://jsfiddle.net/wellcaffeinated/KkDb6/ и вики https://github.com/wellcaffeinated/PhysicsJS/wiki/Fundamentals

Answer 1

Вот решение сделано автором PhysicsJS: http://jsfiddle.net/wellcaffeinated/mpbNF/

/** 
* PhysicsJS by Jasper Palfree <wellcaffeinated.net> 
* http://wellcaffeinated.net/PhysicsJS 
* 
* Simple Spin example for PhysicsJS 
*/ 
Physics(function(world){ 

    var viewWidth = 500; 
    var viewHeight = 300; 

    var renderer = Physics.renderer('canvas', { 
     el: 'viewport', 
     width: viewWidth, 
     height: viewHeight, 
     meta: false, // don't display meta data 
     styles: { 
      // set colors for the circle bodies 
      'circle' : { 
       strokeStyle: 'hsla(60, 37%, 17%, 1)', 
       lineWidth: 1, 
       fillStyle: 'hsla(60, 37%, 57%, 0.8)', 
       angleIndicator: 'hsla(60, 37%, 17%, 0.4)' 
      } 
     } 
    }); 

    // add the renderer 
    world.add(renderer); 
    // render on each step 
    world.subscribe('step', function(){ 
     world.render(); 
    }); 

    // bounds of the window 
    var viewportBounds = Physics.aabb(0, 0, viewWidth, viewHeight); 

    // constrain objects to these bounds 
    world.add(Physics.behavior('edge-collision-detection', { 
     aabb: viewportBounds, 
     restitution: 0.99, 
     cof: 0.99 
    })); 

    Physics.body('wheel', 'circle', function(parent){ 

     return { 
      // no need for an init 

      // spin the wheel at desired speed 
      spin: function(speed){ 
       // the wheels are spinning... 
       this.state.angular.vel = speed; 
      } 
     }; 
    }); 

    var myWheel = Physics.body('wheel', { 
     x: 40, 
     y: 30, 
     radius: 45 
    }); 

    // Not a hack 
    myWheel.view = new Image(); 
    myWheel.view.src = 'http://www.large-icons.com/stock-icons/free-large-twitter/round_button-icon.gif'; 

    world.add(myWheel); 

    // for example, use jquery to listen for a button click, and spin the wheel on the next step 
    $('button').on('click', function(){ 
     // wait for the next step before spinning the wheel 
     world.subscribe('step', function(data){ 
      myWheel.spin(0.03); 
      // only execute callback once 
      world.unsubscribe('step', data.handler); 
     }); 
    }); 

    // ensure objects bounce when edge collision is detected 
    world.add(Physics.behavior('body-impulse-response')); 

    // add some gravity 
    world.add(Physics.behavior('constant-acceleration')); 

    // subscribe to ticker to advance the simulation 
    Physics.util.ticker.subscribe(function(time, dt){ 

     world.step(time); 
    }); 

    // start the ticker 
    Physics.util.ticker.start(); 

});