Bezier-Kurve mit Mausereignis

-1

Ich möchte eine Bezier-Kurve mit Mausereignis zeichnen.Bezier-Kurve mit Mausereignis

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); 
      } 
     }); 
}

Aber es funktioniert nicht. Hast du eine Idee, wie das geht?

Vielen Dank im Voraus,

Quelle

2016-12-30 zoint

Was genau versuchen Sie zu tun ? Diese Linie 'points.join (" M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80 "); macht wenig Sinn. Auf Mausklick mit gedrückter Schaltfläche möchten Sie eine Kurve zwischen Mauszeigerposition und aktueller Position zeichnen? – Mark

Ich möchte eine Bezier-Kurve zwischen der Mausposition und der aktuellen Position zeichnen. M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80 ist der Parameter der Bezierkurve. Wie kann ich dies in meinem Code implementieren? Danke – zoint

"* Aber es funktioniert nicht *" ist keine Problemaussage, es ist bestenfalls eine Meinung (der Code tut genau das, was Sie geschrieben haben; es funktioniert genau so, wie der Quellcode es beabsichtigt): Was hast du erwartet ** diesen Code zu tun, was macht er stattdessen, wo glaubst du, woher dieser Unterschied kommt und * was hast du bisher versucht, das zu beheben *? –

Immer noch nicht sicher, verstehe ich die Frage.

M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80 ist die Bezierkurve Parameter

Nein, das ist ein "d" Attribut des Pfades, der eine spezifischen Bezier zieht Kurve. Ich bin nicht sicher, wie Sie das mit Ihren Mausbewegungen kombinieren würden. Ich habe versucht, und ich denke, es Kurven eine Art produziert:

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

Wenn Sie eine glatt Kurve von Anfang wollen Sie am Ende so etwas wie dies versuchen könnten:

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

Quelle

2016-12-31 22:06:39 Mark

Bezier-Kurve mit Mausereignis

Antwort

Verwandte Themen