1

Según este código, ¿cómo puedo llamar a una función dependiendo del texto del canvas clicado? En otras palabras, si se hace clic el Texto 1 , se ejecutará la funcion 1 y si se hace clic el segundo texto, se ejecutará otra función.

var c = document.getElementById("canvas");
var d = c.getContext("2d");
var divc = document.getElementById("cr");

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

    var newCanvas = new Sm();

    newCanvas.draw1();
    newCanvas.draw2();

});

function Sm () {

    this.selected = "";

}

Sm.prototype = {

    draw1: function () {

        d.font = "20px Ubuntu";
        d.fillText("Texto 1", 50, 100);

    },
    draw2: function () {

        d.font = "20px Georgia";
        d.fillText("Texto 2", 200, 100);

    }

};
<body style="background-color: grey;">
    <input id="cr" type="button" value="Crear canvas"/>
    <canvas id="canvas"></canvas>
</body>

1 respuesta 1

3

Debes analizar bien si necesitas obligatoriamente canvas para tu proyecto. Dependiendo de tu gráfico podrías usar SVG y podrías añadir interactividad de una manera más sencilla.

En primer lugar debes entender qué cosa es un canvas. Un canvas es un elemento en el que representas gráficos y textos pero en modo bitmap. Un canvas es como una imagen a la que le puedes variar sus pixeles usando para ello JavaScript. Por lo tanto, cualquier elemento que dibujes en el canvas no será interactivo. Si quisieras simular que tus elementos son interactivos, deberías capturar un evento click sobre el canvas, analizar las coordenadas del evento y dependiendo de estas ejecutar una función o la otra, puedes encontrar varios tutoriales en internet para implementar esto. Sería algo como el siguiente snippet:

He variado un poco el código para que fuera más dinámico enviando el canvas y las coordenadas al constructor. No tienes que hacerlo obligatoriamente así.

var c = document.getElementById("canvas");
var divc = document.getElementById("cr");

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

  var newCanvas = new Sm(c, {x: 50, y: 100}, {x: 200, y: 100});

  newCanvas.draw1();
  newCanvas.draw2();

});

function Sm (canvas, coords1, coords2) {

  var _scope = this;
  
  this._canvas = canvas;
  this._context = canvas.getContext("2d");
  this._coords1 = coords1 || {x: 0, y: 0};
  this._coords2 = coords2 || {x: 0, y: 0};
  
  this._canvas.addEventListener("click", function (evt) {
  
      var cOffset = this.getBoundingClientRect();
      var pageX = evt.pageX - cOffset.left;
      var pageY = evt.pageY - cOffset.top;
      
      if (pageX >= coords1.x && pageX < coords2.x && pageY <= coords1.y && pageY > coords1.y - 20) {
        alert("Teto 1 clicado");
      }
      
      if (pageX >= coords2.x && pageX < coords2.x + 100 && pageY <= coords2.y && pageY > coords2.y - 20) {
        alert("Teto 2 clicado");
      }
  
  });

}

Sm.prototype = {

  draw1: function() {

    this._context.font = "20px Ubuntu";
    this._context.fillText("Texto 1", this._coords1.x, this._coords1.y);

  },
  draw2: function() {

    this._context.font = "20px Georgia";
    this._context.fillText("Texto 2", this._coords2.x, this._coords2.y);

  }

};
<body style="background-color: grey;">
  <input id="cr" type="button" value="Crear canvas" />
  <canvas id="canvas"></canvas>
</body>

Notarás que este método es inexacto y complicado de implementar. Si quieres añadir interactividad a un canvas te recomiendo EaseLJS. Todo sería tan fácil de implementar como el siguiente snippet:

var c = document.getElementById("canvas");
var divc = document.getElementById("cr");

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

  var newCanvas = new Sm(c, {x: 50, y: 100}, {x: 200, y: 100});

  newCanvas.draw1();
  newCanvas.draw2();
  newCanvas.update();

});

function Sm(canvas, coords1, coords2) {

  var _scope = this;

  this._canvas = new createjs.Stage(canvas);
  this._coords1 = coords1 || {x: 0, y: 0};
  this._coords2 = coords2 || {x: 0, y: 0};

}

Sm.prototype = {

  draw1: function() {

    var text = new createjs.Text("Texto 1", "20px Ubuntu", "#000");
    text.set(this._coords1);    
    this._canvas.addChild(text);
    
    text.addEventListener("click", function () {
      alert("Texto 1 clicado");
    });

  },
  draw2: function() {

    var text = new createjs.Text("Texto 2", "20px Georgia", "#000");
    text.set(this._coords2);    
    this._canvas.addChild(text);
    
    text.addEventListener("click", function () {
      alert("Texto 2 clicado");
    });

  },
  update: function () {
    this._canvas.update();
  }

};
<script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script>

<body style="background-color: grey;">
  <input id="cr" type="button" value="Crear canvas" />
  <canvas id="canvas"></canvas>
</body>

4
  • Funciona esa libreria, si el texto cambiara de posición tldo el tiempo?
    – ESCM
    Commented el 18 jun. 2017 a las 15:12
  • Claro que funcionaría, porque variarían las coordenadas del objeto y estas son las que se utilizan para determinar si estás haciendo clic en el mismo. Ten en cuenta que si al cambiar las coordenadas del objeto este queda detrás de uno más grande, no podrías hacer clic en él en ese momento.
    – ElChiniNet
    Commented el 18 jun. 2017 a las 15:31
  • Investigaré sobre el tema, gracias
    – ESCM
    Commented el 18 jun. 2017 a las 15:32
  • De nada, un saludo ;)
    – ElChiniNet
    Commented el 18 jun. 2017 a las 15:32

Tu Respuesta

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

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