使用Paper.js在贝塞尔曲线中插入新点的理想手柄位置

Ideal handle location for insertion of a new point in a bezier curve with Paper.js

本文关键字：新点 插入 理想 位置 曲线 js Paper 使用      更新时间：2023-09-26

我在paper.js中构建了一个工具，可以插入新的控制点，效果很好，我遇到的问题是，我还必须计算每个新控制点的手柄位置（除非我遗漏了什么，否则paper似乎不会为你做这件事），事实证明这是一项艰巨的任务。下面的代码是我目前正在处理的，点已成功添加到控制柄中，但它会使曲线变形。我希望添加控制柄的方式使曲线不会变形。

gEditor.MoveTool.onMouseDown = function (event) {
    gEditor.HitResult = paper.project.hitTest(event.point, gEditor.HitOptions);
    var location = gEditor.HitResult.location;
    var newPoint = gEditor.HitResult.item.insert(location.index + 1, event.point);
    var prevSegment, nextSegment;
    if (location.index - 1 >= 0){
        prevSegment = gEditor.HitResult.item.segments[location.index - 1];
    }
    if (location.index + 2 < gEditor.HitResult.item.length) {
        nextSegment = gEditor.HitResult.item.segments[location.index + 2];
    }
    if (prevSegment && nextSegment) {
        newPoint.handleIn = {
            x: prevSegment.point.x - ((prevSegment.point.x + newPoint.point.x) / 2),
            y: prevSegment.point.y - ((prevSegment.point.y + newPoint.point.y) / 2),
        };
        newPoint.handleOut = {
            x: nextSegment.point.x - ((nextSegment.point.x + newPoint.point.x) / 2),
            y: nextSegment.point.y - ((nextSegment.point.y + newPoint.point.y) / 2),
        };
    }
}

我看过de Cateljau的算法，并认为我需要的是某种形式的算法，但我不知道如何实现它，因为我看到的每个例子基本上都是绘制曲线，而不是找到句柄的X、Y位置。

是的，paper.js已经有了这个函数：curve.divide()。完成命中测试后： 
path = HitResult.item;
if (HitResult.type == 'stroke') {
   var location = HitResult.location;
   path.curves[location.index].divide(location);
}
相关文章：