ステージのクリックリスナーの設定

Question

警告：スニペットを実行する前に音量を下げてください！

ステージをクリックして 'モジュール'シェイプを追加できます。しかし、私は、 'module'シェイプ自体をクリックすると別のレイヤーが作成されることが判明しました。これは、stage.clickリスナーが呼び出されてはならないときに呼び出されることを意味します。

シェイプをクリックしたときに間違って起動しないstage.clickリスナーを作成するにはどうすればよいですか？

var width = window.innerWidth; 
var height = window.innerHeight; 

var rectButtonClicked = false; 

var stage = new Konva.Stage({ 
    container: 'container', 
    width: width, 
    height: height 
}); 

var layer = new Konva.Layer(); 

var group = new Konva.Group({ 
    draggable: true 
}); 

stage.on('contentClick', function() { 
    createModule(); 
}); 

function createModule() { 

    var mouseX = stage.getPointerPosition().x; 
    var mouseY = stage.getPointerPosition().y; 

    var rect = new Konva.Rect({ //module rect 
    x: mouseX, 
    y: mouseY, 
    width: 100, 
    height: 50, 
    cornerRadius: 5, 
    fill: '#BEDBDD', 
    stroke: '#807C7B', 
    strokeWidth: 2, 
    draggable: true 
    }); 
    group.add(rect); 

    var buttonRect = new Konva.Rect({ //button 
    x: mouseX+80, 
    y: mouseY+20, 
    width: 10, 
    height: 10, 
    cornerRadius: 1, 
    fill: 'blue', 
    stroke: '#807C7B', 
    strokeWidth: 1, 
    }); 
    group.add(buttonRect) 

    var text = new Konva.Text({ //text on module 
    x: mouseX + 20, 
    y: mouseY + 20, 
    //fontFamily: 'Calibri', 
    fontSize: 16, 
    text: 'OSC', 
    fill: 'black' 
    }); 
    group.add(text); 

    var randomFreq = getRandomInt(); 
    var osc = new Tone.Oscillator(randomFreq, "sawtooth"); 
    layer.add(group); 
    stage.add(layer); 

    buttonRect.on('click', function() { 
    rectButtonClicked = !rectButtonClicked; 
    if(rectButtonClicked){  
    osc.toMaster().start(); 
    this.setFill('red'); 
    } else { 
    osc.stop(); 
    this.setFill('blue'); 
    } 
}); 
} 

function getRandomInt() { 
    min = Math.ceil(100); 
    max = Math.floor(1000); 
    return Math.floor(Math.random() * (max - min)) + min; 
} 

var width = window.innerWidth; 
 
var height = window.innerHeight; 
 

 
//var drag = false; 
 
var rectButtonClicked = false; 
 

 
var stage = new Konva.Stage({ 
 
    container: 'container', 
 
    width: width, 
 
    height: height 
 
}); 
 

 
var layer = new Konva.Layer(); 
 

 
var group = new Konva.Group({ 
 
    draggable: true 
 
}); 
 

 
stage.on('contentClick', function() { 
 
    createModule(); 
 
}); 
 

 
function createModule() { 
 

 
    var mouseX = stage.getPointerPosition().x; 
 
    var mouseY = stage.getPointerPosition().y; 
 

 
    var rect = new Konva.Rect({ //module rect 
 
    x: mouseX, 
 
    y: mouseY, 
 
    width: 100, 
 
    height: 50, 
 
    cornerRadius: 5, 
 
    fill: '#BEDBDD', 
 
    stroke: '#807C7B', 
 
    strokeWidth: 2, 
 
    draggable: true 
 
    }); 
 
    group.add(rect); 
 
    
 
    var buttonRect = new Konva.Rect({ //button 
 
    x: mouseX+80, 
 
    y: mouseY+20, 
 
    width: 10, 
 
    height: 10, 
 
    cornerRadius: 1, 
 
    fill: 'blue', 
 
    stroke: '#807C7B', 
 
    strokeWidth: 1, 
 
    }); 
 
    group.add(buttonRect) 
 
    
 
    var text = new Konva.Text({ //text on module 
 
    x: mouseX + 20, 
 
    y: mouseY + 20, 
 
    //fontFamily: 'Calibri', 
 
    fontSize: 16, 
 
    text: 'OSC', 
 
    fill: 'black' 
 
    }); 
 
    group.add(text); 
 
    
 
    var randomFreq = getRandomInt(); 
 
    var osc = new Tone.Oscillator(randomFreq, "sawtooth"); 
 
    layer.add(group); 
 
    stage.add(layer); 
 
    
 
    buttonRect.on('click', function() { 
 
    rectButtonClicked = !rectButtonClicked; 
 
    if(rectButtonClicked){  
 
    osc.toMaster().start(); 
 
    this.setFill('red'); 
 
    } else { 
 
    osc.stop(); 
 
    this.setFill('blue'); 
 
    } 
 
}); 
 
} 
 

 
function getRandomInt() { 
 
    min = Math.ceil(100); 
 
    max = Math.floor(1000); 
 
    return Math.floor(Math.random() * (max - min)) + min; 
 
}

<script src="https://tonejs.github.io/build/Tone.min.js"></script> 
 
<script src="https://cdn.rawgit.com/konvajs/konva/1.7.6/konva.min.js"></script> 
 
<div id="container"></div>

Answer 1

stage.contentClick（）リスナーを使用すると、ステージはステージ内容のイベントを聞きたいときに使用する特殊なケースです。ただし、cancelBubble（）関数は、シェイプのクリックをstage.contentClick（）リスナーに向かってバブリングするイベントを停止しません。

ステージのクリックが発生したという印象を与える効果を得るには、ステージを塗りつぶす矩形を追加し、ステージの代わりにその矩形のイベントを待ち受ける必要があります。

以下は実際の例です。私が意図的に追加した赤い背景は、ステージの上に何か他のものがあることを知っているからです。これを削除するには、clickRectの塗りつぶし色を取り出します。

コンテンツを正しくグループ化してドラッグするようにボタンを修正しました。あなたはほとんど正しいが、createModule（）関数でグループを作成する必要がありました。私はグループ要素dragabble = falseをプロセスを完了させるために作ったことがわかります。

イベントが発生したときに表示するコンソール書き込みを2つ追加しました。

[私はトーンのためにトーンを入れたときにかなりのショックを受けました]。

var width = window.innerWidth; 
 
var height = window.innerHeight; 
 

 
//var drag = false; 
 
var rectButtonClicked = false; 
 

 
var stage = new Konva.Stage({ 
 
    container: 'container', 
 
    width: width, 
 
    height: height 
 
}); 
 

 
var layer = new Konva.Layer(); 
 
stage.add(layer); 
 

 
var clickRect = new Konva.Rect({ 
 
    x:0, 
 
    y:0, 
 
    width: width, 
 
    height: height, 
 
    fill: 'red', 
 
    stroke: '#807C7B', 
 
    strokeWidth: 2, 
 
    listening: 'true' 
 
}) 
 
layer.add(clickRect); 
 

 
clickRect.on('click', function() { 
 
    console.log('Stage click'); 
 
    createModule(); 
 
}); 
 

 
function createModule() { 
 
    var group = new Konva.Group({ // move group create into createModule 
 
    draggable: true // we will make the elements not draggable - we drag the group 
 
    }); 
 

 
    var mouseX = stage.getPointerPosition().x; 
 
    var mouseY = stage.getPointerPosition().y; 
 

 
    var rect = new Konva.Rect({ //module rect 
 
    x: mouseX, 
 
    y: mouseY, 
 
    width: 100, 
 
    height: 50, 
 
    cornerRadius: 5, 
 
    fill: '#BEDBDD', 
 
    stroke: '#807C7B', 
 
    strokeWidth: 2, 
 
    draggable: false // make the element not draggable - we drag the group 
 
    }); 
 
    group.add(rect); 
 
    
 
    rect.on('click', function(evt){ 
 
    console.log('Clicked on button'); 
 
    }) 
 
    
 
    var buttonRect = new Konva.Rect({ //button 
 
    x: mouseX+80, 
 
    y: mouseY+20, 
 
    width: 10, 
 
    height: 10, 
 
    cornerRadius: 1, 
 
    fill: 'blue', 
 
    stroke: '#807C7B', 
 
    strokeWidth: 1, 
 
    listening: true, 
 
    draggable: false // make the element not draggable - we drag the group 
 
    }); 
 
    group.add(buttonRect) 
 

 
    var text = new Konva.Text({ //text on module 
 
    x: mouseX + 20, 
 
    y: mouseY + 20, 
 
    //fontFamily: 'Calibri', 
 
    fontSize: 16, 
 
    text: 'OSC', 
 
    fill: 'black', 
 
    draggable: false // make the element not draggable - we drag the group 
 
    }); 
 
    group.add(text); 
 
    
 
    var randomFreq = getRandomInt(); 
 
    var osc = new Tone.Oscillator(randomFreq, "sawtooth"); 
 
    layer.add(group); 
 
    stage.add(layer); 
 

 
    buttonRect.on('click', function(evt) { 
 
    rectButtonClicked = !rectButtonClicked; 
 
    if(rectButtonClicked){  
 
    osc.toMaster().start(); 
 
    this.setFill('red'); 
 
    } else { 
 
    osc.stop(); 
 
    this.setFill('blue'); 
 
    } 
 
}); 
 
} 
 

 
function getRandomInt() { 
 
    min = Math.ceil(100); 
 
    max = Math.floor(1000); 
 
    return Math.floor(Math.random() * (max - min)) + min; 
 
} 
 
stage.draw(); // draw so we can see click rect.

<script src="https://tonejs.github.io/build/Tone.min.js"></script> 
 
<script src="https://cdn.rawgit.com/konvajs/konva/1.7.6/konva.min.js"></script> 
 
<div id="container" style="background-color: gold;"></div>