Mapa de imágen - mostrar solo ubicado
Publicado por Fabián (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
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
Esta en el index.html
y este es el código para declarar la imagen que se va a utilizar:
Ubicada en el HTML mismo.
las coordenadas de la imagen de cada una de ella:
Les agradecería sus respuestas :=)
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);
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";
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 :=)
- elinde.html.rar(151,2 KB)
Valora esta pregunta
0