绘制二次贝塞尔曲线（二次贝兹曲线）等距线：让 IE 支持 canvas接口 isPointInPath

最新推荐文章于 2023-03-21 21:59:29 发布
最新推荐文章于 2023-03-21 21:59:29 发布
阅读量735 收藏 2
点赞数 2
文章标签： 贝塞尔曲线 canvas 知识图谱 大数据
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39799079/article/details/118364244
版权

一、背景：

在使用 canvas 做知识图谱的时，实体关系使用线宽为 1px 的线绘制， 用户必须点在线上， 才能正常拾取到点击的边。 边关系，有些是直线边，有些是二次贝塞尔曲线。产品提议，线不能加粗， 否则图谱展示大量数据时， 有碍美观。直线边扩展已经完成， 曲线边相对麻烦一些。 IE 浏览器不支持 canvas 判断点击事件源是否在路径上的接口 sPointInstroke ； 而对 isPointInPath 的支持，仅限于中心线封闭出来的路径， 中心线外侧的部分能通过 isPointInPath 判断是无效的，也就是说， 加宽线宽在 IE 浏览器是无法正常使用 isPointInPath 接口的。

二、方案：通过数学运算， 实现 isPointInPath 接口底层逻辑

在二次贝兹曲线的外侧绘制两条等距曲线，然后封闭路径。判断点击事件源坐标是否在该路径内，如果是，则判定该曲线被点中； 否则该曲线未被点中。以下是图示：
在这里插入图片描述
如图， 请看 a<0 下面的图片。

途中浅蓝色的二次曲线一共有三条， 中间的一条是图谱上已经绘制的，记为 lineA ， 上方和下方的两条曲线分别记为 lineB 和 lineC , 可以看到 lineB 和 lineC 将 lineA 包围， 如果将 lineB 和 lineC 两端连接， 则形成了一个封闭的图形, 正好包裹住中间的曲线。

三、实现：

1. 数学几何知识提要

  1. 直线可以用方程来表示 ： y = ax + b， 其中 a 为斜率， b 为常数项;
  2. 斜率的计算方法：a = (deltaY1 - deltaY2) / (deltaX1 / detalX2);
  3. 平行的直线斜率相同， 常数项不同， 即 a 相等， b 不相等;
  4. 垂直的直线斜率的乘积是 -1;
  5. 直角三角形、勾股定理、相似三角形的角和边关系以及三角函数 sin 与 cos 请自行百度。

2. 注意事项

  1. 计算机屏幕坐标系原点 (0,0) 为屏幕的左上角， 向右为 x 轴正方向， 向下为 y 轴正方向。 所以在不偏移画布的前提下， 是没有负数的坐标的。
  2. “起点-控制点”连线形成的直线， 上图中 AH ， “终点-控制点” 连线形成的直线 HK ， 若这两条直线的斜率正负号相同， 是一种情形； 这两条直线的斜率正负号不同，又是另一种情形。详见后边的代码。

3. 实现代码:

  1. 为了能用最小的开销实现预览代码效果， 我把代码都摘出来放到一个 html 文档中了；
  2. 为了能更好的表达点、线的所属关系， 命名有点冗长了。倒也情有可原，原因嘛，一是现代编译工具可以帮我打包压缩，因此也无所顾忌； 二是如果不好好命名，过一段时间我自己也睁眼瞎了。
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <canvas id="canvas" width="1980" height="1000"></canvas>
  <script>

    const run = (start, controlPoint, end) => {
      const canvas = document.querySelector('#canvas')
      const context = canvas.getContext('2d');
      const RANGE = 10; // 拾取扩展范围
      /*
        求出贝塞尔曲线“起点-控制点”和“终点-控制点”的直线方程
        @params controlPoint 控制点
        @params controlPoint 起点
        @params controlPoint 终点
      */
      function getBaseEquation(controlPoint, start, end) {
        const slopeOfLineControlPointToStart = (controlPoint.y - start.y) / (controlPoint.x - start.x) //   控制点-起点斜率
        const slopeOfLineControlPointToEnd = (controlPoint.y - end.y) / (controlPoint.x - end.x) //  控制点-终点斜率
        const absoluteTermOfLineToStart = start.y - slopeOfLineControlPointToStart * start.x //  控制点-起点直线方程常数项
        const absoluteTermOfLineToEnd = end.y - slopeOfLineControlPointToEnd * end.x // 控制点-终点直线方程常数项
        const lineControlPointToStart = x => slopeOfLineControlPointToStart * x + absoluteTermOfLineToStart // 控制点-起点直线方程
        const lineControlPointToEnd = x => slopeOfLineControlPointToEnd * x + absoluteTermOfLineToEnd // 控制点-终点直线方程
        return {
          lineControlPointToStart,
          lineControlPointToEnd,
          slopeOfLineControlPointToStart,
          slopeOfLineControlPointToEnd,
          absoluteTermOfLineToStart,
          absoluteTermOfLineToEnd
        }
      }
      const { lineControlPointToStart,
        lineControlPointToEnd,
        slopeOfLineControlPointToStart,
        slopeOfLineControlPointToEnd,
        absoluteTermOfLineToStart,
        absoluteTermOfLineToEnd } = getBaseEquation(controlPoint, start, end)

      /*
        根据贝塞尔曲线“起点-控制点”和“终点-控制点”的直线方程，求出扩展后的上下四条平行线的方程
        * 
      */
      function getShiftedEquation(controlPoint, start, end, range) {
        const hypotenuseOfStart = Math.sqrt(Math.pow(controlPoint.x - start.x, 2) + Math.pow(controlPoint.y - start.y, 2)) // 控制点-起点弦长
        const RANGE_OF_START = RANGE * hypotenuseOfStart / Math.abs(controlPoint.x - start.x) // 与 “控制点-起点”直线平行的两条直线的 y 轴偏移量
        const hypotenuseOfEnd = Math.sqrt(Math.pow(controlPoint.x - end.x, 2) + Math.pow(controlPoint.y - end.y, 2)) // 控制点-终点弦长
        const RANGE_OF_END = RANGE * hypotenuseOfEnd / Math.abs(controlPoint.x - end.x)// 与 “控制点-终点”直线平行的两条直线的 y 轴偏移量
        const lineLeftAbove = x => (lineControlPointToStart(x) + RANGE_OF_START) // 起点-控制点向上偏移方程
        const lineLeftBellow = x => (lineControlPointToStart(x) - RANGE_OF_START) // 起点-控制点向下偏移方程
        const lineRightAbove = x => (lineControlPointToEnd(x) + RANGE_OF_END) // 终点-控制点向上偏移方程
        const lineRightBellow = x => (lineControlPointToEnd(x) - RANGE_OF_END) // 终点-控制点向下偏移方程
        return {
          RANGE_OF_START,
          RANGE_OF_END,
          lineLeftAbove,
          lineLeftBellow,
          lineRightAbove,
          lineRightBellow
        }
      }

      const {
        RANGE_OF_START,
        RANGE_OF_END,
        lineLeftAbove,
        lineLeftBellow,
        lineRightAbove,
        lineRightBellow
      } = getShiftedEquation(controlPoint, start, end, RANGE)

      /***
       * 求出偏移后的控制点, 偏移直线的交点即为偏移后的控制点
      */
      function getShiftedControlPoint() {

        let controlPonitAboveX = (absoluteTermOfLineToEnd + RANGE_OF_END - absoluteTermOfLineToStart - RANGE_OF_START) / (slopeOfLineControlPointToStart - slopeOfLineControlPointToEnd)
        if (slopeOfLineControlPointToStart * slopeOfLineControlPointToEnd < 0) {
          controlPonitAboveX = (absoluteTermOfLineToEnd - RANGE_OF_END - absoluteTermOfLineToStart - RANGE_OF_START) / (slopeOfLineControlPointToStart - slopeOfLineControlPointToEnd)
        }
        const controlPointAbove = {
          x: controlPonitAboveX,
          y: lineLeftAbove(controlPonitAboveX)
        }
        let controlPonitBelloweX = (absoluteTermOfLineToEnd - RANGE_OF_END - absoluteTermOfLineToStart + RANGE_OF_START) / (slopeOfLineControlPointToStart - slopeOfLineControlPointToEnd)
        if (slopeOfLineControlPointToStart * slopeOfLineControlPointToEnd < 0) {
          controlPonitBelloweX = (absoluteTermOfLineToEnd + RANGE_OF_END - absoluteTermOfLineToStart + RANGE_OF_START) / (slopeOfLineControlPointToStart - slopeOfLineControlPointToEnd)
        }
        const controlPointBellow = {
          x: controlPonitBelloweX,
          // slopeOfLineControlPointToStart * slopeOfLineControlPointToEnd < 0 时， 线要变
          y: lineLeftBellow(controlPonitBelloweX)
        }

        return {
          controlPointAbove,
          controlPointBellow
        }
      }

      const { controlPointAbove, controlPointBellow } = getShiftedControlPoint()

      /**
       * 求出经过左、右侧端点的垂线方程
       * 求出偏移后的两条贝塞尔曲线的起点和终点坐标
      */
      function getShiftedStartAndEndPoints() {
        const absoluteTermOfPerpendicularLineControlPointToStart = start.y + 1 / slopeOfLineControlPointToStart * start.x  // “控制点-起点”偏移方程的常数项
        const absoluteTermOfPerpendicularLineControlPointToEnd = end.y + 1 / slopeOfLineControlPointToEnd * end.x // “控制点-终点”偏移方程的常数项
        const perpendicularLineControlPointToStart = x => -(1 / slopeOfLineControlPointToStart) * x + absoluteTermOfPerpendicularLineControlPointToStart  // 垂线方程
        const perpendicularLineControlPointToEnd = x => -(1 / slopeOfLineControlPointToEnd) * x + absoluteTermOfPerpendicularLineControlPointToEnd // 垂线方程

        // 5. 求出4个垂足的坐标
        // 5.1 上边曲线起点
        // y = slopeOfLineControlPointToStart * x + absoluteTermOfLineToStart + RANGE_OF_START
        // y = -(1/slopeOfLineControlPointToStart) * x + absoluteTermOfPerpendicularLineControlPointToStart
        // 0 = (slopeOfLineControlPointToStart + 1/slopeOfLineControlPointToStart) * x + absoluteTermOfLineToStart + RANGE_OF_START -absoluteTermOfPerpendicularLineControlPointToStart
        const leftAboveStartX = (absoluteTermOfPerpendicularLineControlPointToStart - absoluteTermOfLineToStart - RANGE_OF_START) / (slopeOfLineControlPointToStart + 1 / slopeOfLineControlPointToStart)
        const leftAboveStart = {
          x: leftAboveStartX,
          y: lineLeftAbove(leftAboveStartX)
        }
        // 5.2 上边曲线终点
        const rightAboveEndX = (absoluteTermOfPerpendicularLineControlPointToEnd - absoluteTermOfLineToEnd - RANGE_OF_END) / (slopeOfLineControlPointToEnd + 1 / slopeOfLineControlPointToEnd)
        const rightAboveEnd = {
          x: rightAboveEndX,
          y: lineRightAbove(rightAboveEndX)
        }

        // 5.3 下边曲线起点
        // y = slopeOfLineControlPointToStart * x + absoluteTermOfLineToStart - RANGE_OF_START
        // y = -(1/slopeOfLineControlPointToStart) * x + absoluteTermOfPerpendicularLineControlPointToStart
        // 0 = (slopeOfLineControlPointToStart + 1/slopeOfLineControlPointToStart) * x + absoluteTermOfLineToStart - RANGE_OF_START - absoluteTermOfPerpendicularLineControlPointToStart
        const leftBellowStartX = (absoluteTermOfPerpendicularLineControlPointToStart + RANGE_OF_START - absoluteTermOfLineToStart) / (slopeOfLineControlPointToStart + 1 / slopeOfLineControlPointToStart)
        const leftBellowStart = {
          x: leftBellowStartX,
          y: lineLeftBellow(leftBellowStartX)
        }

        // 5.4 下边曲线终点
        const rightBellowX = (absoluteTermOfPerpendicularLineControlPointToEnd + RANGE_OF_END - absoluteTermOfLineToEnd) / (slopeOfLineControlPointToEnd + 1 / slopeOfLineControlPointToEnd)
        const rightBellowEnd = {
          x: rightBellowX,
          y: lineRightBellow(rightBellowX)
        }


        return {
          leftAboveStart,
          rightAboveEnd,
          leftBellowStart,
          rightBellowEnd,
        }

      }

      const { leftAboveStart,
        rightAboveEnd,
        leftBellowStart,
        rightBellowEnd
      } = getShiftedStartAndEndPoints()



      // 6. 画圆环
      if (slopeOfLineControlPointToStart * slopeOfLineControlPointToEnd < 0) {

        context.save();
        context.beginPath();
        context.moveTo(leftAboveStart.x, leftAboveStart.y);
        context.quadraticCurveTo(controlPointAbove.x, controlPointAbove.y, rightBellowEnd.x, rightBellowEnd.y);
        context.lineTo(rightAboveEnd.x, rightAboveEnd.y);
        context.quadraticCurveTo(controlPointBellow.x, controlPointBellow.y, leftBellowStart.x, leftBellowStart.y);
        context.lineTo(leftAboveStart.x, leftAboveStart.y);
        context.stroke();
        context.restore();
      } else {
        // 6. 画圆环
        context.save();
        context.moveTo(leftAboveStart.x, leftAboveStart.y);
        context.quadraticCurveTo(controlPointAbove.x, controlPointAbove.y, rightAboveEnd.x, rightAboveEnd.y);
        context.lineTo(rightBellowEnd.x, rightBellowEnd.y);
        context.quadraticCurveTo(controlPointBellow.x, controlPointBellow.y, leftBellowStart.x, leftBellowStart.y);
        context.lineTo(leftAboveStart.x, leftAboveStart.y);
        context.stroke();
        context.restore();

      }




      // 1. 以下是辅助作图， 对实际作图无影响， 只是便于理解
      // 2. 以下是辅助作图， 对实际作图无影响， 只是便于理解
      // 3. 以下是辅助作图， 对实际作图无影响， 只是便于理解

      // 画中心贝塞尔曲线
      context.save();
      context.beginPath();
      context.beginPath();
      context.moveTo(start.x, start.y);
      context.quadraticCurveTo(controlPoint.x, controlPoint.y, end.x, end.y);
      context.stroke();
      context.restore();

      const drawCircle = (x, y, color) => {
        context.save()
        context.beginPath();
        context.moveTo(x, y);
        context.strokeStyle = color;
        context.fillStyle = color;
        context.arc(x, y, 5, 0, Math.PI * 2);
        context.fill();
        context.restore();

      }

      drawCircle(controlPoint.x, controlPoint.y, 'red')
      drawCircle(controlPointAbove.x, controlPointAbove.y, 'green')
      drawCircle(controlPointBellow.x, controlPointBellow.y, 'blue')
      drawCircle(leftAboveStart.x, leftAboveStart.y, 'black')
      drawCircle(leftBellowStart.x, leftBellowStart.y, 'black')



      const drawLines = (x1, y1, x2, y2, x3, y3, color) => {
        context.save();
        context.beginPath();
        context.strokeStyle = color || "#000";
        context.moveTo(x1, y1);
        context.lineTo(x2, y2);
        context.lineTo(x3, y3);
        context.stroke();
        context.restore();
      }
      // if (slopeOfLineControlPointToStart * slopeOfLineControlPointToEnd < 0) {
      //   // 高线起点---高线控制点的线---高线终点
      //   drawLines(leftAboveStart.x, leftAboveStart.y, controlPointAbove.x, controlPointAbove.y, rightBellowEnd.x, rightBellowEnd.y)
      //   drawLines(leftBellowStart.x, leftBellowStart.y, controlPointBellow.x, controlPointBellow.y, rightAboveEnd.x, rightAboveEnd.y)
      // } else {
      //   // 高线起点---高线控制点的线---高线终点
      //   drawLines(leftAboveStart.x, leftAboveStart.y, controlPointAbove.x, controlPointAbove.y, rightAboveEnd.x, rightAboveEnd.y)
      //   drawLines(leftBellowStart.x, leftBellowStart.y, controlPointBellow.x, controlPointBellow.y, rightBellowEnd.x, rightBellowEnd.y)
      // }
    }

    const line1 = run(
      { x: 321, y: 743 },
      { x: 345, y: 632 },
      { x: 324, y: 126 }
    )
    const line2 = run(
      { x: 621, y: 743 },
      { x: 587, y: 632 },
      { x: 612, y: 126 }
    )
    const line3 = run(
      { x: 1432, y: 200 },
      { x: 1342, y: 600 },
      { x: 800, y: 800 }
    )
    const line4 = run(
      { x: 900, y: 200 },
      { x: 800, y: 600 },
      { x: 700, y: 800 }
    )

  </script>



</body>

</html>

四、效果预览：

如下图， 一共有四条曲线， 每条曲线都被两条曲线包围， 并且两端封闭。我们只需要判断点击事件源坐标是否在封闭图形内部， 即可判定封闭路径内部的曲线是否被点中， 这样就可以实现在不加宽线宽的前提下，扩展点击范围的目的了。几点说明：

  1. 黑色的点是扩展曲线的起点；
  2. 红色点点是中间曲线的控制点；
  3. 蓝色的点和绿色的点是两条扩展曲线的控制点。

在这里插入图片描述

小扣柴扉久
关注
二次贝塞尔曲线定距等分.html
12-05
二次贝塞尔定距等分,控制台可以获取一组定距等分点的数组,在捕鱼游戏中还算实用(要是谁有三次贝塞尔定距等分的实现还请告知一下)
基于js Canvas实现二次贝塞尔曲线
12-10
本文实例为大家分享了js Canvas实现二次贝塞尔曲线的具体代码，供大家参考，具体内容如下 先上效果图： 实现代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>二...
二次贝塞尔曲线
weixin_30316097的博客
06-28 1464
二次贝塞尔曲线 贝塞尔曲线(Bézier curve)，又称贝兹曲线或贝济埃曲线，是应用于二维图形应用程序的数学曲线。一般的矢量图形软件通过它来精确画出曲线，贝兹曲线由线段与节点组成， 节点是可拖动的支点，线段像可伸缩的皮筋，我们在绘图工具上看到的钢笔工具就是来做这种矢量曲线的。贝塞尔曲线是计算机图形学中相当重要的参数曲线，在一些比较 成熟的位图软件中也有贝塞尔曲线工具，如PhotoS...
深度掌握SVG路径path的贝塞尔曲线指令
SalmonellaVaccine的专栏
02-07 1619
by zhangxinxu from http://www.zhangxinxu.com 本文地址：http://www.zhangxinxu.com/wordpress/?p=4197 一、数字、公式、函数、变量，哦，NO! 又又一次说起贝塞尔曲线（英语：Bézier curve，维基百科详尽中文释义戳这里），我最近在尝试实现复杂的矢量图形动画，发现对贝塞尔曲线的理解馒头那么厚，是
[转]匀速贝塞尔曲线运动的实现
AS3
01-07 1275
[url]http://www.thecodeway.com/blog/?p=293[/url] 二次贝塞尔曲线通常以如下方式构建，给定二维平面上的固定点P0,P1,P2，用B(t)表示该条曲线 [img]http://dl.iteye.com/upload/attachment/385470/696934c4-859d-3565-baee-e7a2897e89c7.gif[/img]...
【chatgpt代码系列】三阶贝塞尔曲线等距点算法
少磊的博客
03-21 861
三阶贝塞尔曲线上可以计算出对应的点坐标。本程序利用递归方式计算贝塞尔曲线上等间距的点坐标，主要涉及递归算法和贝塞尔曲线的基本原理。请注意，贝塞尔曲线是一种可描述平滑曲线的数学模型，三阶贝塞尔曲线由四个控制点确定。这是一个 C++ 的程序，用于计算三阶贝塞尔曲线上等间距的点。并将起始点和终止点的参数值分别设为。为3阶贝塞尔曲线的4个控制点坐标。，通过二分法计算出满足以下条件的。计算出曲线上对应的点坐标，即。初始化采样点列表，包括起始点。，计算出采样点的间隔。
visualization7_三次贝塞尔曲线的绘制_
10-04
三次贝塞尔曲线是一种在计算机图形学中广泛应用的数学模型，常用于曲线的平滑插值和形状设计。本文将深入探讨三次贝塞尔曲线的基本概念、数学公式、OpenGL实现及其在可视化中的应用。 三次贝塞尔曲线是由四个控制点...
小程序二次贝塞尔曲线实现购物车商品曲线飞入效果
10-17
在本文中，我们将深入探讨如何在微信小程序中利用二次贝塞尔曲线实现购物车商品的曲线飞入动画效果。这个效果可以提升用户体验，让商品的添加过程更具动态感和趣味性。 首先，我们要了解什么是贝塞尔曲线。贝塞尔...
bezier曲线绘制Python代码-bezier曲线算法-贝塞尔曲线平滑-曲线拟合代码-曲线平滑算法-三次贝塞尔曲线
最新发布
04-25
这是一份python 版本的bezier曲线（贝塞尔曲线）绘制代码，实现了二次和三次bezier曲线的绘制，可用于一系列给定的离散点的曲线平滑。此代码封装成函数，可以直接调用。脚本里边有参数和代码的注释，可供使用者学习...
研究贝塞尔曲线, 定距等分 ...
mu399的专栏
09-27 2498
贝塞尔曲线公式推导原理 https://www.cnblogs.com/equal/p/6414263.html 贝塞尔曲线原理(简单阐述) https://www.cnblogs.com/hnfxs/p/3148483.html n 阶贝塞尔曲线计算公式实现 https://blog.csdn.net/aimeimeits/article/details/72809382 [转]匀速贝塞尔曲线运...
平面Bezier曲线的等距曲线有理逼近新方法 (2007年)
05-09
文章根据等距曲线逼近的关键在于对其参数速度模的逼近，提出了对参数速度模有理逼近的2种形式，在此基础上给出了平面雎zier曲线等距曲线的逼近函数和误差估计函数，并导出了保持法矢平移方向的代数方式的等距有理逼近算法。最后给出例子验证其效果。
贝塞尔曲线生成工具
07-04
贝塞尔曲线生成小工具,里面包含二次贝塞尔曲线，三次贝塞尔曲线，在用canvas画贝塞尔曲线时很有用
cpu-temp-approximation：一个使用分段线性插值和三次样条曲线（贝塞尔曲线）近似时间序列数据的类项目
02-15
_____ ______ _ _ _____ / __ \| ___ \ | | | |_ _| | / \/| |_/ / | | | | | ___ _ __ ___ _ __ | | | __/| | | | | |/ _ \ '_ ` _ \| '_ \ | \__/\| | | |_| | | | __/ | | | | | |_) | \____/ \_| \___/ \_/\___|_| |_| |_| .__/ | |
Path使用--二阶贝塞尔曲线实现水波效果
wangwo1991的博客
09-13 1146
上面这个效果是使用Path绘制二阶贝塞尔曲线实现的；二阶贝塞尔曲线涉及到三个点，起始点、拐点、终点，而拐点有决定着曲线的形状；下面这张图大致展示了二阶贝塞尔曲线： A点是起始点，C点是终点，B点是拐点，当然根据绘制的需求，B是变动的，绘制出来的曲线也就不一样，这里只是一个大致的示意图；那么只需调用path里面的相应方法，进行这几个点的设置一个简单的二阶贝塞尔曲线就可以实现了； 设置二阶贝塞尔曲线
3阶贝塞尔曲线沿线长等距分割方法
LuDanTongXue的博客
05-18 3747
3阶贝塞尔曲线等距分割1、引言2、数学计算应用demo下载 1、引言 贝塞尔(bezier)曲线又称样条曲线，常用的有2阶跟3阶形式，3阶曲线最为常用，其公式（1）为： P0/P1/P2/P3为其四个控制点，贝塞尔曲线基础知识站内有相当详细地讲解博文。沿t进行等分，做出的曲线如下图蓝色点所示： 生成的点在沿曲线线长方向上，并不是均匀的。本文意在解决这个问题，实现线长方向上均匀的效果，如下图所示： 2、数学计算 将（1）式展开，转换为关于t的方程得到（2）式： 则（2）式简化为（3）式： 将（3）
算法研究之贝塞尔曲线
eclipse_xu
02-03 8055
贝塞尔曲线 贝塞尔曲线（The Bézier Curves），是一种在计算机图形学中相当重要的参数曲线（2D，3D的称为曲面）。贝塞尔曲线于1962年，由法国工程师皮埃尔·贝塞尔（Pierre Bézier）所发表，他运用贝塞尔曲线来为汽车的主体进行设计。 线性曲线 给定点P0、P1，线性贝塞尔曲线只是一条两点之间的直线。这条线由下式给出： 当参数t变化时，其过程如下： 线性
贝塞尔曲线及实践案例
梦否
03-15 4012
文章目录1. 前言2. 介绍2.1 一阶贝济埃曲线2.2 二阶贝塞尔曲线2.3 三阶贝塞尔曲线3. 一、二、三阶贝塞尔曲线实现4. 案例5. 后记 1. 前言 贝塞尔曲线(Bézier curve)，又称贝兹曲线或贝济埃曲线，是应用于二维图形应用程序的数学曲线。一般的矢量图形软件通过它来精确画出曲线，贝兹曲线由线段与节点组成，节点是可拖动的支点，线段像可伸缩的皮筋，我们在绘图工具上看到的钢笔工具就是来做这种矢量曲线的。 2. 介绍 2.1 一阶贝济埃曲线 一阶贝济埃曲线的公式如下： B(t)=(1-t)P
贝塞尔曲线
yinfourever的专栏
04-13 681
文章参考于：https://www.jianshu.com/p/0c9b4b681724 贝赛尔曲线的前世今生： 贝塞尔曲线，这个命名规则一眼看上去大概是一个叫贝塞尔的数学家发明的。但，贝塞尔曲线依据的最原始的数学公式，是在1912年在数学界广为人知的伯恩斯坦多项式。简单理解，伯恩斯坦多项式可以用来证明，在[ a, b ] 区间上所有的连续函数都可以用多项式来逼近，并且收敛性很强，也就...
canvas绘制曲线图
friend18750230725的博客
06-09 2222
/** moveTo() 是Canvas 2D API 将一个新的子路径的起始点移动到(x,y)坐标的方法 CanvasRenderingContext2D.lineTo()是 Canvas 2D API 使用直线连接子路径的终点到(x,y)做标的方法（并不会真正地绘制）。 使用beginPath() 绘制路径的起始点， 使用moveTo()移动画笔， 使用stroke()方法真正的画线 定义和用法： fillText()方法在画布上绘制填色的文本。文本的默认颜色是黑色。 .
OpenGL实现三次贝塞尔曲线绘制教程
资源摘要信息:"本教程详细介绍了如何使用OpenGL技术来绘制三次贝塞尔曲线。贝塞尔曲线是一种在计算机图形学中广泛使用的参数曲线，特别适用于平滑的曲线设计。三次贝塞尔曲线是贝塞尔曲线的一个特例，它使用三个控制...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值