js实现惭色渐变曲线图仪代码-html代码-BFW代码库

js实现惭色渐变曲线图仪代码

代码语言：html

所属分类：其他

代码描述：js实现惭色渐变曲线图仪代码，可调参数

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

  
  
<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

svg {
  display: block;
}
</style>

  
  
</head>

<body translate="no">
  <svg id="svg"></svg>
  
    <script type="module">
import { Vec2 } from "https://cdn.skypack.dev/wtc-math@1.0.20";
import { Pane } from "https://esm.sh/tweakpane@4";

class Arcer {
  #points = [];
  #arcs = [];
  constructor() {}

  addArc(P1, P2) {
    const lastArc = this.lastArc;
    const tangent = lastArc ? lastArc.exitTangent : -Math.PI / 2;
    const clockwise = this.points.length % 2 !== 0;
    const arc = this.calculateArc(P1, P2, tangent, clockwise);
    this.arcs.push(arc);
    return arc;
  }

  addPoint(P2) {
    this.points.push(P2);
  }

  calculateArc(P1, P2, tangentAngle, predictedClockwise) {
    // Determine the actual direction for this segment
    // This logic ensures we don't curl "inward" incorrectly by checking
    // if the point is on the "wrong side" of the tangent for the requested direction.
    const chordDir = P2.subtractNew(P1);
    const tangentDir = new Vec2(Math.cos(tangentAngle), Math.sin(tangentAngle));
    const cross = tangentDir.x * chordDir.y - tangentDir.y * chordDir.x;
    let clockwise = predictedClockwise;
    // This checks if the point is on the "inside" of the tangent direction for the requested arc direction.
    // If clockwise is true, we expect the point to be on the left side of the tangent (cross > 0).
    // If clockwise is false, we expect the point to be on the right side of the tangent (cross < 0).
    if ((!clockwise && cross < 0) || (clockwise && cross > 0))
      clockwise = !clockwise;

    // Standard Circle Math (Intersection of Normal & Bisector)
    const normalAngle = clockwise
      ? tangentAngle - Math.PI / 2
      : tangentAngle + Math.PI / 2;

    const normalDir = new Vec2(Math.cos(normalAngle), Math.sin(normalAngle));
    const midpoint = P1.addNew(P2).scale(0.5);
    const bisectorDir = new Vec2(-chordDir.y, chordDir.x);

    const denomi.........完整代码请登录后点击上方下载按钮下载查看