HTML5 Canvas-Ereignisse für Konva: Teil 5, Aktionen

Wenn Sie diese Serie von Anfang an verfolgt haben, sollten Sie mittlerweile mit Formen, Gruppen und Ebenen bestens vertraut sein. Sie sollten mit Konva auch problemlos einige grundlegende und komplexe Formen auf Leinwand zeichnen können. Wenn Sie vorhaben, mit Konva interaktive Anwendungen oder Spiele zu erstellen, ist es der nächste logische Schritt, zu lernen, wie Sie Ereignisse an verschiedene Formen auf der Bühne binden.

In diesem Tutorial erfahren Sie, wie Sie Ereignisse mit Konva an jede beliebige Form binden. Sie erfahren auch etwas über die Delegation und Verbreitung von Ereignissen. Manchmal müssen Sie möglicherweise den Klickbereich einer Form programmgesteuert steuern und Ereignisse auslösen. Auch diese beiden Themen werden wir besprechen.

Ereignisse an Formen binden

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

Hier ist ein Ereignis, das mousedown 和 mouseleave 事件的示例。同样，较小的圆圈绑定到 mouseover 和 mouseup 事件，较大的圆圈绑定到 mouseenter、mouseleave 和 mousemove auf einem regelmäßigen Polygon (Sechseck) erkennt.

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();
});

Wenn der Benutzer eine beliebige Maustaste drückt, während sich der Cursor innerhalb eines regelmäßigen Polygons befindet, erhöhen wir die Anzahl der Seiten des Polygons um 1. sides() 方法可以在不带参数的情况下使用获取多边形的边数或与一个参数一起使用来设置多边形的边数。您还可以使用 getSides() 获取边数，并使用 setSides() Stellen Sie die Anzahl der Seiten ein. Jedes Mal, wenn der Mauszeiger das Polygon verlässt, werden die Seiten des Polygons um eins verkleinert.

Bei kleineren Kreisen muss das mouseover 事件用于将描边宽度值设置为 10。 mouseup 事件将描边宽度值更改为 5。请记住mouseup-Ereignis innerhalb des Kreises selbst stattfinden. Wenn Sie beispielsweise die Maustaste innerhalb eines Kreises drücken und dann die Maustaste loslassen, nachdem sich der Cursor außerhalb des Kreises bewegt hat, ändert sich die Strichstärke nicht auf 5.

Bei größeren Kreisen verwenden wir mousemove 事件来更改其 fill 颜色。每当光标移入和移出圆圈时，我们还会使用 stage.container().style.cursor, um den Cursor des größeren Kreises zu ändern.

Eine wichtige Sache, die Sie beachten sollten: Wenn der Ereignis-Listener einer Form dazu führt, dass sich Eigenschaften wie die Füllung ändern, muss die draw()-Methode für die entsprechende Ebenenfarbe, Strichstärke usw. aufgerufen werden. Andernfalls werden Änderungen nicht auf der Leinwand angezeigt.

Sie müssen Ereignisse nicht jeweils an eine Form binden. Sie können der on()-Methode auch eine durch Leerzeichen getrennte Zeichenfolge übergeben, die mehrere Ereignistypen enthält. Dadurch werden alle in der Zeichenfolge aufgeführten Ereignisse an diese bestimmte Form gebunden.

Konva unterstützt auch entsprechende mobile Versionen all dieser Aktivitäten. Sie können sich zum Beispiel registrieren touchstart, touchmove, touchend, tap, Verwenden Sie Konva auf Ihrem Mobilgerät dbltap、dragstart、dragmove 和 dragend.

Sie können auch fire() 方法针对特定形状触发任何这些事件。同样，Konva 允许您触发自定义事件，例如 throwStones verwenden.

Ereignis-Listener löschen

Mit Hilfe der off()-Methode in Konva können Sie jeden an eine Form angehängten Ereignis-Listener entfernen. Sie geben einfach die Ereignisnamen an, die Sie nicht hören möchten.

您还可以为单个形状创建多个事件绑定。例如，假设您有一个圆，并且您希望每次鼠标光标经过它时都增加圆的半径，直至达到一定限制。您可能还想在每个 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() 方法以编程方式触发自己的自定义事件。本教程的最后一部分向您展示了如何定义自己的命中区域，以便检测可能大于或小于原始形状的区域上的命中。

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

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

Das obige ist der detaillierte Inhalt vonHTML5 Canvas-Ereignisse für Konva: Teil 5, Aktionen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!