Wie wird ein Klickereignis von einer Form in der oberen Ebene auf ein Bild in der unteren Ebene mithilfe von KonvaJS übertragen?

Haftungsausschluss: Es kann sein, dass dieser Beitrag ein Duplikat von this post ist, aber ich habe meine Notwendigkeit speziell gezeigt.Wie wird ein Klickereignis von einer Form in der oberen Ebene auf ein Bild in der unteren Ebene mithilfe von KonvaJS übertragen?

Ich habe einen Fall in meiner KonvaJS Anwendung, wo ich ein Click-Ereignis von der Rechteck-Form zu propagieren (das ist ein Kind der oberen Schicht) auf mehrere Bilder, die das Lower Layer hinzugefügt werden .

Bitte beachten Sie, dass ich in der unteren Ebene mehr als 50 Objekte zwischen Bildern und Formen habe, also wie kann ich jetzt was ist das Zielobjekt in der unteren Ebene.

Bitte hier ein Beispiel mein Bedürfnis zu zeigen:

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

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

 
var lowerLayer = new Konva.Layer(); 
 
var upperLayer = new Konva.Layer(); 
 

 
//lion 
 
var lionImage = new Image(); 
 
lionImage.onload = function() { 
 

 
    var lion = new Konva.Image({ 
 
    x: 50, 
 
    y: 50, 
 
    image: lionImage, 
 
    width: 106, 
 
    height: 118 
 
    }); 
 

 
    // add the shape to the layer 
 
    lowerLayer.add(lion); 
 
    stage.draw(); 
 

 
    lion.on("click", function() { 
 
    alert("you clicked the lion"); 
 
    }); 
 

 
}; 
 
lionImage.src = 'http://konvajs.github.io/assets/lion.png'; 
 

 
//monkey 
 
var monkeyImage = new Image(); 
 
monkeyImage.onload = function() { 
 

 
    var monkey = new Konva.Image({ 
 
    x: 200, 
 
    y: 50, 
 
    image: monkeyImage, 
 
    width: 106, 
 
    height: 118 
 
    }); 
 

 
    // add the shape to the layer 
 
    lowerLayer.add(monkey); 
 
    stage.draw(); 
 

 
    monkey.on("click", function() { 
 
    alert("you clicked the monkey"); 
 
    }); 
 
}; 
 
monkeyImage.src = 'http://konvajs.github.io/assets/monkey.png'; 
 

 
var upperTransparentBox = new Konva.Rect({ 
 
    x: 0, 
 
    y: 0, 
 
    height: stage.height(), 
 
    width: stage.width(), 
 
    fill: 'transparent', 
 
    draggable: false, 
 
    name: 'upperTransparentBox' 
 
}); 
 
upperTransparentBox.on("click", function() { 
 
    alert("you clicked the upper Transparent Box"); 
 
}); 
 
upperLayer.add(upperTransparentBox); 
 

 
// add the layer to the stage 
 
stage.add(lowerLayer); 
 
stage.add(upperLayer);

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <script src="https://cdn.rawgit.com/konvajs/konva/1.0.2/konva.min.js"></script> 
 
    <meta charset="utf-8"> 
 
    <title>Konva Image Demo</title> 
 
    <style> 
 
    body { 
 
     margin: 0; 
 
     padding: 0; 
 
     overflow: hidden; 
 
     background-color: #F0F0F0; 
 
    } 
 
    </style> 
 
</head> 
 

 
<body> 
 
    <div id="container"></div> 
 
</body> 
 

 
</html>

Quelle

2016-07-14 Mahdi Alkhatib

Technisch ist es möglich, manuell click Ereignis auf jedem Knoten auszulösen. Aber ich denke, es ist ein Antipattern. Sie können nur eine Schnittmenge mit der 'getIntersection()' Funktion finden und tun, was Sie mit einem Knoten brauchen.

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

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

 
var lowerLayer = new Konva.Layer(); 
 
var upperLayer = new Konva.Layer(); 
 

 
//lion 
 
var lionImage = new Image(); 
 
lionImage.onload = function() { 
 

 
    var lion = new Konva.Image({ 
 
    x: 50, 
 
    y: 50, 
 
    name: 'lion', 
 
    image: lionImage, 
 
    width: 106, 
 
    height: 118 
 
    }); 
 

 
    // add the shape to the layer 
 
    lowerLayer.add(lion); 
 
    stage.draw(); 
 

 
    lion.on("click", function() { 
 
    alert("you clicked the lion"); 
 
    }); 
 

 
}; 
 
lionImage.src = 'http://konvajs.github.io/assets/lion.png'; 
 

 
//monkey 
 
var monkeyImage = new Image(); 
 
monkeyImage.onload = function() { 
 

 
    var monkey = new Konva.Image({ 
 
    x: 200, 
 
    y: 50, 
 
    name: 'monkey', 
 
    image: monkeyImage, 
 
    width: 106, 
 
    height: 118 
 
    }); 
 

 
    // add the shape to the layer 
 
    lowerLayer.add(monkey); 
 
    stage.draw(); 
 

 
    monkey.on("click", function() { 
 
    alert("you clicked the monkey"); 
 
    }); 
 
}; 
 
monkeyImage.src = 'http://konvajs.github.io/assets/monkey.png'; 
 

 
var upperTransparentBox = new Konva.Rect({ 
 
    x: 0, 
 
    y: 0, 
 
    height: stage.height(), 
 
    width: stage.width(), 
 
    fill: 'transparent', 
 
    draggable: false, 
 
    name: 'upperTransparentBox' 
 
}); 
 
upperTransparentBox.on("click", function() { 
 
    var target = lowerLayer.getIntersection(stage.getPointerPosition()); 
 
    if (target) { 
 
     alert('clicked on ' + target.name()); 
 
    } 
 
}); 
 
upperLayer.add(upperTransparentBox); 
 

 
// add the layer to the stage 
 
stage.add(lowerLayer); 
 
stage.add(upperLayer);

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <script src="https://cdn.rawgit.com/konvajs/konva/1.0.2/konva.min.js"></script> 
 
    <meta charset="utf-8"> 
 
    <title>Konva Image Demo</title> 
 
    <style> 
 
    body { 
 
     margin: 0; 
 
     padding: 0; 
 
     overflow: hidden; 
 
     background-color: #F0F0F0; 
 
    } 
 
    </style> 
 
</head> 
 

 
<body> 
 
    <div id="container"></div> 
 
</body> 
 

 
</html>

Quelle

2016-07-15 01:26:33 lavrton

Wie wird ein Klickereignis von einer Form in der oberen Ebene auf ein Bild in der unteren Ebene mithilfe von KonvaJS übertragen?

Antwort

Verwandte Themen