3

我在画布上有直线，由 start 和 end 定义Point(x,y)。

现在我希望用户单击该行中的任意位置，并且在拖动鼠标时，该行应形成为curve.

quadraticCurveTo()我知道有bezierCurveTo()一个Canvas. 但它们都需要1-2个控制点。如果我不向用户展示这些控制点，我从哪里获取这些控制点？我可以根据用户点击的位置来计算它们吗？

4

2 回答 2

2

如何将直线拖入曲线

在此处输入图像描述

给定 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>
于 2013-04-16T20:54:49.513 回答
1

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

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

于 2013-04-12T15:41:40.983 回答