Question

我在画布上有直线，由开始和结束Point(x,y)定义。

现在我希望用户点击该行内的任意位置，并在拖动鼠标时，该行应形成curve。

我知道quadraticCurveTo()有bezierCurveTo()和Canvas种方法。但它们都需要1-2个控制点。如果我不将这些控制点呈现给用户，我将从哪里获取这些控制点？我可以根据用户点击的位置来计算它们吗？

Answer 1

是的，您可以根据用户点击的位置来计算它们。

当用户将鼠标从行A-B中的某个位置拖动到新位置A时，该位置X可以是二次曲线的单个控制点。将行A-B替换为二次曲线A-X-B

Answer 2

如何将直线拖到曲线中

enter image description here

给定3个点（开始，结束和鼠标），这里是你如何计算将在这3个点之间绘制二次贝塞尔曲线的控制点：

        // calc a control point
        var cpX = 2*mouseX -startX/2 -endX/2;
        var cpY = 2*mouseY -startY/2 -endY/2;

其余的就像用户拖动鼠标时重绘曲线一样简单

        // draw a quad-curve
        ctx.beginPath();
        ctx.moveTo(startX, startY);
        ctx.quadraticCurveTo(cpX, cpY, endX, endY);
        ctx.stroke();

这是代码和小提琴：http://jsfiddle.net/m1erickson/pp7Zy/

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<style>
    body{ background-color: ivory; padding:10px; }
    canvas{border:1px solid red;}
</style>

<script>
$(function(){

    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    // get the position of the canvas
    // relative to the window
    var canvasOffset=$("#canvas").offset();
    var offsetX=canvasOffset.left;
    var offsetY=canvasOffset.top;

    // set the start and end points
    var startX=25;
    var startY=50;
    var endX=275;
    var endY=200;
    // some vars for the mouse position
    var mouseX;
    var mouseY;
    var isDragging=false;

    // set curve color and stroke-width
    ctx.strokeStyle="blue"
    ctx.fillStyle="red"
    ctx.lineWidth=5;

    // draw the startpoint, endpoint and line
    // just to get the user some reference points
    ctx.beginPath();
    ctx.moveTo(startX,startY);
    ctx.lineTo(endX,endY);
    ctx.stroke();
    ctx.beginPath();
    ctx.moveTo(startX,startY);
    ctx.arc(startX,startY, 10, 0, 2 * Math.PI, false);
    ctx.moveTo(endX,endY);
    ctx.arc(endX,endY, 10, 0, 2 * Math.PI, false);
    ctx.fill();


    // when the user drags the mouse draw a quad-curve
    // between the 2 points and the mouse position
    function handleMouseMove(e){
        mouseX=parseInt(e.clientX-offsetX);
        mouseY=parseInt(e.clientY-offsetY);

        // calc a control point
        var cpX = 2*mouseX -startX/2 -endX/2;
        var cpY = 2*mouseY -startY/2 -endY/2;

        ctx.clearRect(0,0,canvas.width,canvas.height);

        // draw a quad-curve
        ctx.beginPath();
        ctx.moveTo(startX, startY);
        ctx.quadraticCurveTo(cpX, cpY, endX, endY);
        ctx.stroke();

        // draw the Start, End and Control points
        ctx.beginPath();
        ctx.moveTo(startX,startY);
        ctx.arc(startX,startY, 10, 0, 2 * Math.PI, false);
        ctx.moveTo(cpX,cpY);
        ctx.arc(cpX,cpY, 10, 0, 2 * Math.PI, false);
        ctx.moveTo(endX,endY);
        ctx.arc(endX,endY, 10, 0, 2 * Math.PI, false);
        ctx.fill();
    }

    $("#canvas").mousedown(function(e){isDragging=true;});
    $("#canvas").mouseup(function(e){isDragging=false;});
    $("#canvas").mousemove(function(e){if(isDragging){handleMouseMove(e);}});

}); // end $(function(){});
</script>

</head>

<body>
    <p>Drag mouse to create quadratic bezier</p>
    <p>that goes through the mouse position</p>
    <canvas id="canvas" width=400 height=400></canvas>
</body>
</html>

如何从直线创建曲线？

2 个答案: