Konva の HTML5 Canvas イベント: パート 5、アクション

このシリーズを最初から読んでいる場合は、シェイプ、グループ、レイヤーについてはすでによく理解しているはずです。また、Konva を使用すると、キャンバス上に基本的な形状や複雑な形状を簡単に描画できるはずです。 Konva を使用してインタラクティブなアプリケーションやゲームを作成する予定がある場合は、イベントをステージ上のさまざまな形状にバインドする方法を学ぶことが次の当然のステップです。

このチュートリアルでは、Konva を使用してイベントを任意のシェイプにバインドする方法を学習します。イベントの委任と伝播についても学習します。場合によっては、図形のクリック領域をプログラムで制御し、イベントをトリガーする必要がある場合があります。これら 2 つのトピックについても説明します。

イベントをシェイプにバインドする

on() メソッドを使用すると、Konva で作成した任意のシェイプにさまざまなイベントをバインドできます。最初の引数としてイベント名を渡し、2 番目の引数としてイベントの発生時に実行される関数を渡すだけです。 Konva を使用すると、mouseup、mousedown、mouseenter、mouseleave、mouseover 、mousemove を検出できます。 、click、dblclick。さらに、Konva を使用すると、wheel、dragstart、dragmove、dragend イベントを検出できます。

ここでは、正多角形(六角形)上のmousedownおよびmouseleaveイベントを検出する例を示します。同様に、小さい円は mouseover および mouseup イベントにバインドされ、大きい円は mouseenter、mouseleave、および mousemove イベント。

カーソルが正多角形の中にあるときにユーザーがマウス ボタンを押すと、多角形の辺の数が 1 つ増えます。 sides() このメソッドは、パラメータなしで多角形の辺の数を取得するために使用することも、1 つのパラメータを使用して多角形の辺の数を設定するために使用することもできます。 getSides() を使用して辺の数を取得し、setSides() を使用して辺の数を設定することもできます。マウス カーソルが多角形から離れるたびに、多角形の辺が 1 つ減ります。

小さな円の場合、mouseover イベントを使用してストローク幅の値を 10 に設定します。 mouseup イベントはストローク幅の値を 5 に変更します。 mouseup イベントはサークル自体の内部で発生する必要があることに注意してください。たとえば、円の内側でマウス ボタンを押し、カーソルが円の外側に移動した後にマウス ボタンを放した場合、ストロークの幅は 5 に変わりません。

大きな円の場合、mousemove イベントを使用して、その fill の色を変更します。また、stage.container().style.cursor を使用して、カーソルが円の内外に移動するたびに、カーソルを大きな円に変更します。

覚えておくべき重要なことの 1 つは、シェイプのイベント リスナーによって塗りつぶしなどのプロパティが変更される場合、対応するレイヤー メソッドの色、ストロークの幅などで draw() を呼び出す必要があるということです。そうしないと、変更がキャンバスに反映されません。

イベントを一度に 1 つの図形にバインドする必要はありません。複数のイベント タイプを含むスペース区切りの文字列を on() メソッドに渡すこともできます。これにより、文字列にリストされているすべてのイベントがその特定の形状にバインドされます。

Konva は、これらすべてのアクティビティの対応するモバイル バージョンもサポートしています。たとえば、touchstart を登録できます。 タッチムーブ、タッチエンド、タップ、 モバイル デバイスで Konva の dbltap、dragstart、dragmove、dragend を使用します。

fire() メソッドを使用して、特定のシェイプに対してこれらのイベントをトリガーすることもできます。同様に、Konva を使用すると、throwStones などのカスタム イベントをトリガーできます。

イベントリスナーの削除

Konva の off() メソッドを使用して、シェイプにアタッチされたイベント リスナーを削除できます。リッスンしたくないイベント名を指定するだけです。

您还可以为单个形状创建多个事件绑定。例如，假设您有一个圆，并且您希望每次鼠标光标经过它时都增加圆的半径，直至达到一定限制。您可能还想在每个 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() 方法来重新绘制受影响图层的命中图。

事件委托和传播

您还可以将事件绑定到图层本身，而不是将事件直接绑定到图层上的所有形状。之后，您可以使用事件对象的 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() 方法以编程方式触发自己的自定义事件。本教程的最后一部分向您展示了如何定义自己的命中区域，以便检测可能大于或小于原始形状的区域上的命中。

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

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

以上がKonva の HTML5 Canvas イベント: パート 5、アクションの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。