Javascript中具有8-9个控制点的bezier曲线的生成方法

Question

我正在做一个游戏，在那里我需要展示船穿越一条流动的河流。我正在创建的河流与贝塞尔曲线，但它是只有3个控制点从bezerCurveTo。所以，这条河还不够弯曲。我怎样才能做到这一点呢？

Answer 1

tabageos.GeometricMath类对曲线、路径和合并数组具有一些高级功能。要实现您想要的，您可以将多条路径连接在一起。例如：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]);
  }