Salto de linea en un texto?

[Yedi]

Hola

Soy muy nueva en esto de javascript y me avente a modificar un codigo de ejemplo publicado en Internet (con derecho de edicion ), hasta el momento hace todo lo que quiero, pero no puedo hacer un salto de linea

El codigo que muestro funciona para que cuando el cursor pase encima de un canvas ya declarado muestre texto en un espacio asignado.
Aqui va la parte del codigo

Código Javascript:

window.onload = function(){
                var stage = new Kinetic.Stage("container", 900, 500);
                var canvas = stage.getCanvas();
                var stageContext = stage.getContext();
                var showImageMap = false;
                
                var planets = {
                    Mercurio: {
                        x: 46,
                        y: 126,
                        radius: 32
                    },
                   Earth: {
                        x: 366,
                        y: 127,
                        radius: 85
                    },
                    Mars: {
                        x: 515,
                        y: 127,
                        radius: 45
                    },
        "Baja California\n#34": {
                        x: 200,
                        y: 100,
                        radius: 10
                    }
                };
 

en la última de las opciones hice un ejemplo de como quiero publicar mi informacion con saltos de linea... intente \n, \\n, \t, <br> para hacerlo pero nada

Asi como esta el codigo me imprime de la siguiente forma:
Baja California #34

Me atrevo a pensar que como son nombres de variables (o no se como llamarlas) por eso no puedo realizar el salto de linea . Probe tambien con document.write, print pero el archivo me indicaba error de programación

Como puedo hacerlo?? intente en declarar cada opcion como una variable y asignarle un valor e imprimirla pero creo q cometi errores de sintaxis porque no salia nada.

De antemano agradezco mucho su ayuda y cualquier tip, consejo o lo q sea seran de ayuda

Mil Gracias

[Yedi]

Nadie tiene alguna sugerencia? o a lo mejor no me di a entender bien??? :(

[autonotel]

var baja = 'Baja California <br>';


Earth: {
x: 366,
y: 127,
radius: 85
},
Mars: {
x: 515,
y: 127,
radius: 45
},
baja: {
x: 200,
y: 100,
radius: 10
}
};

[Yedi]

Gracias, ya lo intente asi pero me escribe la palabra baja

[autonotel]

Pero declaraste la variable antes claro

[Yedi]

Si por supuesto

[autonotel]

Entonces debe estar en la parte del código que no muestras.
como muestras los datos? y de donde sacas las variables?

[Yedi]

Este es el codigo completo

Código Javascript:

<script>
            function writeMessage(context, message){
                context.fillStyle = "white";
                context.fillRect(500, 20, 450, 200);
                context.font = "20pt Calibri";
                context.fillStyle = "blue";
                context.fillText(message, 500, 80);
            }
            
            window.onload = function(){
                var stage = new Kinetic.Stage("container", 900, 500);
                var canvas = stage.getCanvas();
                var stageContext = stage.getContext();
                var showImageMap = false;
                
        var baja = 'Baja California <br> ok';
                              
                var planets = {
                    "SUCURSAL TIJUANA, B.C.": {
                        x: 35,
                        y: 35,
                        radius: 11,
                
                    },
                   "SUCURSAL MEXICALI, B.C.": {
                        x: 179,
                        y: 126,
                        radius: 6
                    }, 
           baja: {
                        x: 200,
                        y: 100,
                        radius: 6
                    }
                };
                
                var imageObj = new Image();
                imageObj.onload = function(){
                    // draw planets
                    stageContext.drawImage(imageObj, 0, 0, canvas.width, canvas.height);
                    
                    // draw shape overlays
                    for (var pubKey in planets) {
                        (function(){
                            var key = pubKey;
                            var planet = planets[key];
                            
                            var planetOverlay = new Kinetic.Shape(function(){
                                var context = this.getContext();
                                context.beginPath();
                                context.arc(planet.x, planet.y, planet.radius, 0, Math.PI * 2, false);
                                context.closePath();
                                
                                if (this.fill) {
                                    context.fillStyle = "red";
                                    context.fill();
                                }
                            });
                            
                            planetOverlay.on("mouseover", function(){
                                writeMessage(stageContext, key);
                            });
                            planetOverlay.on("mouseout", function(){
                                writeMessage(stageContext, "");
                            });
                            
                            planetOverlay.fill = false;
                            stage.add(planetOverlay);
                        }());
                    }
                    
                    var checkbox = document.getElementById("checkbox");
                    checkbox.addEventListener("click", function(){
                        showImageMap = !showImageMap;
                        var shapes = stage.getShapes();
                        
                        // reset fill property
                        for (var n = 0; n < shapes.length; n++) {
                            var shape = shapes[n];
                            shape.fill = showImageMap;
                        }
                        
                        stage.draw();
                    }, false);
                    
                };
                imageObj.src = "images/mapasucyof.png";
            };
        </script>
 

Gracias

[autonotel]

pero ahora está distinto:

var baja = 'Baja California <br> ok';

var planets = {
"SUCURSAL TIJUANA, B.C.": {
x: 35,
y: 35,
radius: 11,

},
"SUCURSAL MEXICALI, B.C.": {
x: 179,
y: 126,
radius: 6
},
"baja california <br>":{
x: 200,
y: 100,
radius: 6
}
};

entiendo que no va asi no?

[Yedi]

No, son solo pruebas que le he estado haciendo para probar el codigo


Lo coloco nuevamente en como lo tengo (que no es mucho cambio)

Código Javascript:

<script>
            function writeMessage(context, message){
                context.fillStyle = "white";
                context.fillRect(500, 20, 450, 200);
                context.font = "20pt Calibri";
                context.fillStyle = "blue";
                context.fillText(message, 500, 80);
            }
            
            window.onload = function(){
                var stage = new Kinetic.Stage("container", 900, 500);
                var canvas = stage.getCanvas();
                var stageContext = stage.getContext();
                var showImageMap = false;
                
        var baja = 'Baja California <br>';
                              
                var planets = {
                    "SUCURSAL TIJUANA, B.C.": {
                        x: 35,
                        y: 35,
                        radius: 11,
                
                    },
                   "SUCURSAL MEXICALI, B.C.": {
                        x: 179,
                        y: 126,
                        radius: 6
                    }, 
                    "OFICINA LA PAZ, B.C.": {
                        x: 366,
                        y: 127,
                        radius: 6
                    },
                    "SUCURSAL HERMOSILLO, SON": {
                        x: 515,
                        y: 127,
                        radius: 6
                    },
             baja: {
                        x: 200,
                        y: 100,
                        radius: 6
                    }
                };
                
                var imageObj = new Image();
                imageObj.onload = function(){
                    // draw planets
                    stageContext.drawImage(imageObj, 0, 0, canvas.width, canvas.height);
                    
                    // draw shape overlays
                    for (var pubKey in planets) {
                        (function(){
                            var key = pubKey;
                            var planet = planets[key];
                            
                            var planetOverlay = new Kinetic.Shape(function(){
                                var context = this.getContext();
                                context.beginPath();
                                context.arc(planet.x, planet.y, planet.radius, 0, Math.PI * 2, false);
                                context.closePath();
                                
                                if (this.fill) {
                                    context.fillStyle = "red";
                                    context.fill();
                                }
                            });
                            
                            planetOverlay.on("mouseover", function(){
                                writeMessage(stageContext, key);
                            });
                            planetOverlay.on("mouseout", function(){
                                writeMessage(stageContext, "");
                            });
                            
                                                        
                             planetOverlay.fill = false;
                            stage.add(planetOverlay);
                        }());
                    }
                    
                    var checkbox = document.getElementById("checkbox");
                    checkbox.addEventListener("click", function(){
                        showImageMap = !showImageMap;
                        var shapes = stage.getShapes();
                        
                        // reset fill property
                        for (var n = 0; n < shapes.length; n++) {
                            var shape = shapes[n];
                            shape.fill = showImageMap;
                        }
                        
                        stage.draw();
                    }, false);
                    
                };
                imageObj.src = "images/mapasucyof.png";
            };
        </script>
 

De esta manera, al pasar el cursor solo me escribe baja

[autonotel]

Creo que no entiendo lo que quieres conseguir, a ver si viene un experto.
Si lo que quieres es imprimir el br sería así:

"Baja California '<br>'": {
x: 200,
y: 100,
radius: 6
}
};

Si lo que quieres es que haga un salto de línea, lo que no entinedo es como sabes si lo hace o no.

[Yedi]

Pues para empezar creo que deberia colocar el texto completo de "Baja California '<br>'", eso significaria q esta tomando la variable. Pero no lo hace ya que me escribe solo "baja".

Y lo que deseo son saltos de linea y los probe de diferentes formas
"Baja California \n Tel. 123" Resultado "Baja California Tel. 123" (me imprime doble espacio)
"Baja California \j Tel. 123" Resultado "Baja California Tel. 123"
"Baja California <br /> Tel. 123" Resultado "Baja California <br /> Tel. 123"

[autonotel]

Mientras no venga un experto...
Prueba cosas:
var a = "<br>";

"Baja California" + a + "Tel. 123";

y cosas así

[Yedi]

Seguire intentando... si alguien tiene alguna otra sugerencia son bienvenidas :)

Gracias!!!!

[Yedi]

Bueno pues he vuelto a probar varias formas y no logro conseguir mostrar el texto con saltos de linea.. no se que el o que este haciendo mal..pero no sale

En verdad cualquier tip,consejo, idea sera bienvenido

Gracias

[zerokilled]

buenas,
creo que sería más fácil si pones un ejemplo funcionando en el que podamos hacer pruebas. por otro lado no has mencionado todos los detalles. por ejemplo no sabemos con que exactamente estas trabajando. estoy asumiento que estas usando el script KineticJS. me baje el script y lo intente con tu código pero recibo error de parte de tu código. particularmente estas invocando métodos que no existen en la libreria. quizas es por una cuestion de version. en fin, deberías ensamblar un ejemplo y ponerlo en linea.

[Yedi]

Gracias por el Interes


Aqui les va el codigo completo de la página

Código HTML:

<!DOCTYPE HTML>
<html>
<head>
<title>Mapa de Sucursales y Oficinas</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
       <style>
            body {
                margin: 0px;
                padding: 0px;
                font-family: Calibri;
            }
            
            canvas {
                border: 1px solid #9C9898;
            }
            
            #page {
                position: relative;
                width: 800px;
                height: 450px;
            }
            
            #controls {
                position: absolute;
                right: 10px;
                top: 10px;
                z-index: 99999;
            }
            
            label {
                color: white;
                vertical-align: top;
            }
        </style>
        <script src="kinetic-v3.5.2.js">
        </script>
       <script>
            function writeMessage(context, message){
                context.fillStyle = "white";
                context.fillRect(500, 20, 450, 200);
                context.font = "20pt Calibri";
                context.fillStyle = "blue";
                context.fillText(message, 500, 80);
            }
            
            window.onload = function(){
                var stage = new Kinetic.Stage("container", 900, 500);
                var canvas = stage.getCanvas();
                var stageContext = stage.getContext();
                var showImageMap = false;
                
                var baja = "Baja California '<br>' zzzz";
                              
                var planets = {
                    "SUCURSAL TIJUANA, B.C.": {
                        x: 35,
                        y: 35,
                        radius: 11,
                
                    },
                   "SUCURSAL MEXICALI, B.C.": {
                        x: 179,
                        y: 126,
                        radius: 6
                    }, 
                    "OFICINA LA PAZ, B.C.": {
                        x: 366,
                        y: 127,
                        radius: 6
                    },
                    "SUCURSAL HERMOSILLO, SON": {
                        x: 515,
                        y: 127,
                        radius: 6
                    },
                    "Baja CaliforniaTel. 123": {
                        x: 200,
                        y: 100,
                        radius: 6
                    }
                };
                
                var imageObj = new Image();
                imageObj.onload = function(){
                    // draw planets
                    stageContext.drawImage(imageObj, 0, 0, canvas.width, canvas.height);
                    
                    // draw shape overlays
                    for (var pubKey in planets) {
                        (function(){
                            var key = pubKey;
                            var planet = planets[key];
                            
                            var planetOverlay = new Kinetic.Shape(function(){
                                var context = this.getContext();
                                context.beginPath();
                                context.arc(planet.x, planet.y, planet.radius, 0, Math.PI * 2, false);
                                context.closePath();
                                
                                if (this.fill) {
                                    context.fillStyle = "red";
                                    context.fill();
                                }
                            });
                            
                            planetOverlay.on("mouseover", function(){
                                writeMessage(stageContext, key);
                            });
                            planetOverlay.on("mouseout", function(){
                                writeMessage(stageContext, "");
                            });
                            
                           
                            planetOverlay.fill = false;
                            stage.add(planetOverlay);
                        }());
                    }
                    
                    var checkbox = document.getElementById("checkbox");
                    checkbox.addEventListener("click", function(){
                        showImageMap = !showImageMap;
                        var shapes = stage.getShapes();
                        
                        // reset fill property
                        for (var n = 0; n < shapes.length; n++) {
                            var shape = shapes[n];
                            shape.fill = showImageMap;
                        }
                        
                        stage.draw();
                    }, false);
                    
                };
                imageObj.src = "images/mapasucyof.png";
            };
        </script>
</head>
<body onmousedown="return false;">
<header>
</header>
<section>  
<div id="page" >
            <div id="container" class="back"></div>
            <div id="controls">
                <input type="checkbox" id="checkbox">
                <label>
                    Show map overlay
                </label>
            </div>
 
        </div>
 
</section>
</body>
</html>
 

El código de kinetic lo descargue de la siguiente liga:
http://www.html5canvastutorials.com/...etic-v3.6.0.js

Y el ejemplo original es el siguiente: http://www.html5canvastutorials.com/.../#comment-3113


Gracias

[zerokilled]

según pude ver, canvas no tiene soporte para texto de múltiples líneas. tienes que invocar varias veces el método que imprime el texto pero con distintas coordenadas en el eje de Y. en ese ejemplo particular no hay forma de manejarlo porque la función writeMessage siempre imprime en la misma posición. se me ocurre que podrías adaptar la función y determinar si en el texto existen saltos de líneas. en base al número de salto de líneas calculas e imprime el texto. claro, tienes que partir el texto por los saltos de líneas para saber que porción escribir. a continuación una adaptación ligera, puedes usarlo como base o idea.

Código:

function writeMessage(messageLayer, message){
messageLayer.clear();
var textLines = message.split(/[\r\n]+/);
var context = messageLayer.getContext();
context.fillStyle = "black";
context.fillRect(0, 0, 300, 40*textLines.length);
context.font = "20pt Calibri";
context.fillStyle = "white";
for(var i = 0, len = textLines.length; i < len; i++) context.fillText(textLines[i], 10, 30*(i+1));
}

tiene un pequeño quirk desagradable. si tienes muchas líneas verás que se crea un parcho negro sobre la imagen. estoy casi seguro que el fondo se puede hacer transparente pero no manejo canvas.

[Yedi]

Ok me diste una idea lo pruebo y les platico como me fue... Gracias

[Yedi]

Pues les comparto la solucion que encontré.. despues de andar buscando en la red otros ejemplos halle este pequeño codigo para dividir un texto en varias lineas.. asi que lo adapte a lo que ya tenía y listo.. funciono super bien

Código Javascript:

function wrapText(context, text, x, y, maxWidth, lineHeight){
    var words = text.split(" ");
    var line = "";
    var x=500;
    var y=50;
    var maxWidth=400;
    var lineHeight=30;
    
    context.fillStyle = "rgb(255, 255, 255)";
    context.fillRect(480, 30, 400, 100);
    context.font = "20pt Calibri";
    context.fillStyle = "blue"; 
 
     
    for (var n = 0; n < words.length; n++) {
        var testLine = line + words[n] + " ";
        var metrics = context.measureText(testLine);
        var testWidth = metrics.width;
        if (testWidth > maxWidth) {
            context.fillText(line, x, y);
            line = words[n] + " ";
            y += lineHeight;
        }
        else {
            line = testLine;
        }
    }
    context.fillText(line, x, y);
}
 

Espero que este ejemplo le sirva a alguien mas

Gracias por sus comentrios que me ayudaron