[英]Calculate the slope of a tangent of an arbitrary point on a quadratic curve in Javascript
我從來都不是三角帆冠軍,經過大約4個小時的搜索,我決定在這里問:
我使用Javascript在HTML5 Canvas上繪制二次曲線(不是三次貝塞爾曲線),如下所示:
this.shape.moveTo(50,80).curveTo(100,120,40,190);
其中moveTo指定第一個點的x和y,curveTo的前兩個參數指定控制點的x和y,curve的第3和第4參數指定端點的x和y。
我需要設計一個函數,使我能夠獲得該曲線上任意點t的斜率,如下所示:
function getTangentSlope(P0,P1,P2,t) {
blah blah blah
return slope;
}
到目前為止,我發現的唯一解決方案是具有兩個控制點的三次曲線(在三次貝塞爾曲線上(在iPhone上)找到點的切線 ),或者我不理解該符號( https: //www.math.usm.edu/lee/mathphysarchive/?p=542 ),否則鏈接斷開意味着我無法查看整個解決方案( 二次貝塞爾曲線:計算切線 )。
最好的還是斜率以度為單位。
哥哥可以幫我嗎?
這將返回2階和3階曲線在單位位置的標准化切線。
請參閱以下答案,以獲取有關該對象的更多詳細用法。
const geom = (()=>{
function Vec(x,y){
this.x = x;
this.y = y;
};
function Bezier(p1,p2,cp1,cp2){
this.p1 = p1;
this.p2 = p2;
this.cp1 = cp1;
this.cp2 = cp2;
}
Bezier.prototype = {
//======================================================================================
// single dimension polynomials for 2nd (a,b,c) and 3rd (a,b,c,d) order bezier
//======================================================================================
// for quadratic f(t) = a(1-t)^2+2b(1-t)t+ct^2
// = a+2(-a+b)t+(a-2b+c)t^2
// The derivative f'(t) = 2(1-t)(b-a)+2(c-b)t
//======================================================================================
// for cubic f(t) = a(1-t)^3 + 3bt(1-t)^2 + 3c(1-t)t^2 + dt^3
// = a+(-2a+3b)t+(2a-6b+3c)t^2+(-a+3b-3c+d)t^3
// The derivative f'(t) = -3a(1-t)^2+b(3(1-t)^2-6(1-t)t)+c(6(1-t)t-3t^2) +3dt^2
// The 2nd derivative f"(t) = 6(1-t)(c-2b+a)+6t(d-2c+b)
//======================================================================================
p1 : undefined,
p2 : undefined,
cp1 : undefined,
cp2 : undefined,
tangentAsVec (position, vec ) {
var a, b, c, u;
if (vec === undefined) { vec = new Vec(); }
if (this.cp2 === undefined) {
a = (1-position) * 2;
b = position * 2;
vec.x = a * (this.cp1.x - this.p1.x) + b * (this.p2.x - this.cp1.x);
vec.y = a * (this.cp1.y - this.p1.y) + b * (this.p2.y - this.cp1.y);
}else{
a = (1-position)
b = 6 * a * position; // (6*(1-t)*t)
a *= 3 * a; // 3 * ( 1 - t) ^ 2
c = 3 * position * position; // 3 * t ^ 2
vec.x = -this.p1.x * a + this.cp1.x * (a - b) + this.cp2.x * (b - c) + this.p2.x * c;
vec.y = -this.p1.y * a + this.cp1.y * (a - b) + this.cp2.y * (b - c) + this.p2.y * c;
}
u = Math.sqrt(vec.x * vec.x + vec.y * vec.y);
vec.x /= u;
vec.y /= u;
return vec;
},
}
return { Vec, Bezier,}
})()
二階貝塞爾曲線的用法
// ? represents any value
var p1 = new geom.Vec(?,?); // start point
var p2 = new geom.Vec(?,?); // end point
var cp1 = new geom.Vec(?,?); //control point
var bez2 = new geom.Bezier(p1,p2,cp1); // create 2nd order bezier
var t = ?;
var tangent = bez2.tangentAsVec(t);
三階貝塞爾曲線的用法
// ? represents any value
var p1 = new geom.Vec(?,?); // start point
var p2 = new geom.Vec(?,?); // end point
var cp1 = new geom.Vec(?,?); // 1st control point
var cp2 = new geom.Vec(?,?); // 2nd control point
var bez3 = new geom.Bezier(p1,p2,cp1,cp2); // create 3rd order bezier
var t = ?;
var tangent = bez2.tangentAsVec(t);
嗯,我不知道此功能的外觀,但我知道您可以在哪里找到有用的示例:)
前一段時間,我使用一個庫來繪制圖表。 在該庫中,我發現了許多在折線圖中繪制折線的函數。 庫稱為D3。 挖掘代碼后,我發現了一個有趣的文件:
https://github.com/d3/d3-shape/tree/master/src/curve
在這里,您可以看到可獲得的效果:
https://github.com/d3/d3-shape#curves
祝好運 :)
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.