Comment faire pour propager un événement de clic d'une forme dans le calque supérieur à une image dans le calque inférieur en utilisant KonvaJS?

Clause de non-responsabilité: il peut être considéré que ce poste est un doublon de this post mais j'ai démontré spécifiquement mon besoin.Comment faire pour propager un événement de clic d'une forme dans le calque supérieur à une image dans le calque inférieur en utilisant KonvaJS?

J'ai un cas dans ma KonvaJS demande où je dois propager un événement de clic de la forme de rectangle (qui est un enfant de la couche supérieure) à plusieurs images qui sont ajoutés à la couche inférieure .

S'il vous plaît noter que j'ai dans le couche inférieure plus de 50 objets entre les images et les formes, alors comment puis-je maintenant quel est l'objet cible dans la couche inférieure.

est ici Veuillez un exemple pour démontrer mon besoin:

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>

Source

2016-07-14 Mahdi Alkhatib

Techniquement, il est possible de déclencher manuellement click événement sur un nœud. Mais je pense que c'est un anti-modèle. Vous pouvez simplement trouver une intersection avec la fonction 'getIntersection()' et faire ce dont vous avez besoin avec un noeud.

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>

Source

2016-07-15 01:26:33 lavrton

Comment faire pour propager un événement de clic d'une forme dans le calque supérieur à une image dans le calque inférieur en utilisant KonvaJS?

Répondre

Questions connexes