À propos de la gestion des événements de HTML5 Canvas

Cet article présente principalement le traitement des événements de HTML5 Canvas. Cet article explique les limites de Canvas, la liaison des événements aux éléments Canvas, la méthode isPointInPath, le redessinage des boucles et le bouillonnement d'événements, etc. Les amis dans le besoin peuvent s'y référer

DOM est une partie très importante du domaine du front-end Web. Il est utilisé non seulement lors du traitement des éléments HTML, mais également dans la programmation graphique. Par exemple, dans le dessin SVG, divers graphiques sont insérés dans la page sous forme de nœuds DOM, ce qui signifie que les graphiques peuvent être manipulés à l'aide des méthodes DOM. Par exemple, s'il existe un élément , vous pouvez directement utiliser jquery pour ajouter un événement de clic $('#p1').click(function(){…})". Cependant, cette méthode de traitement DOM n'est pas adaptée au HTML5. Elle n'est plus applicable dans Canvas. Canvas utilise un autre ensemble de mécanismes. Quel que soit le nombre de graphiques dessinés sur Canvas, Canvas est un tout. Les graphiques eux-mêmes font en fait partie de Canvas et ne peuvent pas l'être. obtenu séparément, il ne peut donc pas être directement donné à quelqu'un. Les graphiques ajoutent des événements JavaScript

Limitations de Canvas

Dans Canvas, tous les graphiques sont dessinés sur le cadre, et la méthode de dessin ne traitera pas les éléments graphiques dessinés comme une sortie de valeur de retour, js ne peut pas obtenir les éléments graphiques dessinés :

cvs = document.getElementById('mycanvas');
ctx = canvas.getContext('2d');
theRect = ctx.rect(10, 10, 100, 100);
ctx.stroke();
console.log(theRect);     //undefined

Ce code dessine un rectangle dans la balise canvas. vous pouvez voir que la méthode rect pour dessiner des graphiques ne renvoie pas de valeur. Si vous ouvrez les outils de développement du navigateur, vous pouvez également voir qu'aucun contenu n'est ajouté à l'intérieur de la balise canvas, et que l'élément canvas et le contexte actuel obtenu dans js le font. n'avoir aucun contenu indiquant les nouveaux graphiques.

Ainsi, les méthodes DOM couramment utilisées sur le front-end ne sont pas applicables dans le canevas. Par exemple, lorsque vous cliquez sur le rectangle dans le canevas ci-dessus, vous cliquez en fait sur. l'ensemble de l'élément Canvas.

Liez les événements à l'élément Canvas

Étant donné que l'événement ne peut atteindre que le niveau de l'élément Canvas, si vous souhaitez aller plus loin et identifier lequel. graphique à l'intérieur du canevas sur lequel le clic se produit, vous devez ajouter du code pour le traitement. : Liez un événement à l'élément Canvas. Lorsque l'événement se produit, vérifiez la position de l'objet événement, puis vérifiez quels graphiques couvrent la position. , dans l'exemple ci-dessus, un rectangle est dessiné, qui couvre l'axe des x 10-110 et l'axe des y 10. -110 tant que la souris clique dans cette plage, elle peut être considérée comme cliquant sur le rectangle. , et l'événement de clic qui doit être traité par le rectangle peut être déclenché manuellement. L'idée est en fait relativement simple, mais la mise en œuvre est encore un peu compliquée. L'efficacité de ce processus de jugement nécessite un nouveau jugement des types d'événements à certains endroits. . Le paramètre nécessite de redéfinir un mécanisme de capture et de bouillonnement dans Canvas

La première chose à faire est de lier les événements à l'élément Canvas, comme Canvas. Pour lier un événement de clic à un graphique interne, vous devez le faire. proxy l'événement via l'élément Canvas :

cvs = document.getElementById('mycanvas');
cvs.addEventListener('click', function(e){
  //...
}, false);

Ensuite, vous devez déterminer l'emplacement où l'objet événement se produit. Les attributs layerX et layerY de l'objet événement e représentent les coordonnées internes du Canvas. coordonnées dans le système. Cependant, cet attribut n'est pas pris en charge par Opera et Safari prévoit de le supprimer, nous devons donc créer des méthodes d'écriture compatibles :

function getEventPosition(ev){
  var x, y;
  if (ev.layerX || ev.layerX == 0) {
    x = ev.layerX;
    y = ev.layerY;
  } else if (ev.offsetX || ev.offsetX == 0) { // Opera
    x = ev.offsetX;
    y = ev.offsetY;
  }
  return {x: x, y: y};
}

//Remarque : pour utiliser la fonction ci-dessus. , vous devez définir la position de l'élément Canvas sur absolue.

Maintenant que nous avons la position des coordonnées de l'objet événement, nous devons déterminer quels graphiques dans le canevas couvrent cette coordonnée.

Méthode isPointInPath

La méthode isPointInPath de Canvas peut déterminer si le graphique de contexte actuel couvre une certaine coordonnée, telle que :

cvs = document.getElementById('mycanvas');
ctx = canvas.getContext('2d');
ctx.rect(10, 10, 100, 100);
ctx.stroke();
ctx.isPointInPath(50, 50);     //true
ctx.isPointInPath(5, 5);     //false

Suivant En ajoutant un jugement d'événement, vous pouvez juger si un événement de clic se produit sur un rectangle :

cvs.addEventListener('click', function(e){
  p = getEventPosition(e);
  if(ctx.isPointInPath(p.x, p.y)){
    //点击了矩形
  }
}, false);

Ce qui précède est la méthode de base de gestion des événements Canvas, mais le code ci-dessus a des limites, car la méthode isPointInPath uniquement juge le contexte actuel Le chemin dans l'environnement, donc lorsque plusieurs graphiques ont été dessinés dans Canvas, l'événement ne peut être jugé qu'en fonction du contexte du dernier graphique, tel que

cvs = document.getElementById('mycanvas');
ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.rect(10, 10, 100, 100);
ctx.stroke();
ctx.isPointInPath(20, 20);     //true
ctx.beginPath();
ctx.rect(110, 110, 100, 100);
ctx.stroke();
ctx.isPointInPath(150, 150);     //true
ctx.isPointInPath(20, 20);     //false

Comme peut être vu à partir du code ci-dessus. Notez que la méthode isPointInPath ne peut identifier le chemin graphique que dans le contexte actuel et que le chemin précédemment dessiné ne peut pas être jugé rétrospectivement. La solution à ce problème est la suivante : lorsqu'un événement de clic se produit, redessinez tous les graphiques et utilisez la méthode isPointInPath pour chaque dessin afin de déterminer si les coordonnées de l'événement se trouvent dans la couverture des graphiques.

Redessin de boucle et bouillonnement d'événements

Afin de mettre en œuvre le redessin de boucle, les paramètres de base du graphique doivent être enregistrés au préalable :

arr = [
  {x:10, y:10, width:100, height:100},
  {x:110, y:110, width:100, height:100}
];
cvs = document.getElementById('mycanvas');
ctx = canvas.getContext('2d');
draw();
function draw(){
  ctx.clearRech(0, 0, cvs.width, cvs.height);
  arr.forEach(function(v){
    ctx.beginPath();
    ctx.rect(v.x, v.y, v.width, v.height);
    ctx.stroke();
  });
}

Le code ci-dessus enregistre à l'avance les paramètres de base des deux rectangles. A chaque appel de la méthode draw, ces paramètres de base seront appelés en boucle pour dessiner les deux rectangles. La méthode clearRect est également utilisée ici pour effacer le canevas lors du redessin. La prochaine chose à faire est d'ajouter un proxy d'événement et d'utiliser la méthode isPointInPath pour chaque contexte lors du redessin :

cvs.addEventListener('click', function(e){
  p = getEventPosition(e);
  draw(p);
}, false);

Lorsque l'événement se produit, transmettez les coordonnées de l'objet événement à la méthode draw pour traitement. Quelques petits changements doivent être apportés à la méthode de tirage ici :

function draw(p){
  var who = [];
  ctx.clearRech(0, 0, cvs.width, cvs.height);
  arr.forEach(function(v, i){
    ctx.beginPath();
    ctx.rect(v.x, v.y, v.width, v.height);
    ctx.stroke();
    if(p && ctx.isPointInPath(p.x, p.y)){
      //如果传入了事件坐标，就用isPointInPath判断一下
      //如果当前环境覆盖了该坐标，就将当前环境的index值放到数组里
      who.push(i);
    }
  });
  //根据数组中的index值，可以到arr数组中找到相应的元素。
  return who;
}

在上面代码中，点击事件发生时draw方法会执行一次重绘，并在重绘过程中检查每一个图形是否覆盖了事件坐标，如果判断为真，则视为点击了该图形，并将该图形的index值放入数组，最后将数组作为draw方法的返回值。在这种处理机制下，如果Canvas里有N个图形，它们有一部分是重叠的，而点击事件恰巧发生在这个重叠区域上，那么draw方法的返回数组里会有N个成员。这时就有点类似事件冒泡的情况，数组的最后一个成员处于Canvas最上层，而第一个成员则在最下层，我们可以视为最上层的成员是e.target，而其他成员则是冒泡过程中传递到的节点。当然这只是最简单的一种处理方法，如果真要模拟DOM处理，还要给图形设置父子级关系。

以上就是Canvas事件处理的基本方法。在实际运用时，如何缓存图形参数，如何进行循环重绘，以及如何处理事件冒泡，都还需要根据实际情况花一些心思去处理。另外，click是一个比较好处理的事件，相对麻烦的是mouseover、mouseout和mousemove这些事件，由于鼠标一旦进入Canvas元素，始终发生的都是mousemove事件，所以如果要给某个图形单独设置mouseover或mouseout，还需要记录鼠标移动的路线，给图形设置进出状态。由于处理的步骤变得复杂起来，必须对性能问题提高关注。

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

相关推荐：

HTML5 canvas学习的实例介绍

angularJS结合canvas画图的实现

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!