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

最新推荐文章于 2023-04-12 10:17:48 发布
最新推荐文章于 2023-04-12 10:17:48 发布
阅读量551 收藏 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. 蓝色的点和绿色的点是两条扩展曲线的控制点。

在这里插入图片描述

小扣柴扉久
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Bezier曲线原理及实现代码（c++）
weixin_34195364的博客
02-24 4534
Bezier曲线原理及实现代码（c++）   2009-06-30 18:50:09|  分类： 数据结构与算法|字号 订阅            一、原理：        贝塞尔曲线于1962年，由法国工程师皮埃尔·贝塞尔（Pierre Bézier）所广泛发表，他运用贝塞尔曲线来为汽车的主体进行设计。贝塞尔曲线最初由 Paul de Casteljau 于...
小程序二次贝塞尔曲线实现购物车商品曲线飞入效果
10-17
主要介绍了小程序二次贝塞尔曲线实现购物车商品曲线飞入效果，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
【chatgpt代码系列】三阶贝塞尔曲线等距点算法
少磊的博客
03-21 746
三阶贝塞尔曲线上可以计算出对应的点坐标。本程序利用递归方式计算贝塞尔曲线上等间距的点坐标，主要涉及递归算法和贝塞尔曲线的基本原理。请注意，贝塞尔曲线是一种可描述平滑曲线的数学模型，三阶贝塞尔曲线由四个控制点确定。这是一个 C++ 的程序，用于计算三阶贝塞尔曲线上等间距的点。并将起始点和终止点的参数值分别设为。为3阶贝塞尔曲线的4个控制点坐标。，通过二分法计算出满足以下条件的。计算出曲线上对应的点坐标，即。初始化采样点列表，包括起始点。，计算出采样点的间隔。
canvas绘制曲线图
friend18750230725的博客
06-09 2136
/** moveTo() 是Canvas 2D API 将一个新的子路径的起始点移动到(x,y)坐标的方法 CanvasRenderingContext2D.lineTo()是 Canvas 2D API 使用直线连接子路径的终点到(x,y)做标的方法（并不会真正地绘制）。 使用beginPath() 绘制路径的起始点， 使用moveTo()移动画笔， 使用stroke()方法真正的画线 定义和用法： fillText()方法在画布上绘制填色的文本。文本的默认颜色是黑色。 .
用canvas画曲线图
weixin_55532289的博客
04-12 1452
canvas画曲线图
canvas isPointInPath
farmwang的专栏
08-22 1664
由于isPointInPath方法仅判断当前上下文环境中的路径，所以当Canvas里已经绘制了多个图形时，仅能以最后一个图形的上下文环境来判断事件。例如，如果我们最后画的是右腿，那么我们只能判断是否点击了右腿，而不能判断身体的其他部分——右腿最后画。 这种问题的解决方法是：当点击事件发生时，重绘所有图形，每绘制一个就使用isPointInPath方法，判断事件坐标是否在该图形覆盖范围内。
基于js Canvas实现二次贝塞尔曲线
12-10
本文实例为大家分享了js Canvas实现二次贝塞尔曲线的具体代码，供大家参考，具体内容如下 先上效果图： 实现代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>二...
visualization7_三次贝塞尔曲线的绘制_
10-04
使用OpenGL实现三次贝塞尔曲线的绘制。
微信小程序使用二次贝塞尔曲线画波浪
10-17
主要为大家详细介绍了微信小程序使用二次贝塞尔曲线画波浪，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
深度掌握SVG路径path的贝塞尔曲线指令
SalmonellaVaccine的专栏
02-07 1559
by zhangxinxu from http://www.zhangxinxu.com 本文地址：http://www.zhangxinxu.com/wordpress/?p=4197 一、数字、公式、函数、变量，哦，NO! 又又一次说起贝塞尔曲线（英语：Bézier curve，维基百科详尽中文释义戳这里），我最近在尝试实现复杂的矢量图形动画，发现对贝塞尔曲线的理解馒头那么厚，是
让你马上明白isPointInPath 属性—— canvas的 isPointInPath 属性测试案例
Allan_L的博客
07-06 1483
&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;canvas事件&lt;/title&gt;&lt;/head&gt;&lt;body&gt;&lt;canvas id="myCanvas" wi
Python绘制三阶贝塞尔曲线
PengphyLee21的博客
09-01 5349
利用Python自带的Tkinter绘制函数曲线
计算机图形学：二次和三次贝塞尔曲线（通过Pymatplotlib绘制）
星空_MAX
04-28 1895
在计算机中，直接拖动去绘制曲线很难获得想要的图形，法国工程师发表了贝塞尔曲线的概念，贝塞尔曲线是计算机图形图像造型的基本工具，是图形造型运用得最多的基本线条之一 二次贝塞尔曲线 下面的链接可以直观的，拖动第三点即可感受到贝塞尔曲线的“圆滑” 贝塞尔曲线绘制：贝塞尔曲线在线绘制🚀 ...
css贝塞尔曲线 多个点_了解贝塞尔曲线的数学和Python实现示例
weixin_39519741的博客
11-20 353
贝塞尔曲线在计算机图形学中被大量使用，通常可以产生平滑的曲线。如果您曾经使用过Photoshop，则可能会发现名为“锚点”的工具，您可以在其中放置锚点并用它们绘制一些曲线，这些也是贝塞尔曲线。如果您使用了基于矢量的图形SVG，这些也会使用贝塞尔曲线。让我们看看它是如何工作的。定义给定n + 1 个点(P0，…，Pn)称为控制点，这些点定义的贝塞尔曲线定义为：eq. 1其中B(t)称为Bernste...
贝塞尔曲线 (Bézier curve) 理论及绘制方法
zhanlanmg的专栏
06-26 7184
演示地址数学中公式是很重要的，我们先看公式。公式线性公式给定点P0、P1，线性贝兹曲线只是一条两点之间的直线。这条线由下式给出：B(t)=P0+(P1-P0)t=(1-t)P0+tP1, t ∈[0, 1]且其等同于线性插值。二次方公式二次方贝兹曲线的路径由给定点P0、P1、P2的函数B（t）追踪： TrueType字型就运用了以贝兹样条组成的二次贝兹曲线。三次方公式P0、P1、P2、P3四个点
学习笔记：贝塞尔曲线法
ohhjack的博客
10-28 1246
学习笔记：贝塞尔曲线法
绘制二次贝塞尔曲线的几种方式
qq_44688479的博客
09-28 731
贝塞尔曲线的绘制
滑动轨迹 曲线 python_用Python动画来展示二阶贝赛尔曲线
weixin_39739234的博客
11-24 291
说起来贝氏曲线，我们可能首先会想到下面这个男人：图1. 一位不愿透露姓名的英国球员但实际上我们说的不是这个叫贝克汉姆的英国男人，而是另外一个人，就是下面这个叫“皮埃尔·贝塞尔”（Pierre Bézier）的法国男人：图2. 皮埃尔·贝塞尔贝塞尔论起知名度，也许不如小贝，但说起对人类的贡献，那可是杠杠的，著名的“贝塞尔曲线”就出自他之手。1962年，贝塞尔发表了贝塞尔曲线的相关理论研究，当时在雷诺...
C# 循环绘制二次贝塞尔曲线
最新发布
05-19
在 C# 中绘制二次贝塞尔曲线可以使用 Graphics 类的 DrawBezier 方法，该方法需要四个点作为参数：起始点、控制点和终止点。下面是一个循环绘制二次贝塞尔曲线的示例代码： ```csharp using System; using System....

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值