Wie um zu Überprüfen, Kreuzung von Svg-Elementen
Arbeite ich an einer web-basierten Anwendung, wo Benutzer können mehrere svg-Elemente. alle Elemente sind 'Weg' (geschlossener Pfad entweder Quadrat oder Rechteck). Benutzer können sich bewegen und drehen Sie jedes element.
Ich will jetzt alarm Benutzer, wenn ein element berührt oder schneiden jedes andere element .
jede mögliche Hilfe würde geschätzt.
Dank.
hier ist das jsfiddle linke
http://jsfiddle.net/nnYSp/
- Code :-
<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>- Ich schlage vor, Sie verwenden raphael und dann können Sie eine Kombination von raphaeljs.com/reference.html#Element.getBBox und raphaeljs.com/reference.html#Paper.getElementsByPoint schreiben Sie Ihre Logik...
- danke für die Antwort, ich bin nicht mit raphael und ich kann nicht verwenden, die, so muss ich feststellen-Lösung mit nativen Javascript und Svg. Auch die BBOX nicht funktioniert korrekt, wenn das element gedreht wird.
- Siehe stackoverflow.com/questions/5396657/..., und beachten Sie, dass Sie Transformationen, um die bbox Ergebnis zu bekommen "gedreht bbox", siehe e.g my.opera.com/MacDev_ed/blog/getting-screen-boundingboxes-in-svg.
- danke Erik für die Antwort, ich Folge deinem post, aber es hat nicht funktioniert, in firefox und chrome. 'getScreenBBox' oder 'getIntersectionList' gegeben ist, - Fehler, d.h. Objekt #<SVGGElement> hat keine Methode "getScreenBBox' .
Schreibe einen Kommentar
Du musst angemeldet sein, um einen Kommentar abzugeben.
Das problem wird einfacher, wenn Sie Ihre Pfade geschlossen sind Quadrate oder Rechtecke.
Lesen Sie die svg-dom-Schnittstelle checkIntersection
boolean checkIntersection(in SVGElement element, in SVGRect rect);