5
Kullanıcıların birden çok svg öğesi oluşturabileceği web tabanlı bir uygulama üzerinde çalışıyorum. tüm öğeler 'yol' (kapalı yol kare veya dikdörtgen). Kullanıcı herhangi bir elemanı taşıyabilir ve döndürebilir.Svg öğelerinin kesişimini denetleme
Şimdi, bir eleman başka bir elemana dokunduğunda veya kesiştiğinde kullanıcıyı uyarmak istiyorum. Herhangi bir yardım için teşekkür ederiz.
Teşekkürler. Burada
http://jsfiddle.net/nnYSp/Kod olan jsfiddle linke geçerli: - yollarınız kareler veya dikdörtgenler kapalı olup olmadığını
<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>
Raphael'i kullanmanızı öneririm ve daha sonra http://raphaeljs.com/reference.html#Element.getBBox ve http://raphaeljs.com/reference.html#Paper.getElementsByPoint'in bir bileşimini kullanarak yazabilirsiniz. mantık ... –
Cevabınız için teşekkürler, raphael kullanmıyorum ve bunu kullanamıyorum, bu yüzden yerel Javascript ve Svg ile çözüm bulmam gerekiyor. Öğe döndürüldüğünde BBOX da düzgün çalışmıyor. – RashFlash
http://stackoverflow.com/questions/5396657/event-when-two-svg-elements-touch sayfasına bakın ve "döndürülen bbox" ı almak için bbox sonucuna dönüşüm uygulayabileceğinizi unutmayın, bkz. Http://my.opera.com/MacDev_ed/blog/getting-screen-boundingboxes-in-svg. –