HTML - Mapa de imágen - mostrar solo ubicado

   
Vista:
Imágen de perfil de Fabián

Mapa de imágen - mostrar solo ubicado

Publicado por Fabián fchancaygentle@hotmail.com (2 intervenciones) el 22/11/2015 20:25:00
Tengo un problema, ¿Cómo puedo hacer yo, para mostrar en las figuras geometricas solo cierto especificado sector de la imagen pero Random, en en este canvas ?

Me hago explicar, Estoy trabajando en canvas con una API (Box2dWeb-2.1.a.3.min.js)Tengo una imágen que contiene pequeñas imagenes con fondos transparentes alineados en 8x2 y quiero que estas aparezcan al azar en en cada cajita 2D pero solo logro que aparezca la imagen complet y aparecen de forma alineada Mi objetivo es hacerlas independiente. Sé que necesito un FOR para esto; pero no puedo componer la sintaxis correcta para hacerlo, sin embargo tengo las coordenadas que adjuntaré aquí, realizado en un tag map img

Aquí esta todo el código Del index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <canvas id="canvas" width="1024" height="700" />
 
    <!-- Get this from the box2dweb project site -->
    <script type="text/javascript" src="Box2dWeb-2.1.a.3.min.js"></script>
 
    <script type="text/javascript">
    var CANVAS_WIDTH = 1024, CANVAS_HEIGHT = 700, SCALE = 30;
 
    var b2Vec2 = Box2D.Common.Math.b2Vec2
            , b2BodyDef = Box2D.Dynamics.b2BodyDef
            , b2Body = Box2D.Dynamics.b2Body
            , b2FixtureDef = Box2D.Dynamics.b2FixtureDef
            , b2Fixture = Box2D.Dynamics.b2Fixture
            , b2World = Box2D.Dynamics.b2World
            , b2MassData = Box2D.Collision.Shapes.b2MassData
            , b2PolygonShape = Box2D.Collision.Shapes.b2PolygonShape
            , b2CircleShape = Box2D.Collision.Shapes.b2CircleShape
            , b2DebugDraw = Box2D.Dynamics.b2DebugDraw;
 
    var canvas = document.getElementById("canvas");
    var context = canvas.getContext("2d");
 
    var world = new b2World(new b2Vec2(0, 2), true);
 
    // Create some objects in the world
    var fixDef = new b2FixtureDef();
    fixDef.density = 1.0;
    fixDef.friction = 0.5;
    fixDef.restitution = 1;
    var bodyDef = new b2BodyDef();
 
    for (var i = 0; i < 300; i++) {
        bodyDef.type = b2Body.b2_dynamicBody;
        bodyDef.position.Set((Math.random() * 400) / SCALE, (Math.random() * 400) / SCALE);
        bodyDef.linearVelocity.Set((Math.random() * 12) + 2, (Math.random() * 12) + 2);
 
        fixDef.shape = new b2PolygonShape();
        fixDef.shape.SetAsBox(25 / SCALE, 25 / SCALE);
        world.CreateBody(bodyDef).CreateFixture(fixDef);
    }
 
    // This is where you load the image data - make it a 50px x 50px image
    // You should use some sort of pre-loader to make sure the image is loaded prior to 
    // using it.
    var image = new Image();
    image.src = "image.png";
 
    // Set up the game loop - you might want to look into using window.requestAnimationFrame
    // or some variation of that.
    window.setInterval(gameLoop, 1000 / 60);
 
 
 
    function gameLoop() {
        // Update the box2d world
        world.Step(1 / 60, 8, 3);
        world.ClearForces();
 
        context.clearRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
 
        for (b = world.GetBodyList() ; b; b = b.GetNext()) {
            if (b.GetType() == b2Body.b2_dynamicBody) {
                var pos = b.GetPosition();
 
                context.save();
                context.translate(pos.x * SCALE, pos.y * SCALE);
                context.rotate(b.GetAngle());
                context.drawImage(image, -25, -25);
                context.restore();
 
 
            }
        }
 
    }
 
    </script>
</body>
</html>

Luego de esto necesitan el archivo Del Script Box2dWeb-2.1.a.3.min.js



Esta es la parte donde dibuja la imágen el la figura independiente del canvas
1
context.drawImage(image, -25, -25);
Esta en el index.html
y este es el código para declarar la imagen que se va a utilizar:
1
2
var image = new Image();
    image.src = "image.png";
Ubicada en el HTML mismo.

las coordenadas de la imagen de cada una de ella:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<img src="url/to/your/image.jpg" alt="" usemap="#Map" />
<map name="Map" id="Map">
    <area alt="" title="" href="#" shape="rect" coords="0,3,219,179" />
    <area alt="" title="" href="#" shape="rect" coords="220,3,489,173" />
    <area alt="" title="" href="#" shape="rect" coords="492,4,744,159" />
    <area alt="" title="" href="#" shape="rect" coords="749,5,1017,150" />
    <area alt="" title="" href="#" shape="rect" coords="1023,6,1268,147" />
    <area alt="" title="" href="#" shape="rect" coords="1272,7,1558,158" />
    <area alt="" title="" href="#" shape="rect" coords="1562,8,1791,156" />
    <area alt="" title="" href="#" shape="rect" coords="1795,7,2013,151" />
    <area alt="" title="" href="#" shape="rect" coords="2,184,216,342" />
    <area alt="" title="" href="#" shape="rect" coords="224,185,496,340" />
    <area alt="" title="" href="#" shape="rect" coords="501,186,751,336" />
    <area alt="" title="" href="#" shape="rect" coords="756,187,1018,340" />
</map>

Les agradecería sus respuestas :=)
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder