Get a point inside bezier curve

2020-05-01 10:03发布

站内问答 / 前端开发
1048 1 5

I' using KineticJS to drawing a logo, both top an bottom lines are bezierCurveTo.

I need to draw lines between them and so I need to locate the points inside both curves.

What I thought to use was get the X coordinate and get the Y coordinate. Using method bezierCurveTo I can find the position. The problem is bezierCurveTo use the first parameter as percent and my two berzier are not equivalent, so is not a solution for me.

Is there any function that given tree points and X returns the Y ?

Edited

I'll try to explain it better with the next example enter image description here I have the point C. I need the point A and B which are the intersection of the vertical line given by the point C and the bezier curves, but beziers are not functions.

1条回答
我想做一个坏孩纸
2楼-- · 2020-05-01 10:39

Given an X coordinate: How to get the Y coordinate of 2 vertically stacked bezier curves.

I can think of 2 ways, both use “brute force”.

First method: examine pixels:

  • Draw both your beziers on a separate canvas.
  • Use context.getImageData to get an array of all the vertical pixels on the canvas at coordinate X.
  • Iterate through each vertical Y pixel at your desired X coordinate
  • If you find a non-transparent pixel, you've hit the Bezier (and it's Y)
  • Iterate from top to bottom until you find the top bezier Y.
  • Iterate from bottom to top until you find the bottom Bezier Y.

enter image description here

Here is code and Fiddle for the first method: http://jsfiddle.net/m1erickson/uRDYf/

<!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; }
    #canvas{border:1px solid red;}
</style>

<script>
$(function(){

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

    // draw a top bezier
    ctx.beginPath();
    ctx.moveTo(50,50);
    ctx.bezierCurveTo(125,0,150,100,250,75);
    ctx.lineWidth=3;
    ctx.strokeStyle="black";
    ctx.stroke();

    // draw a bottom bezier
    ctx.beginPath();
    ctx.moveTo(50,150);
    ctx.bezierCurveTo(125,0,150,100,250,175);
    ctx.lineWidth=3;
    ctx.strokeStyle="blue";
    ctx.stroke();

    // get an array of all the pixels in the canvas
    var x=100;  // put your X coordinate value here
    var iData = ctx.getImageData(x,0,1,canvas.height);
    var data = iData.data;
    var w=canvas.width;
    var h=canvas.height;
    var theY1=-999;  // your top result
    var theY2=-999;  // your bottom result


    // iterate through each Y at your vertical X coordinate
    // Examine the opacity value at the XY
    // if the pixel is not transparent, you have found your Y
    for(var y=0; y<h; y++) {
        if(data[y*4+3]>10){
            theY1=y;
            break;
      }
    }

    // now iterate backwards to get the Y of the bottom curve
    for(var y=0; y<h; y++) {
        if(data[(h-y)*4+3]>10){
            theY2=(h-y);
            break;
      }
    }


    // testing -- display the results

    ctx.beginPath();
    ctx.moveTo(x,0);
    ctx.lineTo(x,h);
    ctx.strokeStyle="lightgray";
    ctx.stroke();

    ctx.beginPath();
    ctx.arc(x,theY1,4,Math.PI*2,false);
    ctx.closePath();
    ctx.arc(x,theY2,4,Math.PI*2,false);
    ctx.closePath();
    ctx.fillStyle="red";
    ctx.fill();

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

</head>

<body>
    <canvas id="canvas" width=300 height=300></canvas>
</body>
</html>

Second method: use the Bezier curve formula to repeatedly "guess" the Y coordinate.

FYI, the cubic Bezier actually does have a formula

// where ABCD are the control points and T is an interval along that curve

function CubicN(T, a,b,c,d) {
    var t2 = T*T;
    var t3 = t2*T;
    return a + (-a * 3 + T * (3 * a - a * T)) * T
    + (3 * b + T * (-6 * b + b * 3 * T)) * T
    + (c * 3 - c * 3 * T) * t2
    + d * t3;
}

And you can calculate XY points along that formula like this:

// cubic bezier T is 0-1
// When T==0.00, you are at the beginning of the Curve
// When T==1.00, you are at the ending of the Curve
function getCubicBezierXYatT(startPt,controlPt1,controlPt2,endPt,T){
    var x=CubicN(T,startPt.x,controlPt1.x,controlPt2.x,endPt.x);
    var y=CubicN(T,startPt.y,controlPt1.y,controlPt2.y,endPt.y);
    return({x:x,y:y});
}

So the second method is to repeatedly "guess" T values along your curve using getCubicBezierXYatT.

When the returned X is your desired X, you also have your desired Y.

I haven't tried it, but this SO post uses something called the Newton-Raphson refinement to make better than random guesses:

Getting y from x co-ord for cubic bezier curve, fast Newton-Raphson method

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)