라인을 클릭하면 포인트를 알고 싶습니다

-1

var line = new Kinetic.Line({ points: [415, 115,617,234], stroke: 'gray', tension: 2}); 
line.addEventListener('click',function(e){ 
debugger; 
// alert(e.x+'.'+ e.y); 
// popup; 
});

라인을 클릭하면 다른 곳을 클릭해야합니다. 라인을 선택 취소해야합니다. 라인을 선택하면 삭제 버튼을 누르면 라인을 가져와야합니다. 그것을하는 방법을 파괴했다.라인을 클릭하면 포인트를 알고 싶습니다

출처

2014-11-07 Amara Balakrishna

당신은 같은 이벤트를 추적하기 위해 무대에 선을 추가해야합니다

//some html 
<div id="container" style="border-style:solid;border-width:1px;"></div>

자바 스크립트 부분

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

var layer = new Kinetic.Layer(); 

var redLine = new Kinetic.Line({ 
    points: [415, 115,617,234], 
    stroke: 'gray', 
    strokeWidth: 15, 
    tension: 2 
}); 
//use .on for event 
redLine.on('click', function(e) { 
    console.log(this.attrs["points"]); 
    //gives:: [Object { x=415, y=115}, Object { x=617, y=234}] 
}, false); 

layer.add(redLine); 
stage.add(layer);

데모 jsFiddle

출처

2014-11-07 06:12:41

참고 : KineticJS는 캔버스 라이브러리입니다. 먼저 캔버스를 사용하려면 캔버스를 만들어야합니다.

<html> 
    <head></head> 
    <body> 
    <!--Some page content here --> 
    <!--Here you want to draw your line --> 
    <!--Make a container for the canvas, which kinetic will draw the line on --> 
    <div id="myCanvasContainer"> 
     <!--Inside here your canvas will be created --> 
    </div> 
    </body> 
</html>

그런 다음 JS 코드. 먼저 kinetic library을 가져옵니다.

//The stage creates the <canvas> element, it's like desktop 
var stage = new Kinetic.Stage({ 
    container: "myCanvasContainer", 
    height: 500, 
    width: 600 
}) 

//A layer is like a paper, you can draw things on it, and then hide or query it 
var layer = new Kinetic.Layer() 

//Let's make our line 
var line = new Kinetic.Line({ 
    points: [5, 30, 300, 250], //[point1(x), point1(y), point2(x), point2(y)] 
    stroke: "lightcoral", 
    strokeWidth: 10 
}).on("click", function(e){ //Here you subscribe to the click event 

    //Gets an array of the points [(Point){x=5, y=30}, (Point){x=300, y=250}] 
    alert(this.attrs["points"]) 
}) 

//Draw to paper 
layer.add(line) 

//Make paper visible on desktop 
stage.add(layer)

희망 사항은 KineticJS입니다. 매우 흥미로운 도서관입니다.

Fiddle

출처

2014-11-08 07:53:35 luxas

라인을 클릭하면 포인트를 알고 싶습니다

답변

관련 문제