2016-07-14 7 views
3

면책 조항 :이 게시물은 this post의 복제본으로 간주 될 수 있지만 필자의 필요성을 구체적으로 보여주었습니다.KonvaJS를 사용하여 상단 레이어의 모양에서 하단 레이어의 이미지로 클릭 이벤트를 전파하는 방법은 무엇입니까?

나는 사각형 모양에서 클릭 이벤트를 낮은 계층에 추가 된 여러 이미지 (즉, 상위 계층의 자식) 전파 할 필요가 내 KonvaJS 응용 프로그램의 경우이 .

하위 레이어 이미지와 도형 사이에 50 개 이상의 개체가 있으므로 하위 레이어의 대상 개체가 어떻게 될 수 있습니까? 것이 가능

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>

답변

3

기술적으로는 수동 노드에서 click 이벤트를 트리거하기 : 친절하게 여기

내 필요를 입증하는 예이다. 하지만 반 패턴이라고 생각합니다. 'getIntersection()'함수를 사용하여 교차점을 찾고 노드와 함께 필요한 작업을 수행 할 수 있습니다.

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>

관련 문제