Hörer für Bühnenklick einstellen

Question

WARNUNG: Schalten Sie die Lautstärke ab, bevor Sie das Snippet ausführen!

Ich möchte in der Lage sein, auf die Bühne klicken, um eine "Modul" -Form hinzuzufügen. Aber ich habe festgestellt, dass ein Klick auf die Form des Moduls selbst einen anderen erzeugt, was bedeutet, dass der stage.click-Listener ausgelöst wird, wenn es nicht sein sollte.

Wie kann ich einen stage.click-Listener haben, der nicht falsch ausgelöst wird, wenn ich auf eine Form klicke?

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

Die stage.contentClick() Hörer ist ein spezieller Fall verwendet werden, wenn Sie die Bühne wollen Ereignisse auf der Bühne Inhalt zu hören. Die Funktion cancelBubble() stoppt jedoch keine Ereignisse, die von einem Klick auf eine Form zum stage.contentClick() Listener führen.

Um den gewünschten Effekt zu erhalten, der den Eindruck erweckt, dass ein Klick auf die Bühne erfolgt ist, müssen Sie ein Rect hinzufügen, das die Bühne füllt und auf Ereignisse auf dieser Stelle statt auf der Bühne wartet.

Unten ist ein funktionierendes Beispiel. Der rote Hintergrund habe ich absichtlich hinzugefügt, damit du weißt, dass da noch etwas über der Bühne ist. Um dies zu entfernen, entferne die Füllfarbe auf dem clickRect.

Ich reparierte auch Ihre Knöpfe, damit der Inhalt richtig gruppiert wird und zusammen gezogen wird. Sie waren fast korrekt, aber Sie mussten die Gruppe innerhalb der Funktion createModule() erstellen. Sie können sehen, dass ich auch die Gruppenelemente dragabble = false gemacht habe, um den Prozess abzuschließen.

Ich habe ein paar Konsolenschreibvorgänge hinzugefügt, um anzuzeigen, wann die Ereignisse ausgelöst werden.

[Auch ich habe einen ziemlichen Schock bekommen, als ich den Ton für Ton angeschaltet habe].

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>