0

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

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

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

有没有给定树点和 X 返回 Y 的函数？

已编辑

我将尝试在下一个示例中更好地解释它 在此处输入图像描述 。我有点 C。我需要点 A 和 B，它们是点 C 给出的垂直线与贝塞尔曲线的交点，但贝塞尔曲线不是函数。

4

1 回答 1

2

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

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

第一种方法：检查像素：

  • 在单独的画布上绘制两个贝塞尔曲线。
  • 使用 context.getImageData 获取画布上坐标 X 处所有垂直像素的数组。
  • 在所需的 X 坐标处遍历每个垂直 Y 像素
  • 如果你发现一个不透明的像素，你就碰到了贝塞尔曲线（它是 Y）
  • 从上到下迭代，直到找到顶部的贝塞尔 Y。
  • 从底部到顶部迭代，直到找到底部的 Bezier Y。

在此处输入图像描述

这是第一种方法的代码和小提琴：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 改进的方法来比随机猜测更好：

从 x 坐标中获取 y 以获得三次贝塞尔曲线，快速 Newton-Raphson 方法

于 2013-08-31T16:48:02.513 回答