如何從直線創建曲線？

我在畫布上有直線，由開始和結束Point(x,y)定義。如何從直線創建曲線？

現在我希望用戶點擊該行內的任何位置，同時拖動鼠標，該行應該形成爲curve。

我知道有quadraticCurveTo()和bezierCurveTo()方法爲Canvas。但他們都需要1-2個控制點。如果我不向用戶展示這些控制點，我從哪裏取得這些控制點？我可以根據用戶點擊的位置來計算它們嗎？

2013-04-12 membersound

如何拖動一條直線到曲線

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;

休息，是重新繪製曲線W¯¯一樣簡單henever用戶拖動鼠標

 // 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-16 20:54:49 markE

是的，你可以根據用戶點擊的位置來計算它們。

當用戶將鼠標從行A-B中的某處拖動到新位置A時，該位置X可以是二次曲線的單個控制點。與二次曲線替換行A-BA-X-B

來源

2013-04-12 15:41:40

但控制點是不是mousepoint。 CP始終位於線外，我希望該線穿過鼠標指針。因此，問題仍然存在：我如何計算控制點，使曲線貫穿起點，終點和鼠標點？ – membersound

如何從直線創建曲線？

回答

相關問題