javascript - dynamique - structure d'un site web pdf




Comment utiliser l'événement de plusieurs clics sur une toile (2)

Laisser le navigateur faire (la plupart du temps) le travail

Au clic de la partie rouge il faut appeler function1 et cliquer sur la partie grise, il faut appeler function2.

Vous pouvez utiliser des objets path réutilisables pour stocker les différents chemins que vous souhaitez tester, puis utiliser isPointInPath() avec le chemin et les coordonnées en tant qu'arguments.

En vérifiant chaque chemin pour un hit, vous pouvez assigner un appel différent basé par exemple sur l'index.

Et il n'y a pas besoin de faire ceci:

var c2 = document.getElementById("myCanvas");
var ctx2 = c2.getContext("2d");

Cela référencera simplement le même contexte qu'une toile ne peut en avoir qu'un - si demandé plus d'une fois la même chose sera donnée (ou null si différent type).

Comment utiliser l'événement de plusieurs clics sur une toile

Vous pouvez partager le gestionnaire de clics pour faire ce que vous voulez, comme indiqué ci-dessous -

Pour les navigateurs modernes, vous pouvez utiliser les deux objets Path2D pour stocker les informations de chemin que vous souhaitez utiliser plus tard (je traiterai des anciens navigateurs dans le deuxième exemple).

Exemple

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var p1 = new Path2D();
var p2 = new Path2D();
var paths = [p1, p2];   // store paths in array for check later

// store arc parts to respective path objects
p1.arc(100, 75, 50, -0.1 * Math.PI, 1.7 * Math.PI);  // red part
p2.arc(100, 75, 50, 1.7 * Math.PI, -0.1 * Math.PI);  // grey part

// render the two path objects using a common context, but different style
ctx.lineWidth = 15;

ctx.strokeStyle = "#c32020";
ctx.stroke(p1);

ctx.strokeStyle = "#a9a9a9";
ctx.stroke(p2);

// check for clicks on common canvas
c.onclick = function(e) {
  var rect = this.getBoundingClientRect(),  // adjust click coordinates
      x = e.clientX - rect.left,
      y = e.clientY - rect.top;

  // iterate through path array to test each path for hits
  for(var i = 0; i < paths.length; i++) {
    if (ctx.isPointInStroke(paths[i], x, y)) {      // check which path
      console.log("Path " + (i+1) + " clicked");
      break;
    }
  }
};
<canvas id="myCanvas"></canvas>

Compatibilité du navigateur

Cependant, les navigateurs plus anciens ne prendront pas en charge isPointInStroke() , comme IE11.

Pour ce scénario, vous pouvez utiliser un calcul simple pour déterminer si le clic se situe dans le rayon des arcs:

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.lineWidth = 15;
ctx.arc(100, 75, 50, -0.1 * Math.PI, 1.7 * Math.PI);  // red part
ctx.strokeStyle = "#c32020";
ctx.stroke();

ctx.beginPath();
ctx.arc(100, 75, 50, 1.7 * Math.PI, -0.1 * Math.PI);  // grey part
ctx.strokeStyle = "#a9a9a9";
ctx.stroke();

// check for clicks on common canvas
c.onclick = function(e) {
  var rect = this.getBoundingClientRect(),  // adjust click coordinates
      x = e.clientX - rect.left,
      y = e.clientY - rect.top,
      diffX = 100 - x,
      diffY = 75 - y,
      len = diffX*diffX + diffY*diffY,     // we don't need to square-root it:
      r1 = 43*43,         // it's faster to scale up radius (50-50% of linewidth)
      r2 = 57*57;         // radius + 50% of linewidth

  // are we on the edge of the circle?
  if (len >= r1 && len <= r2) {
    // now find angle to see if we're in red or grey area
    var angle = Math.atan2(diffY, diffX);
    if (angle > 0.7 * Math.PI && angle < 0.9 * Math.PI) {
      console.log("Grey part");
    }
    else {
      console.log("Red part");
    }
  }
};
<canvas id="myCanvas"></canvas>

Notez qu'un cas particulier dans le dernier exemple, c'est-à-dire lorsque l'arc traverse le point 0/360 °, vous voudrez séparer les contrôles [0, angle> et [angle, 360>.

J'ai dessiné un cercle avec du canvas utilisant le code suivant.

<div class="abc"><canvas id="myCanvas">HTML5 canvas tag.</canvas></div>
<script>

    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    ctx.beginPath();
    ctx.arc(100,75,50,-0.1*Math.PI,1.7*Math.PI);
    ctx.lineWidth = 15;
    ctx.strokeStyle = "#c32020";
    ctx.stroke();

    var c2 = document.getElementById("myCanvas");
    var ctx2 = c2.getContext("2d");
    ctx2.beginPath();
    ctx2.arc(100,75,50,1.7*Math.PI,-0.1*Math.PI);
    ctx2.lineWidth = 15;
    ctx2.strokeStyle = "#a9a9a9";
    ctx2.stroke();

</script>

Voici le résultat sur le navigateur Web.

Maintenant, je dois appeler deux function javascript différentes lorsque l'utilisateur clique sur la partie rouge et la partie grise du cercle.

Au click de la partie rouge il faut appeler function1 et cliquer sur la partie grise, il faut appeler function2 .

J'ai beaucoup essayé mais je n'ai pas réussi. J'ai besoin de l'aide d'un expert pour l'implémenter.


Vous devrez ajouter un événement click à l'élément canvas et calculer si le rouge ou le gris est cliqué. Voici un code pour vous aider à démarrer, mais vous devrez toujours déterminer les coordonnées de votre zone de cercle.

var elem = document.getElementById('myCanvas'),
elemLeft = elem.offsetLeft,
elemTop = elem.offsetTop;

// Add event listener for `click` events.
elem.addEventListener('click', function(event) {
var x = event.pageX,
    y = event.pageY;

// use x and y to determine if the colored regions are clicked and execute code accordingly

}, false);

Code obtenu à partir d'ici: Comment ajouter un gestionnaire d'événement onClick simple à un élément canvas?







html5-canvas