javascript - 物理JS和位图

Question

有一个新的物理库http://wellcaffeinated.net/PhysicsJS/ 我想玩它并使用位图而不是“画布路径”。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 和 load ; 什么都没有发生……</p>

这是一个“官方” 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();

});