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

Fermé

cyber_man - Modifié le 4 juil. 2019 à 07:22
cyberMan_89 Messages postés 8 Date d'inscription vendredi 8 mars 2019 Statut Membre Dernière intervention 11 juillet 2019 - 6 juil. 2019 à 08:54

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!

A voir également:

SVG créer une courbe de bézier à la souris en jquery
Créer un compte gmail - Guide
Créer un compte google - Guide
Créer une liste déroulante excel - Guide
Créer un groupe whatsapp - Guide
Créer une adresse hotmail - Guide

1 réponse

Réponse 1 / 1

jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 4 650
4 juil. 2019 à 10:42

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.....

cyberMan_89 Messages postés 8 Date d'inscription vendredi 8 mars 2019 Statut Membre Dernière intervention 11 juillet 2019
4 juil. 2019 à 11:49

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

cyberMan_89 Messages postés 8 Date d'inscription vendredi 8 mars 2019 Statut Membre Dernière intervention 11 juillet 2019
5 juil. 2019 à 10:32

Bonjour,

Personne ne peut m'aider? S'il vous plaît je ne sais plus quoi faire? Aide moi!

cyberMan_89 Messages postés 8 Date d'inscription vendredi 8 mars 2019 Statut Membre Dernière intervention 11 juillet 2019
6 juil. 2019 à 08:54

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!

Discussions similaires

créer une adresse gmail pour une autre personne

je veut créer des codes

Discussions similaires

Newsletters