带有鼠标事件的贝塞尔曲线答案

【问题标题】：Bezier curve with mouse event带有鼠标事件的贝塞尔曲线
【发布时间】：2016-12-30 20:12:14
【问题描述】：

我想用鼠标事件绘制贝塞尔曲线。

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

但它不起作用。你知道怎么做吗？

提前致谢，

【问题讨论】：

你到底想做什么？这条线points.join("M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80"); 毫无意义。在鼠标移动并单击按钮时，您想在鼠标按下位置和当前位置之间绘制一条曲线吗？
我想在鼠标按下位置和当前位置之间画一条贝塞尔曲线。 M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80 是贝塞尔曲线参数。如何在我的代码中实现这一点？谢谢
"But it doesn't work" 不是问题陈述，充其量只是一种意见（代码完全按照您编写的方式执行；它有效完全按照源代码的意图工作）：您期望此代码做什么，它在做什么，您认为差异来自哪里，以及 您有什么到目前为止尝试解决这个问题？

标签： javascript d3.js mouseevent bezier

【解决方案1】：

仍然不确定我是否理解问题。

M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80 为贝塞尔曲线参数

不，这是一个路径的“d”属性，它绘制了一个特定的贝塞尔曲线。我不确定您如何将其与鼠标移动结合起来。我试过了，我猜它会产生某种曲线：

<!DOCTYPE html>
<html>

<head>
  <script data-require="d3@3.5.17" 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>

如果你想要一个从头到尾的平滑曲线，你可以试试这样：

<!DOCTYPE html>
<html>

<head>
  <script data-require="d3@3.5.17" 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>

【讨论】：