Courbe de Bézier avec événement de souris

-1

Je veux dessiner une courbe de Bézier avec un événement de souris.Courbe de Bézier avec événement de souris

function draw(selection) 
{ 
    var keep = false, path, xy0; 
    line = d3.svg.line() 
     .interpolate(function(points) {return points.join("M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80"); }) 
     .x(function(d) {return d[0];}) 
     .y(function(d) {return d[1];}); 

    selection 
     .on('mousedown', function() { 
      keep = true; 
      xy0 = d3.mouse(this); 
      path = d3.select('svg') 
       .append('path') 
       .attr('d', line([xy0, xy0])) 
       .style({'stroke': 'black', 'stroke-width': '3px'}); 
     }) 
     .on('mouseup', function() { 
      keep = false; 
     }) 
     .on('mousemove', function(){ 
      if(keep) { 
       Line = line([xy0, d3.mouse(this).map(function(x) {return x - 1;})]); 
       console.log(Line); 
       path.attr('points', Line); 
      } 
     }); 
}

Mais cela ne fonctionne pas. Avez-vous une idée de comment faire cela?

Merci à l'avance,

Source

2016-12-30 zoint

Qu'est-ce que vous essayez de faire exactement? ? Cette ligne 'points.join (" M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80 ");' n'a pas beaucoup de sens. Sur la souris avec le bouton cliqué, vous voulez dessiner une courbe entre la position de la souris et la position actuelle? – Mark

Je souhaite tracer une courbe de Bézier entre la position de la souris et la position actuelle. M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80 est le paramètre de la courbe de Bézier. Comment puis-je l'implémenter dans mon code? Merci – zoint

"* Mais cela ne marche pas *" n'est pas une déclaration de problème, c'est une opinion au mieux (le code fait exactement ce que vous avez écrit, il fonctionne exactement comme le code source le veut): Qu'attendiez-vous ** de ce code, que fait-il à la place, d'où pensez-vous que cette différence vient, et * qu'avez-vous essayé jusqu'ici pour corriger cela? –

Toujours pas sûr de comprendre la question.

M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80 est le paramètre de courbe de Bézier

n, qui est un attribut chemin "d" de qui dessine un spécifique Bézier courbe. Je ne suis pas sûr de savoir comment vous combinez cela avec les mouvements de votre souris. J'ai essayé de et je suppose que ce produit des courbes d'une sorte:

<!DOCTYPE html> <html> <head> <script data-require="[email protected]" data-semver="3.5.17" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.js"></script> </head> <body> <script> var keep = false, mouseStart = null, controlPoints = "C 40 10, 65 10, 95 80 S 150 150,"; var svg = d3.select('body') .append('svg') .attr('width', 500) .attr('height', 500) .style('border', '1px solid black'); var path = svg.append("path") .style("stroke", "steelblue") .style("stroke-width", "2px") .style("fill", "none"); svg.on('mousedown', function() { keep = true; mouseStart = d3.mouse(this); }) .on('mouseup', function() { keep = false; }) .on('mousemove', function() { var mouseEnd = d3.mouse(this); if (keep) { path.attr("d", "M" + mouseStart + controlPoints + mouseEnd); } }); </script> </body> </html>

Si vous voulez une courbe lisse du début à vous fin pouvez essayer quelque chose comme ceci:

<!DOCTYPE html> <html> <head> <script data-require="[email protected]" data-semver="3.5.17" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.js"></script> </head> <body> <script> var keep = false, mouseStart = null; var svg = d3.select('body') .append('svg') .attr('width', 500) .attr('height', 500) .style('border', '1px solid black'); var path = svg.append("path") .style("stroke", "steelblue") .style("stroke-width", "2px") .style("fill", "none"); svg.on('mousedown', function() { keep = true; mouseStart = d3.mouse(this); }) .on('mouseup', function() { keep = false; }) .on('mousemove', function() { var mouseEnd = d3.mouse(this); if (keep) { var dx = mouseStart[0] - mouseEnd[0], dy = mouseStart[1] - mouseEnd[1], dr = Math.sqrt(dx * dx + dy * dy); path.attr("d", "M" + mouseStart[0] + "," + mouseStart[1] + "A" + dr + "," + dr + " 0 0,1 " + mouseEnd[0] + "," + mouseEnd[1]); } }); </script> </body> </html>

Source

2016-12-31 22:06:39 Mark

Courbe de Bézier avec événement de souris

Répondre

Questions connexes