Как создать кривые из прямых линий?

У меня есть прямые линии на холсте, которые определяются началом и концом 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;

а остальное так же просто, как перерисовки кривой ш henever пользователь перетаскивает мышь

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

Вот код и Fiddle: 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-B с квадратичной кривой A-X-B

источник

2013-04-12 15:41:40

Но ControlPoint не mousepoint. CP всегда лежит вне линии, и я хочу, чтобы линия пересекала указатель мыши. Таким образом, остается вопрос: как я могу вычислить контрольную точку, чтобы кривая проходила через начало, конец и точку мыши? – membersound

Как создать кривые из прямых линий?

ответ

Смежные вопросы