Bonjour,
Je travail avec Jquery SVG : http://keith-wood.name/svg.html
Actuellement, je peux dessiner des rectangles, et les relier entre eux grâce à un trait.
Pour cela j'ai 2 boutons : 'Créer rectangle' et 'Créer liaison' chaque bouton mène vers une fonction.
Mon souci : lorsque je créer plusieurs rectangles et qu'ensuite je les relie (clic sur bouton 'liaison', il reste dans ma fonction de création rectangle, comment annuler le clic du rectangle lorsque je clic sur mon bouton liaison ?
J'ai essayé unbind mais ca n'a pas l'air de fonctionner.
Voici ma fonction pour créer mon noeud :
Et ma fonction pour créer la liaison :
Je ne sais pas si je suis bien claire
Merci de vos réponses.
Modifié par Meloo (08 Mar 2013 - 11:43)
Je travail avec Jquery SVG : http://keith-wood.name/svg.html
Actuellement, je peux dessiner des rectangles, et les relier entre eux grâce à un trait.
Pour cela j'ai 2 boutons : 'Créer rectangle' et 'Créer liaison' chaque bouton mène vers une fonction.
Mon souci : lorsque je créer plusieurs rectangles et qu'ensuite je les relie (clic sur bouton 'liaison', il reste dans ma fonction de création rectangle, comment annuler le clic du rectangle lorsque je clic sur mon bouton liaison ?
J'ai essayé unbind mais ca n'a pas l'air de fonctionner.
Voici ma fonction pour créer mon noeud :
function node(){
$('#svgsketch').bind('click', function(event) {
var destinationX = parseInt(event.pageX) - parseInt($('#svgsketch').offset().left);
var destinationY = parseInt(event.pageY) - parseInt($('#svgsketch').offset().top);
offset = ($.browser.msie ? {left: 0, top: 0} : $('#svgsketch').offset());
if (!$.browser.msie) {
offset.left -= document.documentElement.scrollLeft || document.body.scrollLeft;
offset.top -= document.documentElement.scrollTop || document.body.scrollTop;
}
start = {X: event.clientX - offset.left, Y: event.clientY - offset.top};
if($('input[rel=name]').val() != ''){
drawShape(destinationX,destinationY);
$('input[rel="name"]').css('borderColor', '#aaa');
$('input[rel="name"]').val('');
} else {
$('input[rel="name"]').css('borderColor', 'red');
$("#messageError").css({
top: '0px',
left: '0px',
position: 'fixed',
display:'block'
});
$('#messageError').show(1000).delay(3000).hide(1000);
$('#messageError').html('<span style="margin-left:30px;font-weight:bold;">Name obligatoire pour la création d\'un noeud</span>');
}
return false;
});
Et ma fonction pour créer la liaison :
function liaison() {
line = sketchpad.line(0,0,0,0,{fill:"red",role:"dragshape",stroke:"red",strokeWidth:1, strokeDashArray:dashArray, id:'temp'});
$('#svgsketch').mousedown( function(event){
event.preventDefault();
event = event.target;
cx = event.getAttribute('cx');
cy = event.getAttribute('cy');
group = event.parentNode.getAttribute('id');
$('#line1').html(cx);
$('#line2').html(cy);
$('#temp').css('display' , 'block');
xCon = $('circle').attr('cx');
$('#svgsketch').bind('mousemove' , mousemove);
$('#svgsketch').bind('mouseup' , mouseup);
});
var mouseup= function(event){
$('#temp').css('display' , 'none');
dashArray = '0'
event.preventDefault();
event = event.target;
cx = event.getAttribute('cx');
cy = event.getAttribute('cy');
group = event.parentNode.getAttribute('id');
$('#line3').html(cx);
$('#line4').html(cy);
$('#svgsketch').unbind('mousemove' , mousemove);
sketchpad.line($("#"+group), $('#line1').html(),$('#line2').html(),$('#line3').html(),$('#line4').html(),{fill:"red",role:"dragshape",stroke:"red",strokeWidth:1,strokeDashArray:dashArray});
};
var mousemove = function(event){
$("#temp").css('display' , 'block');
var destinationX = parseInt(event.pageX) - parseInt($('#svgsketch').offset().left);
var destinationY = parseInt(event.pageY) - parseInt($('#svgsketch').offset().top);
sketchpad.change(line, {x1:$('#line1').html(), y1:$('#line2').html(), x2:destinationX, y2:destinationY});
};
}
Je ne sais pas si je suis bien claire
Merci de vos réponses.
Modifié par Meloo (08 Mar 2013 - 11:43)