マウスイベントのベジエ曲線

-1

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

しかし、動作しません。それをどうやって行うのか考えていますか？

ありがとうございます。

出典

2016-12-30 zoint

正確に何をしようとしていますか？この行 'points.join（" M10 80 C 40 10、65 10、95 80 S 150 150、180 80 "）;はほとんど意味がありません。ボタンをクリックしてmousemove上でマウスの位置と現在の位置の間にカーブを描きたいのですか？ – Mark

マウスの位置と現在の位置の間にベジェ曲線を描きたい。 M10 80 C 40 10、65 10、95 80 S 150 150、180 80はベジェ曲線パラメータである。これを私のコードにどのように実装できますか？ありがとう – zoint

「*しかしそれは動作しません」*は問題文ではなく、あなたが書いたとおりにコードを実行しており、ソースコードと同じように機能します。 **このコードは何を期待していましたか？代わりに何をしているのですか？その違いはどこから来ていると思いますか。*それを修正するためにこれまでに何を試しましたか？ –

私は質問をよく理解しています。

M10 80 C 40 10、65 10、95 80 S 150 150 180 80は特定ベジェを描画ベジェ曲線パラメータ

いいえ、そのパスの "D" 属性情報であります曲線。どのようにマウスの動きと組み合わせるのか分かりません。私がしようとしたと私はそれが一種の曲線を生成推測：

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

：あなたはこのような何かを試みることができる開始から終了までの スムーズ曲線をしたい場合は

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

出典

2016-12-31 22:06:39 Mark

マウスイベントのベジエ曲線

答えて

関連する問題