SVG créer une courbe de bézier à la souris en jquery

cyber_man -  
cyberMan_89 Messages postés 9 Statut Membre -
Bonjour,

Voila mon problème, je voudrais créer une courbe à l'aide de l'événement mousemove de jQuery. J'ai utilisé l'élément path pour le créer. Voila le code que j'ai utilisé 
$(function()
{
       var clicking = false;
        var tab_points = [];

        var path = $(document.createElementNS("http://www.w3.org/2000/svg",'path'));
        path.attr({
           id:'pathIdD',
           fill:'transparent',
           stroke:'rgb(36, 131, 199)',
           'stroke-width':'5px'
        });
        
        
        $('#svg').mousedown(function(e){
            clicking = true;
            
            var xPoint= parseInt(e.pageX - $(this).offset().left);
            var yPoint= parseInt(e.pageY- $(this).offset().top);
//            
            tab_points.push({x:xPoint,y:yPoint});
            
        });

        $('#svg').mousemove(function(e){
            
            if(clicking)
            {
                var xPoint= parseInt(e.pageX - $(this).offset().left);
                var yPoint= parseInt(e.pageY- $(this).offset().top);

                tab_points.push({x:xPoint,y:yPoint});
                
                var d="";
                for(var point in tab_points)
                {
                    
                    d+='M'+tab_points[point].x+','+tab_points[point].y+' c'+tab_points[point].x+','+tab_points[point].y+' '+tab_points[point].x+','+tab_points[point].y+' '+tab_points[point].x+','+ tab_points[point].y;
                }
                path.attr({
                    d: d
                });

                $(this).append(path);
            }
            
            if(clicking == false) return; 
            
            
        });


        /**
         * event lors du relachement du souris
         */
        $('#svg').mouseup(function(e)
        {
            clicking = false;
            
            
        });
});
.
Merci pour votre aide!

1 réponse

  1.
    jordane45 Messages postés 30427 Date d'inscription   Statut Modérateur Dernière intervention   4 833
     
    Bonjour,

    Tu dis avoir un problème..... mais tu n'expliques pas lequel !

    Commence par détailler le souci rencontré... en expliquant sur quelle partie du code exactement ça coince.
    Pense également à nous indiquer les éventuels messages d'erreurs affichés dans la CONSOLE de ton navigateur.....

    0
    1. cyberMan_89 Messages postés 9 Statut Membre
       
      Merci d'avoir répondu, mon problème c'est qu'on je trace sur svg ça donne quelque chose comme ça:
      , on faite je voulais une chose comme ça:
      . C'est dans l'événement mousemove que je ne trouve quoi faire? j'essaie cette code mais aucune succès: 
      //évenement mousemove

                var xPoint= parseInt(e.pageX - $(this).offset().left);
                var yPoint= parseInt(e.pageY- $(this).offset().top);

                tab_points.push({x:xPoint,y:yPoint});
                
                var d="";
                for(var point in tab_points)
                {
                    
                    d+='M'+tab_points[point].x+','+tab_points[point].y+' c'+tab_points[point].x+','+tab_points[point].y+' '+tab_points[point].x+','+tab_points[point].y+' '+tab_points[point].x+','+ tab_points[point].y;
                }
                path.attr({
                    d: d
                });

                $(this).append(path);

      Je ne trouve aucun moyen de le faire et puis on encore comment calculer le point de contrôle? Merci
      0
    2. cyberMan_89 Messages postés 9 Statut Membre
       
      Bonjour,

      Personne ne peut m'aider? S'il vous plaît je ne sais plus quoi faire? Aide moi!
      0
    3. cyberMan_89 Messages postés 9 Statut Membre
       
      Merci, J'ai trouvé seul la solution à mon problème! J'ai utilisé javascript pure finalement et pour ce qui sont intéressé voici l'intégrité du code que j'avais utilisé: 
      	var svgCanvas = document.getElementById("svg");
	var svgPath;
	svgCanvas.addEventListener("mousedown", startDrawTouch, false);
	svgCanvas.addEventListener("mousemove", continueDrawTouch, false);
	svgCanvas.addEventListener("mouseup", endDrawTouch, false);

	function startDrawTouch(event) 
	{
	
	  var touch = event;
	  svgPath =  createSvgElement("path");
	  svgPath.setAttribute("fill", "none");
	  svgPath.setAttribute("shape-rendering", "geometricPrecision");
	  svgPath.setAttribute("stroke-linejoin", "round");
	  svgPath.setAttribute("stroke", "rgb(36, 131, 199)");
	  svgPath.setAttribute("stroke-width", "3");

	  svgPath.setAttribute("d", "M" + touch.clientX  + "," + touch.clientY);  
	  svgCanvas.appendChild(svgPath);
	}

	function continueDrawTouch(event) 
	{
		if (svgPath)
		{
		  var touch = event;
		  var pathData = svgPath.getAttribute("d");  
		  pathData = pathData + " L" + touch.clientX + "," + touch.clientY;
		  svgPath.setAttribute("d", pathData);  
		}
	}

	function endDrawTouch(event) 
	{
		if (svgPath)
		{
		  var pathData = svgPath.getAttribute("d");  
		  var touch = event;
		  pathData = pathData + " L" + touch.clientX + "," + touch.clientY
		  svgPath.setAttribute("d", pathData);  
		  
		  svgPath = null;
		}
	}

function createSvgElement(tagName)
{
        return document.createElementNS("http://www.w3.org/2000/svg", tagName);
}


      En Jquery, ça une comportement bizarre!
      0