캔버스를 기준으로 드래그 한 후 캔버스 요소의 위치를 ​​얻습니다.

Question

캔버스를 두 번 클릭하여 요소를 만들면 사용자가이 작업을 n 번 수행 할 수 있습니다. 각 요소는 드래그 가능합니다.

각 요소에 대해 x/y 좌표의 특정 사각형 내로 드래그하면 그 사각형 내에서 clearRect()을 효과적으로 드래그 한 요소를 삭제하려고합니다.

어떻게 구현하나요? 현재

:

var stage = new Kinetic.Stage({ 
    container: 'container', 
    width: 662, 
    height: 983 
}); 
var layer = new Kinetic.Layer(); 
stage.add(layer); 

$(stage.getContent()).on('dblclick', function (event) { 
    var pos = stage.getMousePosition(); 
    var mouseX = parseInt(pos.x); 
    var mouseY = parseInt(pos.y); 
    var text = new Kinetic.Text({ 
     x: mouseX, 
     y: mouseY, 
     text: cc, 
     fill: "blue", 
     draggable: true, 
    }); 
    layer.add(text); 
    layer.draw(); 
} 

Answer 1

당신은 요소가 삭제 사각형 안에있는 경우 테스트 yourElement.on ("dragend", 핸들러)를 사용할 수 있습니다.

내부에있는 경우 yourElement.destroy()를 사용하여 해당 요소를 파괴 할 수 있습니다.

예제 코드와 데모 : 나는`getMousePosition()을 생각하지 않는다 http://jsfiddle.net/m1erickson/jqPhe/

var stage = new Kinetic.Stage({ 
    container: 'container', 
    width: 350, 
    height: 350 
}); 
var layer = new Kinetic.Layer(); 
stage.add(layer); 


// define the boundaries of the deletion box 

var dx=200; 
var dy=40; 
var dw=100; 
var dh=100; 


// create the deletion box 

var deleteMe=new Kinetic.Rect({ 
    x:dx, 
    y:dy, 
    width:dw, 
    height:dh, 
    stroke:"red" 
}); 
layer.add(deleteMe); 
var label=new Kinetic.Text({ 
    x:dx, 
    y:10, 
    text:"Drag here to delete\n(Must be fully inside)", 
    fill:"black" 
}); 
layer.add(label); 


// create a circle element for testing purposes 

var circle1 = new Kinetic.Circle({ 
    x:100, 
    y:100, 
    radius: 30, 
    fill: 'red', 
    stroke: 'black', 
    strokeWidth: 4, 
    draggable: true 
}); 

// on dragend: test if this circle is inside the deletion rectangle. If yes, delete this circle. 

circle1.on("dragend",function(){ 
    var x=this.getX(); 
    var y=this.getY(); 
    if(x>=dx && x<=dx+dw && y>=dy && y<=dy+dh){ 
     this.destroy(); 
     layer.draw(); 
    } 
}); 
layer.add(circle1); 
layer.draw();