Question

我使用KineticJS绘制徽标，两个顶部的底线都是bezierCurveTo。

我需要在它们之间画线，所以我需要找到两条曲线内的点。

我想要使用的是获取X坐标并获得Y坐标。使用方法bezierCurveTo我可以找到位置。问题是bezierCurve要使用第一个参数作为百分比，而我的两个berzier不等同，所以对我来说不是解决方案。

是否有任何给定树点的函数，X返回Y？

被修改

我会尝试用下一个例子更好地解释它 enter image description here 我有点C.我需要点A和B，它们是点C和贝塞尔曲线给出的垂直线的交点，但是贝塞尔曲线不是函数。

Answer 1

给定X坐标：如何获得2个垂直堆叠贝塞尔曲线的Y坐标。

我可以想到两种方式，都使用“蛮力”。

第一种方法：检查像素：

在另一个画布上绘制两个beziers。
使用context.getImageData获取画布上坐标X处所有垂直像素的数组。
遍历所需X坐标的每个垂直Y像素
如果你找到一个不透明的像素，你就会击中贝塞尔（并且它是Y）
从上到下迭代，直到找到顶部bezier Y。
从底部到顶部迭代，直到找到底部Bezier Y.

enter image description here

以下是第一种方法的代码和小提琴：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>

第二种方法：使用贝塞尔曲线公式重复“猜测”Y坐标。

仅供参考，立方贝塞尔确实有一个公式

// 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;
}

您可以像这样计算该公式的XY点：

// 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});
}

所以第二种方法是使用getCubicBezierXYatT在曲线上反复“猜测”T值。

当返回的X是你想要的X时，你也有你想要的Y.

我还没有尝试过，但是这篇SO帖子使用了一种名为Newton-Raphson的改进来制作比随机猜测更好的东西：

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

在贝塞尔曲线内获得一个点

1 个答案: