Ver Mensaje Individual
  #8 (permalink)  
Antiguo 19/01/2012, 13:02
Avatar de Yedi
Yedi
 
Fecha de Ingreso: junio-2006
Ubicación: México
Mensajes: 159
Antigüedad: 17 años, 10 meses
Puntos: 2
Respuesta: Salto de linea en un texto?

Este es el codigo completo

Código Javascript:
Ver original
  1. <script>
  2.             function writeMessage(context, message){
  3.                 context.fillStyle = "white";
  4.                 context.fillRect(500, 20, 450, 200);
  5.                 context.font = "20pt Calibri";
  6.                 context.fillStyle = "blue";
  7.                 context.fillText(message, 500, 80);
  8.             }
  9.            
  10.             window.onload = function(){
  11.                 var stage = new Kinetic.Stage("container", 900, 500);
  12.                 var canvas = stage.getCanvas();
  13.                 var stageContext = stage.getContext();
  14.                 var showImageMap = false;
  15.                
  16.         var baja = 'Baja California <br> ok';
  17.                              
  18.                 var planets = {
  19.                     "SUCURSAL TIJUANA, B.C.": {
  20.                         x: 35,
  21.                         y: 35,
  22.                         radius: 11,
  23.                
  24.                     },
  25.                    "SUCURSAL MEXICALI, B.C.": {
  26.                         x: 179,
  27.                         y: 126,
  28.                         radius: 6
  29.                     },
  30.            baja: {
  31.                         x: 200,
  32.                         y: 100,
  33.                         radius: 6
  34.                     }
  35.                 };
  36.                
  37.                 var imageObj = new Image();
  38.                 imageObj.onload = function(){
  39.                     // draw planets
  40.                     stageContext.drawImage(imageObj, 0, 0, canvas.width, canvas.height);
  41.                    
  42.                     // draw shape overlays
  43.                     for (var pubKey in planets) {
  44.                         (function(){
  45.                             var key = pubKey;
  46.                             var planet = planets[key];
  47.                            
  48.                             var planetOverlay = new Kinetic.Shape(function(){
  49.                                 var context = this.getContext();
  50.                                 context.beginPath();
  51.                                 context.arc(planet.x, planet.y, planet.radius, 0, Math.PI * 2, false);
  52.                                 context.closePath();
  53.                                
  54.                                 if (this.fill) {
  55.                                     context.fillStyle = "red";
  56.                                     context.fill();
  57.                                 }
  58.                             });
  59.                            
  60.                             planetOverlay.on("mouseover", function(){
  61.                                 writeMessage(stageContext, key);
  62.                             });
  63.                             planetOverlay.on("mouseout", function(){
  64.                                 writeMessage(stageContext, "");
  65.                             });
  66.                            
  67.                             planetOverlay.fill = false;
  68.                             stage.add(planetOverlay);
  69.                         }());
  70.                     }
  71.                    
  72.                     var checkbox = document.getElementById("checkbox");
  73.                     checkbox.addEventListener("click", function(){
  74.                         showImageMap = !showImageMap;
  75.                         var shapes = stage.getShapes();
  76.                        
  77.                         // reset fill property
  78.                         for (var n = 0; n < shapes.length; n++) {
  79.                             var shape = shapes[n];
  80.                             shape.fill = showImageMap;
  81.                         }
  82.                        
  83.                         stage.draw();
  84.                     }, false);
  85.                    
  86.                 };
  87.                 imageObj.src = "images/mapasucyof.png";
  88.             };
  89.         </script>

Gracias