Javascript 使用Paper.js在bezier曲线中插入新点的理想控制柄位置
我在paper.js中构建了一个工具,允许插入新的控制点,这非常有效,我遇到的问题是,我还必须计算每个新控制点的控制柄位置(除非我遗漏了什么,否则paper似乎不会为您这样做),这是一项非常艰巨的任务。下面的代码是我目前正在使用的代码,该点成功地添加了控制柄,但是它使曲线变形。我想添加控制柄,使曲线不变形Javascript 使用Paper.js在bezier曲线中插入新点的理想控制柄位置,javascript,vector,vector-graphics,paperjs,Javascript,Vector,Vector Graphics,Paperjs,我在paper.js中构建了一个工具,允许插入新的控制点,这非常有效,我遇到的问题是,我还必须计算每个新控制点的控制柄位置(除非我遗漏了什么,否则paper似乎不会为您这样做),这是一项非常艰巨的任务。下面的代码是我目前正在使用的代码,该点成功地添加了控制柄,但是它使曲线变形。我想添加控制柄,使曲线不变形 gEditor.MoveTool.onMouseDown = function (event) { gEditor.HitResult = paper.project.hitTest(
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),
};
}
}
gEditor.MoveTool.onMouseDown=函数(事件){
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);
前一段,下一段;
如果(location.index-1>=0){
prevSegment=gEditor.HitResult.item.segments[location.index-1];
}
if(location.index+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);
}
是的,paper.js已经有了这个函数:
curve.divide()
。完成命中测试后:
path = HitResult.item;
if (HitResult.type == 'stroke') {
var location = HitResult.location;
path.curves[location.index].divide(location);
}