5
Tôi đang làm việc trên một ứng dụng dựa trên web nơi người dùng có thể tạo nhiều phần tử svg. tất cả các phần tử là 'đường dẫn' (đường dẫn đóng là hình vuông hoặc hình chữ nhật). Người dùng có thể di chuyển và xoay bất kỳ phần tử nào.Cách kiểm tra giao điểm của các phần tử Svg
Bây giờ tôi muốn cảnh báo người dùng khi một phần tử chạm hoặc cắt nhau bất kỳ phần tử nào khác.
bất kỳ trợ giúp nào sẽ được đánh giá cao.
cảm ơn.
đây là linke jsfiddle http://jsfiddle.net/nnYSp/
Mã là: -
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="600" height="500">
<path id="obj1" d="M 100 50 L 150 50 150 120 100 120 z" stroke="black" stroke-width="2" fill="yellow" move transform="translate(10,0) rotate(45,125,85)"/>
<path id="obj2" d="M 150 150 L 200 150 200 200 150 200 z" stroke="red" stroke-width="2" fill="black" move transform="translate(10,0)"/>
</svg>
<script type="text/javascript">
document.addEventListener('mousedown', mousedown, false);
document.addEventListener('mousemove', mousemove, false);
document.addEventListener('mouseup', mouseup, false);
var obj1_rotate_string="rotate(45,125,85)";
var obj1_translate_values={
x:10,
y:0
}
var obj2_rotate_string="";
var obj2_translate_values={
x:10,
y:0
}
var mousedownFlag=false;
var mousedown={
x:0,
y:0
}
var targetObj={
t:null,
r:null,
obj:null
};
function mousedown(event){
if(event.target.hasAttribute('move')){
mousedownFlag=true;
mousedown.x=event.pageX;
mousedown.y=event.pageY;
var Obj=event.target.id;
if(Obj==='obj1'){
targetObj.obj='obj1'
}
else{
targetObj.obj='obj2'
}
}
}
function mousemove(event){
if(mousedownFlag){
var dx=event.pageX-mousedown.x;
var dy=event.pageY-mousedown.y;
if(targetObj.obj==='obj1'){
obj1_translate_values.x+=dx;
obj1_translate_values.y+=dy;
var obj=document.getElementById(targetObj.obj);
obj.setAttribute('transform', 'translate('+ obj1_translate_values.x+','+ obj1_translate_values.y+')'+ obj1_rotate_string);
}
else if(targetObj.obj==='obj2'){
obj2_translate_values.x+=dx;
obj2_translate_values.y+=dy;
var obj=document.getElementById(targetObj.obj);
obj.setAttribute('transform', 'translate('+ obj2_translate_values.x+','+ obj2_translate_values.y+')'+ obj2_rotate_string);
}
mousedown.x=event.pageX;
mousedown.y=event.pageY;
}
}
function mouseup(event){
mousedownFlag=false;
}
</script>
</body>
Tôi khuyên bạn nên sử dụng raphael và sau đó bạn có thể sử dụng kết hợp http://raphaeljs.com/reference.html#Element.getBBox và http://raphaeljs.com/reference.html#Paper.getElementsByPoint để viết logic ... –
cảm ơn cho trả lời, tôi không sử dụng raphael và tôi không thể sử dụng, vì vậy tôi cần phải tìm giải pháp với Javascript bản địa và Svg. Ngoài ra BBOX không hoạt động chính xác nếu phần tử được xoay. – RashFlash
Xem http://stackoverflow.com/questions/5396657/event-when-two-svg-elements-touch và lưu ý rằng bạn có thể áp dụng các biến đổi cho kết quả bbox để nhận "bbox được xoay", xem ví dụ: http://my.opera.com/MacDev_ed/blog/getting-screen-boundingboxes-in-svg. –