将一个二次贝塞尔曲线拆分为两个 [英] Split one quadratic bezier curve into two
问题描述
所以我有一个假想的圆，分为多个部分(为简单起见，我使用8，但最后，我想将其分为16或32个部分).
So I have an imaginary circle divided into multiple parts (I use 8 for simplicity, but in the end, I would like to divide it to 16 or 32 parts).
然后，我有N个二次贝塞尔曲线，即2个最近的分段之间.它可以放在圆上，也可以离圆心更远，但不比圆更近.
Then I have N number of quadratic bezier curves, that is between 2 nearest segments. It may rest upon the circle or further from the center, but not nearer than the circle.
我知道如何找到巫婆线中应该寻找的交点，但是我不知道如何将其分为两部分...我知道，如果我寻找直线与曲线的交点，应该得到的点是，上一条曲线应终止，下一条曲线应终止，通过推导，我也许可以得到矢量，但是我不知道该怎么做.
I know how to find, what in witch line I should look for intersection in, but I do not know how to split it into two parts... I know, that if I looked for intersection of the line and curve I should get the point that the previous curve should end and the next should start, and that by derivation I may be able to get the vector, but I do not know how to do it.
示例图像中，我只有8个部分，以便于解决问题.
Example image where I have only 8 parts for easier problem solving.
关键是要使用贝塞尔曲线制作进度"条.旁注:曲线是音乐可视化的一部分，每帧都会改变.
The point is, to make "progress" bar using bezier curves. Side note: The curves will change every frame, as they are part of music visualization.
如果有更好的方式为曲线上色，我将全力以赴！
推荐答案
拆分三次和二次贝塞尔曲线
拆分贝塞尔曲线相对容易.由于已经有了一个答案，我将只复制在其路径范围从0到1的位置处分割单个bezier，三次方或二次方所需的函数.函数Bezier.splitAt取position(0到1)，然后取决于start = true从0到位置还是if start = false从位置到1返回贝塞尔曲线.它将同时处理2阶(二次)贝塞尔曲线和3阶(三次)贝塞尔曲线
Spliting cubic and quadratic Beziers
Splitting a bezier is relatively easy. As there is already an answer I will just copy the functions needed to split a single bezier, cubic or quadratic at a position along its path range from 0 to 1. The function Bezier.splitAt takes a position (0 to 1) and depending on start = true returns the from 0 to position or the if start = false returns the bezier from position to 1. It will handle both 2nd order (quadratic) and 3rd order (cubic) Beziers
用法示例
var bezier = createBezierCubic( 146, 146, 134, 118, 184, 103, 217, 91 );
// split in two
var startingHalf = bezier.splitAt(0.5, true);
var endingHalf = bezier.splitAt(0.5, false);
// split into four.
var quart1 = startingHalf.splitAt(0.5, true)
var quart2 = startingHalf.splitAt(0.5, false)
var quart3 = endingHalf.splitAt(0.5, true)
var quart4 = endingHalf.splitAt(0.5, false)
// getting a segment
var startFrom = 0.3;
var endAt = 0.8;
var section = bezier.splitAt(startFrom, false).splitAt((endAt - startFrom) / (1 - startFrom), true);
贝塞尔曲线由起点和终点p1，p2和一个或两个控制点cp1，cp2组成.如果贝塞尔曲线是2阶，则cp2是未定义的.点是Vec，取自Vec.x，Vec.y
The bezier is made up of a start and end point p1, p2 and one or two control points cp1, cp2. If the bezier is 2nd order then cp2 is undefined. The points are Vec and take the from Vec.x, Vec.y
渲染第二个订单
ctx.moveTo(bezier.p1.x, bezier.p1.y);
ctx.quadraticCurveTo(bezier.cp1.x, bezier.cp1.y, bezier.p2.x, bezier.p2.y);
渲染三阶
ctx.moveTo(bezier.p1.x, bezier.p1.y);
ctx.bezierCurveTo(bezier.cp1.x, bezier.cp1.y, bezier.cp2.x, bezier.cp2.y, bezier.p2.x, bezier.p2.y);
具有依赖性的代码.
由于您都是程序员，因此请参见代码以获取使用中的更多信息.警告，可能是拼写错误，因为这是从更广泛的几何图形界面中提取的.
As you are all programmers see the code for more info in usage. Warning there could be typos as this has been pulled from a more extensive geometry interface.
var geom = (function(){
function Vec(x,y){ // creates a vector
if(x === undefined){
x = 1;
y = 0;
}
this.x = x;
this.y = y;
}
Vec.prototype.set = function(x,y){
this.x = x;
this.y = y;
return this;
};
// closure vars to stop constant GC
var v1 = Vec();
var v2 = Vec();
var v3 = Vec();
var v4 = Vec();
var v5 = Vec();
const BEZIER_TYPES = {
cubic : "cubic",
quadratic : "quadratic",
};
// creates a bezier p1 and p2 are the end points as vectors.
// if p1 is a string then returns a empty bezier object.
// with the type as quadratic (default) or cubic
// cp1, [cp2] are the control points. cp2 is optional and if omitted will create a quadratic
function Bezier(p1,p2,cp1,cp2){
if(typeof p1 === 'string'){
this.p1 = new Vec();
this.p2 = new Vec();
this.cp1 = new Vec();
if(p1 === BEZIER_TYPES.cubic){
this.cp2 = new Vec();
}
}else{
this.p1 = p1 === undefined ? new Vec() : p1;
this.p2 = p2 === undefined ? new Vec() : p2;
this.cp1 = cp1 === undefined ? new Vec() : cp1;
this.cp2 = cp2;
}
}
Bezier.prototype.type = function(){
if(this.cp2 === undefined){
return BEZIER_TYPES.quadratic;
}
return BEZIER_TYPES.cubic;
}
Bezier.prototype.splitAt = function(position,start){ // 0 <= position <= 1 where to split. Start if true returns 0 to position and else from position to 1
var retBezier,c;
if(this.cp2 !== undefined){ retBezier = new Bezier(BEZIER_TYPES.cubic); }
else{ retBezier = new Bezier(BEZIER_TYPES.quadratic); }
v1.x = this.p1.x;
v1.y = this.p1.y;
c = Math.max(0, Math.min(1, position)); // clamp for safe use in Stack Overflow answer
if(start === true){
retBezier.p1.x = this.p1.x;
retBezier.p1.y = this.p1.y;
}else{
retBezier.p2.x = this.p2.x;
retBezier.p2.y = this.p2.y;
}
if(this.cp2 === undefined){ // returns a quadratic
v2.x = this.cp1.x;
v2.y = this.cp1.y;
if(start){
retBezier.cp1.x = (v1.x += (v2.x - v1.x) * c);
retBezier.cp1.y = (v1.y += (v2.y - v1.y) * c);
v2.x += (this.p2.x - v2.x) * c;
v2.y += (this.p2.y - v2.y) * c;
retBezier.p2.x = v1.x + (v2.x - v1.x) * c;
retBezier.p2.y = v1.y + (v2.y - v1.y) * c;
retBezier.cp2 = undefined;
}else{
v1.x += (v2.x - v1.x) * c;
v1.y += (v2.y - v1.y) * c;
retBezier.cp1.x = (v2.x += (this.p2.x - v2.x) * c);
retBezier.cp1.y = (v2.y += (this.p2.y - v2.y) * c);
retBezier.p1.x = v1.x + (v2.x - v1.x) * c;
retBezier.p1.y = v1.y + (v2.y - v1.y) * c;
retBezier.cp2 = undefined;
}
return retBezier;
}
v2.x = this.cp1.x;
v3.x = this.cp2.x;
v2.y = this.cp1.y;
v3.y = this.cp2.y;
if(start){
retBezier.cp1.x = (v1.x += (v2.x - v1.x) * c);
retBezier.cp1.y = (v1.y += (v2.y - v1.y) * c);
v2.x += (v3.x - v2.x) * c;
v2.x += (v3.x - v2.x) * c;
v2.y += (v3.y - v2.y) * c;
v3.x += (this.p2.x - v3.x) * c;
v3.y += (this.p2.y - v3.y) * c;
retBezier.cp2.x = (v1.x += (v2.x - v1.x) * c);
retBezier.cp2.y = (v1.y += (v2.y - v1.y) * c);
retBezier.p2.y = v1.y + (v2.y - v1.y) * c;
retBezier.p2.x = v1.x + (v2.x - v1.x) * c;
}else{
v1.x += (v2.x - v1.x) * c;
v1.y += (v2.y - v1.y) * c;
v2.x += (v3.x - v2.x) * c;
v2.y += (v3.y - v2.y) * c;
retBezier.cp2.x = (v3.x += (this.p2.x - v3.x) * c);
retBezier.cp2.y = (v3.y += (this.p2.y - v3.y) * c);
v1.x += (v2.x - v1.x) * c;
v1.y += (v2.y - v1.y) * c;
retBezier.cp1.x = (v2.x += (v3.x - v2.x) * c);
retBezier.cp1.y = (v2.y += (v3.y - v2.y) * c);
retBezier.p1.x = v1.x + (v2.x - v1.x) * c;
retBezier.p1.y = v1.y + (v2.y - v1.y) * c;
}
return retBezier;
}
return {
Vec : Vec,
Bezier : Bezier,
bezierTypes : BEZIER_TYPES,
};
})();
// helper function
// Returns second order quadratic from points in the same order as most rendering api take then
// The second two coordinates x1,y1 are the control points
function createBezierQuadratic(x, y, x1, y1, x2, y2){
var b = new geom.Bezier(geom.bezierTypes.quadratic);
b.p1.set(x, y);
b.p2.set(x2, y2);
b.cp1.set(x1, y1);
return b;
}
// Returns third order cubic from points in the same order as most rendering api take then
// The coordinates x1, y1 and x2, y2 are the control points
function createBezierCubic(x, y, x1, y1, x2, y2, x3, y3){
var b = new geom.Bezier(geom.bezierTypes.cubic);
b.p1.set(x, y);
b.p2.set(x3, y3);
b.cp1.set(x1, y1);
b.cp2.set(x2, y2);
return b;
}
这篇关于将一个二次贝塞尔曲线拆分为两个的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
