0

我真的很难使用 jquery 和 box2dweb 将图像添加到形状中。我的代码基于此处的一个很好的示例：http: //henry.brown.name/experiments/box2d/bricks.php
，图像绑定取自此处： http: //www.jeremyhubble.com/box2d.html

我在下面粘贴了名为 createObject 的函数，并在评论中标记了我的添加。我正在使用用户数据传递 src，然后回顾性地添加图像，但我似乎无法让图像出现。我也没有收到任何错误消息。

function createObject(mouseX,mouseY,width,height,gravity){
    bodyDef.type = b2Body.b2_dynamicBody;
    bodyDef.position.Set(mouseX, mouseY);
    bodyDef.angle = 0;
    bodyDef.userData = {
        'width':width,
        'height':height,
        'gravity':gravity,
        'imgsrc':'images/logo.png',
        'imgsize': '16',
        'bodysize': '5'
    }   
    fixDef.shape = new b2PolygonShape;
    fixDef.shape.SetAsBox(
        width / 2, // Math.random() + 0.1 //half width
        height / 2  // Math.random() + 0.1 //half height
    );
    var body = world.CreateBody(bodyDef).CreateFixture(fixDef);

    //custom code starts
    var canvaselem = document.getElementById("canvas");
    var context = canvaselem.getContext("2d");
    var canvaswidth = canvaselem.width-0;
    var canvasheight = canvaselem.height-0;

    var bodies = world.GetBodyList();
    var bodyCount = world.GetBodyCount();
    for(var i = 0; i < bodyCount; i++){
        var thisbody = bodies.GetUserData();
        if(thisbody){
            if(thisbody.imgsrc){
                console.log(thisbody);
                // This "image" body destroys polygons that it contacts
                var edge = bodies.GetContactList();
                while (edge)  {
                    var other = edge.other;
                    if (other.GetType() == b2Body.b2_dynamicBody) {
                        var othershape = other.GetFixtureList().GetShape();
                        if (othershape.GetType() == body.e_polygonShape) {
                            world.DestroyBody(other);
                            break;  
                         }
                     }
                     edge = edge.next;
                }

                var position = bodies.GetPosition();
                var flipy = canvasheight - position.y;
                var size =thisbody.imgsize;
                var imgObj = new Image(size,size);
                imgObj.src = thisbody.imgsrc;
                context.save();
                context.translate(position.x,flipy); 
                context.rotate(bodies.GetAngle());
                alert(bodies.GetAngle());
                var s2 = -1*(size/2);
                var scale = thisbody.bodysize/-s2;
                context.scale(scale,scale);
                context.drawImage(imgObj,s2,s2);
                context.restore();
            }
        }
        bodies = bodies.GetNext();                                       
    }
            //custom code ends

}

我在 chrome 中的控制台输出：

Object {width: 1, height: 2, gravity: 0, imgsrc: "images/anm.png", imgsize: "16"…}
 bodysize: "5"
 gravity: 0
 height: 2
 imgsize: "16"
 imgsrc: "images/anm.png"
 width: 1
 __proto__: Object

任何帮助表示赞赏:)

4

2 回答 2

0

给你，这个例子是一个圆圈。

选项卡数组包含所有 box2D 对象，这里只有圆圈

function()DisplayImagesOnCircles(tab){
   for(var i=0; i < tab.length; i++){ //check all the game items
      context.save();
     //30 is your worldscale. Get position of bodies
      context.translate(tab[i].GetBody().GetPosition().x * 30, tab[i].GetBody().GetPosition().y * 30); 
     //get the angles of all the bodies
      context.rotate(tab[i].GetBody().GetAngle());
     //the 60 here is 2 times your worldscale. Get the radius of the circles
      var radius = tab[i].m_shape.m_radius* 60;
     //draw image
      context.drawImage(img, -radius/2, -radius/2 , radius, radius);
      context.restore();
}

我所做的只是根据球的位置移动上下文。我在循环中执行此代码。

如果其他人需要使用矩形/正方形/圆形的功能，请随时与我联系。

于 2013-12-10T15:00:34.850 回答
0

我建议将 Easel.js 与 Box2DWeb 一起使用。我刚刚开始使用两者，并且已经启动并运行。请注意，如果您来自 Flash 环境，Easel 特别直观，但无论哪种方式，我都认为它是一个很棒的 Canvas 框架。

Here's a great video to start learing how to combine the two. Part 1 http://gotoandlearn.com/play.php?id=176

Part 2 http://gotoandlearn.com/play.php?id=177

于 2014-02-26T04:00:48.357 回答