Bezier curve with mouse event

Question

Bezier curve with mouse event

1.6k Views Asked by zoint At 03 April 2025 at 11:42

I want to draw a bezier curve with mouse event.

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

But it doesn't work. Do you have an idea how to do that?

Thanks in advance,

Original Q&A

There are 1 best solutions below

**Mark** · Accepted Answer

Still not sure I understand the question.

M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80 is the bezier curve parameter

No, that's a path's "d" attribute which draws a specific bezier curve. I'm not sure how you'd combine that with your mouse movements. I tried to and I guess it produces curves of a sort:

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

If you want a smooth curve from start to end you could try something like this:

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

Bezier curve with mouse event

There are 1 best solutions below

Related Questions in JAVASCRIPT

Related Questions in D3.JS

Related Questions in MOUSEEVENT

Related Questions in BEZIER

Trending Questions

Popular # Hahtags

Popular Questions