admin管理员组文章数量:1323730
I want to make a 'named' bezier curve. I want it to be one-word named so I don't have to worry about word-wrap.
I make bezier curve via P5 bezier(sx,sy,c1x,c1y,c2x,c2y,ex,ey)
function and I want a string to be shown in the middle of bezier curve. But I don't know how to find 'the middle' of curve.
For now my result looks like this (I don't know where to start picking up this problem, so I went with the easier way of just printing text on a start of curve):
But I want it to look like this:
This means that I need P1 and P2 coordinates:
Sorry for paint, but I don't have my code yet. As soon as I will have my hands on it I will add it here.
Here is code that draws a curve:
let
b = dest.inTriangle.middle, // destination triangle
g = this.outTriangle.p3, // tip of out triangle
c = {x:b.x-g.x,y:b.y-g.y}, // distance between objects
r1 = {}, // bezier point 1
r2 = {}; // bezier point 2
if(c.x > 0){
// b is on left
r1 = {
x: g.x + c.x/2,
y: g.y
};
r2 = {
x: b.x - c.x/2,
y: b.y
};
}
else {
// b is on right
r1 = {
x: g.x - c.x/2,
y: g.y + c.y
};
r2 = {
x: b.x + c.x/2,
y: b.y - c.y
};
}
noFill();
stroke(0);
bezier(
g.x, g.y,
r1.x, r1.y,
r2.x, r2.y,
b.x, b.y
);
noStroke();
fill(0);
text(this.name, g.x, (g.y-this.h/2))
I want to make a 'named' bezier curve. I want it to be one-word named so I don't have to worry about word-wrap.
I make bezier curve via P5 bezier(sx,sy,c1x,c1y,c2x,c2y,ex,ey)
function and I want a string to be shown in the middle of bezier curve. But I don't know how to find 'the middle' of curve.
For now my result looks like this (I don't know where to start picking up this problem, so I went with the easier way of just printing text on a start of curve):
But I want it to look like this:
This means that I need P1 and P2 coordinates:
Sorry for paint, but I don't have my code yet. As soon as I will have my hands on it I will add it here.
Here is code that draws a curve:
let
b = dest.inTriangle.middle, // destination triangle
g = this.outTriangle.p3, // tip of out triangle
c = {x:b.x-g.x,y:b.y-g.y}, // distance between objects
r1 = {}, // bezier point 1
r2 = {}; // bezier point 2
if(c.x > 0){
// b is on left
r1 = {
x: g.x + c.x/2,
y: g.y
};
r2 = {
x: b.x - c.x/2,
y: b.y
};
}
else {
// b is on right
r1 = {
x: g.x - c.x/2,
y: g.y + c.y
};
r2 = {
x: b.x + c.x/2,
y: b.y - c.y
};
}
noFill();
stroke(0);
bezier(
g.x, g.y,
r1.x, r1.y,
r2.x, r2.y,
b.x, b.y
);
noStroke();
fill(0);
text(this.name, g.x, (g.y-this.h/2))
Share
Improve this question
edited Jan 16, 2019 at 17:37
Kevin Workman
42.2k12 gold badges71 silver badges110 bronze badges
asked Jan 16, 2019 at 11:49
SkillGGSkillGG
6865 silver badges20 bronze badges
4
- Will the curves always be symmetrical? or at least almost symmetrical? – Thomas Commented Jan 16, 2019 at 12:11
- Because I use symmetrical c1 and c2 I think, that curve will be always symmetrical. – SkillGG Commented Jan 16, 2019 at 12:14
- 2 If always symmetrical, then point at 1/2 will be the middle. If not, there is no simple way to pute the "middle" point, alas. – Jean-Baptiste Yunès Commented Jan 16, 2019 at 12:26
- Yes! I didn't think about it. I am kind of new to curves and it crushed me at first. Sorry – SkillGG Commented Jan 16, 2019 at 12:31
2 Answers
Reset to default 6You can use the bezierPoint()
function that es with P5.js.
From the reference:
noFill();
var x1 = 85,
x2 = 10,
x3 = 90,
x4 = 15;
var y1 = 20,
y2 = 10,
y3 = 90,
y4 = 80;
bezier(x1, y1, x2, y2, x3, y3, x4, y4);
fill(255);
var steps = 10;
for (var i = 0; i <= steps; i++) {
var t = i / steps;
var x = bezierPoint(x1, x2, x3, x4, t);
var y = bezierPoint(y1, y2, y3, y4, t);
ellipse(x, y, 5, 5);
}
You'd probably want to use a value of 0.5
for t
to get the midpoint.
The formula to translate the 4 points in a function over time is the following (image from wikipedia):
Since you want the middle, and t
ranges from 0 to 1, you just have to set t = 1/2
So
B(1/2) = 1/8 P0 + 3/8 P1 + 3/8 P2 + 1/8 P3
本文标签: javascriptHow to find a middle point of a beizer curveStack Overflow
版权声明:本文标题:javascript - How to find a middle point of a beizer curve? - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742121093a2421701.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论