0
   function mouseDown(event) {
        isMouseDown = true;
        var shape = document.createElementNS(NS, "path");
        shape.setAttribute("id", "pen" + penCount);
        .

        lastPoint = {
            x: event.offsetX,
            y: event.offsetY
        };
    
        stage.append(shape);
        ++penCount;
    }

    function mouseMove(event) {
        if (isMouseDown) {
            var depth = jQuery('#pen' + (penCount - 1)).attr("d");              
            //// how do i do this part /////////////////         
            jQuery('#pen' + (penCount - 1)).attr("d", depth + "L " + event.offsetX + " " + event.offsetY + " ");

            lastPoint = {
                x: event.offsetX,
                y: event.offsetY
            }; 

        }
    }

In canvas, it worked well using QuadraticCurveTo. But in SVG, I want to know how to make a smooth curve. Help me ^^

How should I apply it in the bottom part?

        var midPoint = [(lastPoint.x + event.offsetX) / 2, (lastPoint.y + event.offsetY) / 2];
        console.log( 'Q' + lastPoint.x + ',' + lastPoint.y + ' ' + midPoint[0] + ',' + midPoint[1]);
        jQuery('#pen' + (penCount - 1)).attr("d", depth + "L " + event.offsetX + " " + event.offsetY + " ");
        lastPoint = {
            x: event.offsetX,
            y: event.offsetY
        };
FasterWork
  • 1
  • 1
  • Could you please add a snippet, showing what you've achieved so far? Besides, please add a javascript/jquery tag too. Currently you're drawing straight lines, but you need to output `Q` commands (see the console.log). You will also need to translate the mouse coordinates to svg user units before calculating the mid points. See also [SVG smooth freehand drawing](https://stackoverflow.com/questions/40324313/svg-smooth-freehand-drawing) – herrstrietzel Oct 18 '22 at 19:08
  • It was very helpful to go into the site you told me. Thank you ^^ – FasterWork Oct 19 '22 at 05:20
  • you might revisit the [aforementioned post](https://stackoverflow.com/questions/40324313/svg-smooth-freehand-drawing) - I've added a quadratic spline approach providing a more compact svg output. – herrstrietzel Oct 27 '22 at 02:39

0 Answers0