5
मैं एक वेब आधारित एप्लिकेशन पर काम कर रहा हूं जहां उपयोगकर्ता एकाधिक svg तत्व बना सकता है। सभी तत्व 'पथ' (बंद पथ या तो वर्ग या आयत) हैं। उपयोगकर्ता किसी भी तत्व को स्थानांतरित और घूम सकता है।एसवीजी तत्वों के चौराहे की जांच कैसे करें
अब जब मैं एक तत्व किसी अन्य तत्व को छूता या छेड़छाड़ करता हूं तो मैं उपयोगकर्ता को अलार्म करना चाहता हूं।
किसी भी मदद की सराहना की जाएगी।
धन्यवाद।
यहाँ jsfiddle linke http://jsfiddle.net/nnYSp/
कोड है: -
<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>
मेरा सुझाव है कि आप राफेल का उपयोग करें और फिर आप http://raphaeljs.com/reference.html#Element.getBBox और http://raphaeljs.com/reference.html#Paper.getElementsByPoint के संयोजन का उपयोग कर सकते हैं ताकि आप लिख सकें तर्क ... –
उत्तर के लिए धन्यवाद, मैं राफेल का उपयोग नहीं कर रहा हूं और मैं इसका उपयोग नहीं कर सकता, इसलिए मुझे देशी जावास्क्रिप्ट और एसवीजी के साथ समाधान खोजने की जरूरत है। तत्व घुमाए जाने पर भी बीबीओएक्स सही तरीके से काम नहीं करता है। – RashFlash
http://stackoverflow.com/questions/5396657/event-when-two-svg-elements-touch देखें, और ध्यान दें कि आप "घुमावदार बॉक्स" प्राप्त करने के लिए बॉक्स परिणाम में परिवर्तन लागू कर सकते हैं, उदाहरण के लिए http://my.opera.com/MacDev_ed/blog/getting-screen-boundingboxes-in-svg। –