3

Como podría hacer 'cliqueable' si la persona, ingresa un link para el fillText en Canvas?

Edito: Sigo investigando y he visto que dices que puedo asociar un controlador de eventos al lienzo, luego sacar las coordenadas del texto y que si pulsa el texto, lo redirecciona, pero además mi problema es que no me sirve hacerlo para un TEXTO ESTÁTICO, entonces que debo hacer?

Con 'cliqueable' me refiero que se pueda cliquear si es una URL, y te lleve a esa URL abriendo otra pestaña.

Investigando leí esto, pero aun no me queda claro como hacerlo en la practica:

Puede detectar clics en el lienzo si agrega un controlador de eventos de clic al elemento canvas y, a continuación, extrae los parámetros de posición del ratón del evento, los convierte en coordenadas locales, comprueba los elementos que hace clic y realiza cualquier acción que sea necesaria.

var h = document.getElementById("go");
h.addEventListener("click",function() {
  
var texto = prompt("Ingresa texto a dibujar");
var context = document.getElementById("canvas");
var ctx = context.getContext("2d");

ctx.font = "20px monospace";
ctx.fillText(texto, 20, 60);
  
ctx.font = "40px monospace";
ctx.fillText("Creando textos..", 70, 30);
  
});
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <input value="Crear texto" type="button" id="go"/>
  <canvas width="1080" height="720" id="canvas"></canvas>
</body>
</html>

1
  • Es posible pero requiere de horas de programación, aunque con librerias como Fabric js puede ser más sencillo. el 18 ago. 2021 a las 5:04

3 respuestas 3

1

Hice algunos cambios: hay algunas variables que las he sacado del h.addEventListener: el canvas, el contexto del canvas: estas variables son constantes y necesitas declararlas una sola vez.

También he añadido una función para recuperar las coordenadas del ratón:oMousePos

La lógica utilizada: después de pintar el texto estoy calculando la anchura del texto utilizando el método measureText del contexto. Voy a utilizar este valor pata esbozar un rectángulo alrededor del texto. Digo "esbozar" porque el rectángulo no tendrá ni fill ni stroke.

Después al hacer click en el canvas canvas.addEventListener("click",... si el ratón se encuentra encima del rectángulo el programa hace algo. En este caso aparece un alert pero tu puedes hacer lo que quieras: por ejemplo redirecionar la página.

Para detectar si el ratón se encuentra encima del rectángulo utilizo el método isPointInPath del contexto.

Observación: veo que utilizas var context para el canvas y var ctx para el contexto. Los he dejado así pero habría sido mucho más claro utilizar var lienzo o var canvas en lugar de var context.

Espero que sea útil.

var h = document.getElementById("go");
var context = document.getElementById("canvas");
var ctx = context.getContext("2d");
var anchuraTexto;//la anchura del texto es una variable global
var fontSize = 20;
var dondePongoElTexto = {x:20,y:60};// coordenadas utilizadas para dibujar el texto
var raton = {}// las coordenadas del ratón

h.addEventListener("click",function() {
  
var texto = prompt("Ingresa texto a dibujar");
ctx.font = fontSize+"px monospace";
ctx.fillText(texto, dondePongoElTexto.x, dondePongoElTexto.y);
// calcula la anchura del texto
anchuraTexto = ctx.measureText(texto).width;
/*  
ctx.font = "40px monospace";
ctx.fillText("Creando textos..", 70, 30);*/
  
});

canvas.addEventListener("click",(evt)=>{
  raton = oMousePos(canvas, evt)
  ctx.beginPath();
  // este es un rectángulo alrededor del texto. Por favor observa que no hay stroke
  ctx.rect(dondePongoElTexto.x,(dondePongoElTexto.y -fontSize),anchuraTexto,fontSize*1.2);
  if (ctx.isPointInPath(raton.x, raton.y)) {
    alert("has hecho click\ny ahora puedes hacer lo que quieres")
  }
})


// una finción para recuperar las coordenadas del ratón
function oMousePos(canvas, evt) {
  var ClientRect = canvas.getBoundingClientRect();
	return { //objeto
	x: Math.round(evt.clientX - ClientRect.left),
	y: Math.round(evt.clientY - ClientRect.top)
}
}
canvas{border:1px solid}
<input value="Crear texto" type="button" id="go"/>
<canvas width="500" height="200" id="canvas"></canvas>

1

Acá te comparto un ejemplo que cumple con lo siguiente:

  • Validación de un texto para determinar si es una URL.
  • Detección de posición del mouse relativo al canvas.
  • Detección de colisión para determinar si el texto agregado fue clickeado
  • En caso de que el texto sea una URL se pintara de color azul sino de color negro
  • Si el texto es una URL y es clickeado se abrirá dicha url en un nuevo tab del browser.

Ejemplo online: https://jsfiddle.net/chenay01/awvs3yxL/68

HTML

<input value="Crear texto" type="button" id="go" />
<canvas width="1080" height="720" id="canvas"></canvas>

JAVASCRIPT

// Variables
var crearTexto = document.getElementById("go");
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var texto = '';
var textoEsUnaUrl = false;
var coordMouse = {
  x: 0,
  y: 0,
  width: 2,
  height: 2
};
var coordTitulo = {
  x: 70,
  y: 0
};
var coordTexto = {
  x: 20,
  y: 40,
  width: 0,
  height: 20,
};

// Validar si un texto es una url
function validarURL(str) {
  var pattern = new RegExp('^(https?:\\/\\/)?' + // protocol
    '((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|' + // domain name
    '((\\d{1,3}\\.){3}\\d{1,3}))' + // OR ip (v4) address
    '(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*' + // port and path
    '(\\?[;&a-z\\d%_.~+=-]*)?' + // query string
    '(\\#[-a-z\\d_]*)?$', 'i'); // fragment locator
  return !!pattern.test(str);
}

// Obtener la posicion del mouse dentro del canvas
function getMousePos(evt) {
  var rect = canvas.getBoundingClientRect();
  return {
    x: evt.clientX - rect.left,
    y: evt.clientY - rect.top
  };
}

// Detectar colision entre dos elementos (2D)
function detectarColision(rect1, rect2) {
  return rect1.x < rect2.x + rect2.width &&
    rect1.x + rect1.width > rect2.x &&
    rect1.y < rect2.y + rect2.height &&
    rect1.height + rect1.y > rect2.y
}

// Abrir una url en un nuevo tab del browser
function abrirUrlNuevoTab(url) {
  // Abrir nuevo tab
  var win = window.open(url, '_blank');
  // Cambiar el foco al nuevo tab (punto opcional)
  win.focus();
}

crearTexto.addEventListener("click", function() {

  // Obtener el texto
  texto = prompt("Ingresa texto a dibujar");

  // Validamos si el texto es una url
  textoEsUnaUrl = validarURL(texto);

  // Limpiar el canvas
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // Pintar el titulo
  ctx.font = "40px monospace";
  ctx.textBaseline = "top";
  ctx.fillStyle = "black"
  ctx.fillText("Creando textos..", coordTitulo.x, coordTitulo.y);

  // Pintar el texto
  ctx.font = "20px monospace";
  ctx.textBaseline = "top";
  ctx.fillStyle = textoEsUnaUrl ? "blue" : "black";
  ctx.fillText(texto, coordTexto.x, coordTexto.y);

  //Obtenemos el ancho del texto:
  coordTexto.width = ctx.measureText(texto).width;
});

canvas.addEventListener("click", function(e) {

  // Actualizo las coordenadas del mouse
  coordMouse = {
    ...coordMouse,
    ...getMousePos(e)
  }

  // Si el texto es un link entonces abrimos la url en un nuevo tab
  if (texto && textoEsUnaUrl && detectarColision(coordTexto, coordMouse)) {
    abrirUrlNuevoTab(texto);
  }
});
0

Con 'cliqueable' me refiero que se pueda cliquear si es una URL, y te lleve a esa URL abriendo otra pestaña

No es posible lo que pretende al menos no con canvas , recuerde que los elementos que se dibujan no tienen ninguna representación excepto px y color

Puede detectar clics en el lienzo si agrega un controlador de eventos de clic al elemento canvas

Ya lo está haciendo clickeable en su código al añadir el addEventListener

a continuación, extrae los parámetros de posición del ratón del evento, los convierte en coordenadas locales, comprueba los elementos que hace clic y realiza cualquier acción que sea necesaria.

Es verdad que en el evento click como dato del evento está la posición del evento mousex , y con esto puede dibujar donde usted de click dentro del canvas tiene muchas utilidades

Ejm

var canvas  = document.getElementById('canvas');
canvas.addEventListener("click",function(e){
  var texto = prompt("Ingresa texto a dibujar");
  var context = document.getElementById("canvas");
  var ctx = context.getContext("2d");

  ctx.font = "20px monospace";
  /* Agregamos el texto en la pos x y del click */
  ctx.fillText(texto, e.x, e.y);

});
<canvas width="1080" height="720" id="canvas"></canvas>

4
  • Como? no te entendí
    – ESCM
    el 30 jun. 2017 a las 3:14
  • @EduardoSebastian Qué no entendió ?
    – Dev. Joel
    el 30 jun. 2017 a las 3:19
  • no me explica nada, ni siquiera como hacerlo como un link
    – ESCM
    el 30 jun. 2017 a las 3:19
  • @EduardoSebastian me olvidé de esa parte , no es posible hacer eso con canvas , actualicé mi respuesta.
    – Dev. Joel
    el 30 jun. 2017 a las 3:26

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.