Événements HTML5 Canvas pour Konva : partie 5, actions

Si vous suivez cette série depuis le début, vous devriez maintenant être très familier avec les formes, les groupes et les calques. Vous devriez également être capable de dessiner facilement des formes basiques et complexes sur toile à l’aide de Konva. Si vous envisagez d'utiliser Konva pour créer des applications ou des jeux interactifs, apprendre à lier des événements à différentes formes sur scène est la prochaine étape logique.

Dans ce tutoriel, vous apprendrez à lier des événements à n'importe quelle forme à l'aide de Konva. Vous découvrirez également la délégation et la propagation d’événements. Parfois, vous devrez peut-être contrôler par programme la zone de clic d'une forme et déclencher des événements. Nous aborderons également ces deux sujets.

Lier des événements à des formes

Vous pouvez utiliser on() 方法将不同的事件绑定到使用 Konva 创建的任何形状。您所要做的就是将事件名称作为第一个参数传递，并将事件发生时要执行的函数作为第二个参数传递。您可以使用 Konva 检测 mouseup、mousedown、mouseenter、mouseleave、mouseover 、 mousemove、click 和 dblclick。此外，Konva 还允许您检测 wheel、dragstart、dragmove 和 dragend événements.

Voici un événement qui détecte mousedown 和 mouseleave 事件的示例。同样，较小的圆圈绑定到 mouseover 和 mouseup 事件，较大的圆圈绑定到 mouseenter、mouseleave 和 mousemove sur un polygone régulier (hexagone).

var canvasWidth = 600;
var canvasHeight = 400;

var stage = new Konva.Stage({
  container: "example",
  width: canvasWidth,
  height: canvasHeight
});

var layerA = new Konva.Layer();

var polyA = new Konva.RegularPolygon({
  x: 125,
  y: 125,
  sides: 6,
  radius: 80,
  fill: "yellow",
  stroke: "black",
  strokeWidth: 5
});

var circA = new Konva.Circle({
  x: 275,
  y: 225,
  height: 100,
  fill: "orange",
  stroke: "black"
});

var circB = new Konva.Circle({
  x: 475,
  y: 275,
  radius: 100,
  fill: "red",
  stroke: "black"
});

layerA.add(polyA, circA, circB);

stage.add(layerA);

polyA.on("mousedown", function() {
  polyA.sides(polyA.sides() + 1);
  layerA.draw();
});

polyA.on("mouseleave", function() {
  var totalSides = polyA.sides();
  if(totalSides > 3) {
    polyA.sides(polyA.sides() - 1);
  }
  layerA.draw();
});

circA.on("mouseover", function() {
  circA.strokeWidth(10);
  layerA.draw();
});

circA.on("mouseup", function() {
  circA.strokeWidth(5);
  layerA.draw();
});

circB.on("mouseenter", function() {
  stage.container().style.cursor = "crosshair";
});

circB.on("mouseleave", function() {
  stage.container().style.cursor = "default";
});

circB.on("mousemove", function() {
  var pointerPos = stage.getPointerPosition();
  var r = pointerPos.x % 255;
  var g = pointerPos.y % 255;
  circB.fill("rgb(" + r + ", " + g + ", 100)");
  layerA.draw();
});

Si l'utilisateur appuie sur n'importe quel bouton de la souris alors que le curseur se trouve à l'intérieur d'un polygone régulier, nous augmenterons le nombre de côtés du polygone de 1. sides() 方法可以在不带参数的情况下使用获取多边形的边数或与一个参数一起使用来设置多边形的边数。您还可以使用 getSides() 获取边数，并使用 setSides() Définissez le nombre de côtés. Chaque fois que le curseur de la souris quitte le polygone, les côtés du polygone sont décrémentés d'un.

Pour les cercles plus petits, l'événement mouseover 事件用于将描边宽度值设置为 10。 mouseup 事件将描边宽度值更改为 5。请记住mouseup doit avoir lieu à l'intérieur du cercle lui-même. Par exemple, si vous appuyez sur le bouton de la souris à l’intérieur d’un cercle, puis relâchez le bouton de la souris une fois que le curseur s’est déplacé à l’extérieur du cercle, la largeur du trait ne passe pas à 5.

Pour les cercles plus grands, nous utilisons mousemove 事件来更改其 fill 颜色。每当光标移入和移出圆圈时，我们还会使用 stage.container().style.cursor pour changer le curseur du plus grand cercle.

Une chose importante à retenir est que si l'écouteur d'événement d'une forme entraîne la modification de propriétés telles que le remplissage, alors la méthode draw() doit être appelée sur la couleur du calque, la largeur du trait, etc. Sinon, les modifications ne seront pas reflétées sur le canevas.

Vous n'êtes pas obligé de lier les événements à une forme à la fois. Vous pouvez également transmettre une chaîne séparée par des espaces contenant plusieurs types d'événements à la méthode on(). Cela liera tous les événements répertoriés dans la chaîne à cette forme spécifique.

Konva prend également en charge les versions mobiles correspondantes de toutes ces activités. Par exemple, vous pouvez vous inscrire touchstart, touchmove, touchend, tap, Utilisez Konva sur votre appareil mobile dbltap、dragstart、dragmove 和 dragend.

Vous pouvez également utiliser fire() 方法针对特定形状触发任何这些事件。同样，Konva 允许您触发自定义事件，例如 throwStones.

Supprimer l'écouteur d'événement

Vous pouvez supprimer tout écouteur d'événement attaché à une forme à l'aide de la méthode off() dans Konva. Vous spécifiez simplement les noms d'événements que vous ne souhaitez pas écouter.

您还可以为单个形状创建多个事件绑定。例如，假设您有一个圆，并且您希望每次鼠标光标经过它时都增加圆的半径，直至达到一定限制。您可能还想在每个 mouseover 事件上更改圆圈的填充颜色。

一种选择是在单个 mouseover 事件侦听器中执行这两项任务，并稍后停止更新半径。另一种选择是创建两个具有不同命名空间的 mouseover 事件侦听器来识别它们。这样，您将能够独立地增加半径并更改填充颜色。

circA.on("mouseover.radius", function() {
  var curRadius = circA.radius();
  if(curRadius < 150) {
    circA.radius(curRadius + 5);
    layerA.draw();
  } else {
    circA.off('mouseover.radius');
  }
});

circA.on("mouseover.fillcolor", function() {
  var h = Math.floor(Math.random()*360);
  var color = "hsl(" + h + ", 60%, 60%)";
  circA.fill(color);
  layerA.draw();
});

您应该注意，我已在两个侦听器中添加了 layerA.draw() 。如果您未能将其添加到 mouseover.fillcolor 侦听器中，则一旦半径变为 150，颜色就会停止更新。

您还可以使用 setListening() 方法停止侦听绑定到某个形状的所有事件，而不是一次删除一个事件侦听器。您可以将 true 和 false 传递给此方法，以关闭事件侦听器 on 和 off。请记住，您还必须在调用 setListening() 后立即调用 drawHit() 方法来重新绘制受影响图层的命中图。 p>

事件委托和传播

您还可以将事件绑定到图层本身，而不是将事件直接绑定到图层上的所有形状。之后，您可以使用事件对象的 target 属性确定哪个形状触发了事件。通过这种方式，Konva 允许您有效地将事件从父级委托给其子级。

假设您正在监听 Konva 图层上绘制的圆圈上的单击事件。相同的单击事件会传播到包含组以及包含图层。这可能是也可能不是预期的行为。如果要防止事件在形状内部冒泡到包含层，可以将事件对象的 cancelBubble 属性设置为 true。

var canvasWidth = 600;
var canvasHeight = 400;

var stage = new Konva.Stage({
  container: "example",
  width: canvasWidth,
  height: canvasHeight
});

var layerA = new Konva.Layer();

var circA = new Konva.Circle({
  x: 300,
  y: 200,
  height: 100,
  fill: "orange",
  stroke: "black",
  name: "Orange Circle"
});

var starA = new Konva.Star({
  x: 125,
  y: 125,
  innerRadius: 25,
  outerRadius: 75,
  rotation: 90,
  fill: "blue",
  stroke: "black",
  name: "Blue Star"
});

var ringA = new Konva.Ring({
  x: 475,
  y: 275,
  innerRadius: 25,
  outerRadius: 75,
  fill: "brown",
  stroke: "black",
  name: "Brown Ring"
});

var textA = new Konva.Text({
  text: "",
  fontFamily: "Calibri",
  fontSize: 24,
  fill: "black",
  x: 10,
  y: 10
});

layerA.add(circA, starA, ringA, textA);

stage.add(layerA);

layerA.on("click", function(e) {
  var shapeName = e.target.attrs.name;
  textA.setText(shapeName);
  layerA.draw();
});

我使用 name 属性为每个形状指定一个名称。然后使用 setText() 方法将 textA 内的文本更改为我们刚刚单击的形状的名称。

自定义命中区域

在上面的示例中，当单击发生在内圆和外圆之间时，环记录了对其的单击。如果您也想记录小圆圈内的点击怎么办？ Konva 允许您使用 hitFunc 属性定义自定义命中区域。该属性接受一个函数作为其值，该函数用于绘制自定义命中区域。

以下示例向您展示如何创建自定义命中区域。您现在应该能够单击星形尖峰之间的区域并仍然记录单击。借助自定义点击区域，您可以确保用户不必单击确切位置即可注册单击事件。在处理更小或更复杂的形状时，这可以带来更好的用户体验。

var starA = new Konva.Star({
  x: 125,
  y: 125,
  innerRadius: 25,
  outerRadius: 75,
  rotation: 90,
  fill: "blue",
  stroke: "black",
  name: "Blue Star",
  hitFunc: function(context) {
    context.beginPath();
    context.arc(0, 0, this.getOuterRadius(), 0, Math.PI * 2, true);
    context.closePath();
    context.fillStrokeShape(this);
  }
});

var ringA = new Konva.Ring({
  x: 475,
  y: 275,
  innerRadius: 25,
  outerRadius: 75,
  fill: "brown",
  stroke: "black",
  name: "Brown Ring",
  hitFunc: function(context) {
    context.beginPath();
    context.arc(0, 0, this.getOuterRadius(), 0, Math.PI * 2, true);
    context.closePath();
    context.fillStrokeShape(this);
  }
});

最终想法

在本教程中，我们介绍了可以绑定到 Konva 中任何形状的不同移动和桌面事件。您可以一次附加一个事件，也可以一次附加多个事件。 Konva 还允许您使用 fire() 方法以编程方式触发自己的自定义事件。本教程的最后一部分向您展示了如何定义自己的命中区域，以便检测可能大于或小于原始形状的区域上的命中。

将本教程的知识与本系列中其他教程的知识相结合，您现在应该能够在画布上绘制各种形状并允许用户与它们进行交互。

如果您对本教程有任何疑问，请随时在评论中告诉我。

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!