[英]Ways to make bezier curves with about 8-9 control points in Javascript
我正在制作一个游戏,我需要展示穿过流动河流的船只。 我正在创建带有贝塞尔曲线的河流,但它只有来自bezerCurveTo的 3 个控制点。 所以,这条河还不够“弯曲”。 我怎样才能实现这一目标?
tabageos.GeometricMath Class 具有曲线、路径和合并 Arrays 的一些高级功能。 要完成您想要的,您可以将多个路径连接在一起。 例如: https://codepen.io/Contrapenner/pen/mdBVrbw
function dot(x, y) {
var d = document.createElement("span");
d.setAttribute("style", "position:absolute;left:" + x + "px;top:" + y + "px;width:2px;height:2px;background: blue");
document.getElementById("river").appendChild(d);
};
var riverPath = tabageos.GeometricMath.getRawArcCurvePath(5, 5, 10, 10, 5, 15, 10);
riverPath = tabageos.GeometricMath.mergeArrays(riverPath, tabageos.GeometricMath.getRawArcCurvePath(5, 15, 0, 20, 5, 25, 10));
riverPath = tabageos.GeometricMath.mergeArrays(riverPath, tabageos.GeometricMath.getRawArcCurvePath(5, 25, 10, 30, 5, 35, 10));
riverPath = tabageos.GeometricMath.mergeArrays(riverPath, tabageos.GeometricMath.getRawArcCurvePath(5, 35, 0, 40, 5, 45, 10));
//and you could keep going as needed.
//there is also getRawHermiteCurvePath
var i = 0;
for (i; i < riverPath.length; i += 2) {
dot(riverPath[i], riverPath[i + 1]);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.