一次二次三次bezier曲线的计算方式及demo演示

最新推荐文章于 2022-10-12 18:20:30 发布
最新推荐文章于 2022-10-12 18:20:30 发布
阅读量1w 收藏 7
点赞数 1
分类专栏： 前端 贝塞尔曲线 文章标签： bezier 动画 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cdnight/article/details/48494533
版权

前言

假如大家有看过最新的css3动画特性，相比对cube-bezier这个动画设置有印象，假如又有看过svg的path，那么想必对bezier曲线这个路径如何设置也会感兴趣。至于bezier的理论，本人在博客搬运了几篇，这篇文章主要用JavaScript脚本来计算bezier的各个位置，演示出来。

代码

<%--

--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>bezier曲线计算方式。</title>
  <script src="/static/lib/jquery-1.11.0.min.js"></script>
  <script src="/static/lib/jquery-migrate-1.2.1.js"></script>
</head>
<body>
<h3>一维贝塞尔曲线演示。</h3>

<div>请在400X400的范围内</div>
<div>请指定：起点：<input maxlength="4" value="0" id="linear_start_x">, <input maxlength="4" value="0" id="linear_start_y">  终点：<input maxlength="4" value="0" id="linear_end_x">,<input maxlength="4" value="0" id="linear_end_y"> </div>
<div><input type="button" value="开始演示路径填充" id="btn_linear"></div>
<div id="linear_debug"></div>
<div>
  <canvas width="400" height="400" id="canvas_linear"></canvas>
</div>

<h3>二次贝塞尔曲线演示。</h3>

<div>请在400X400的范围内</div>
<div>请指定：起点：<input maxlength="4" value="0" id="sqrt_start_x">, <input maxlength="4" value="0" id="sqrt_start_y">  终点：<input maxlength="4" value="0" id="sqrt_end_x">,<input maxlength="4" value="0" id="sqrt_end_y"> </div>
<div>控制点1：<input maxlength="4" value="0" id="sqrt_crt1_x">, <input maxlength="4" value="0" id="sqrt_crt1_y"></div>
<div><input type="button" value="开始演示路径填充" id="btn_sqrt"></div>
<div id="sqrt_debug"></div>
<div>
  <canvas width="400" height="400" id="canvas_sqrt"></canvas>
</div>


<h3>三次贝塞尔曲线演示。</h3>

<div>请在400X400的范围内</div>
<div>请指定：起点：<input maxlength="4" value="0" id="cube_start_x">, <input maxlength="4" value="0" id="cube_start_y">  终点：<input maxlength="4" value="0" id="cube_end_x">,<input maxlength="4" value="0" id="cube_end_y"> </div>
<div>控制点1：<input maxlength="4" value="0" id="cube_crt1_x">, <input maxlength="4" value="0" id="cube_crt1_y"></div>
<div>控制点2：<input maxlength="4" value="0" id="cube_crt2_x">, <input maxlength="4" value="0" id="cube_crt2_y"></div>
<div><input type="button" value="开始演示路径填充" id="btn_cube"></div>
<div id="cube_debug"></div>
<div>
  <canvas width="400" height="400" id="canvas_cube"></canvas>
</div>

<script type="text/javascript">
  //--线性bezier 曲线求值，根据t值来求值，t取值为[0,1]，可以认为是0就在起点，1就在终点，是过程的百分比位置。
  var LinearBezier=function(point_start,point_end){
    var p_start={x:0,y:0};
    var p_end={x:0,y:0};
    p_start=point_start;
    p_end=point_end;
    //--计算t为某个值得时候的点。
    //--计算公式。
    /**
     *
     * [1 t]| 1   0| |P0|
     *      |-1   1| |P1|
     *
     * */
    this.getPoint=function(t){
      var _m_1_1=1-t;
      var _m_1_2= t;  //1*0+1*1+_t*0+_t*1;
      var _t_1_1= (1-t)*p_start.x+t*p_end.x; //0+(_t+1)*p_start.x+(_t+1)*p_end.x;
      var _t_1_2=(1-t)*p_start.y+t*p_end.y;   //0+(_t+1)*p_start.y+(_t+1)*p_end.y;
      var _res_point={
        x:_t_1_1
        ,y:_t_1_2
      };
      return _res_point;
    };
  };



  //--二次方bezier
  var SquareBezier=function(start_point,crt_point,end_point){
    var p_start={x:0,y:0};
    var p_end={x:0,y:0};
    p_start=start_point;
    p_end=end_point;
    var p_crt1=crt_point;
    /**
     * 计算公式：
     *            | 1  0  0|  |P0|
     * [1 t t*t ] |-2  2  0|  |P1|
     *            |1  -2  1|  |P2|
     * **/
    this.getPoint=function(t){
      var _matrix1=[1,t,t*t];
      var _matrix2=[
        [1,0,0]
        ,[-2,2,0]
        ,[1,-2,1]
      ];
      var _matrix3=[
            [p_start.x,p_start.y]
            ,[p_crt1.x,p_crt1.y]
            ,[p_end.x,p_end.y]
      ];
      var _matrix_tmp=[
        _matrix1[0]*_matrix2[0][0]+_matrix1[1]*_matrix2[1][0]+_matrix1[2]*_matrix2[2][0]
        ,_matrix1[0]*_matrix2[0][1]+_matrix1[1]*_matrix2[1][1]+_matrix1[2]*_matrix2[2][1]
        ,_matrix1[0]*_matrix2[0][2]+_matrix1[1]*_matrix2[1][2]+_matrix1[2]*_matrix2[2][2]
      ];
      var _matrix_final=[
              _matrix_tmp[0]*_matrix3[0][0]+_matrix_tmp[1]*_matrix3[1][0]+_matrix_tmp[2]*_matrix3[2][0]
              ,_matrix_tmp[0]*_matrix3[0][1]+_matrix_tmp[1]*_matrix3[1][1]+_matrix_tmp[2]*_matrix3[2][1]
      ];

      var _res_point={
        x:_matrix_final[0]
        ,y:_matrix_final[1]
      };
      return _res_point;
    };

  };//

  var CubeBezier=function(point_start,point1,point2,point_end){
    var p_start={x:0,y:0};
    var p_end={x:0,y:0};
    p_start=point_start;
    p_end=point_end;
    var p_crt1=point1;
    var p_crt2=point2;
    /**
     * 计算公式：
     *                  | 1  0  0   0|  |P0|
     * [1 t t*t  t*t*t] |-3  3  0   0|  |P1|
     *                  |3  -6  3   0|  |P2|
     *                  |-1  3  -3  1|  |p3|
     *
     * **/
    this.getPoint=function(t){
      var _matrix1=[1,t,t*t,t*t*t];
      var _matrix2=[
        [1,0,0,0]
        ,[-3,3,0,0]
        ,[3,-6,3,0]
        ,[-1,3,-3,1]
      ];

      var _matrix3=[
        [p_start.x,p_start.y]
        ,[p_crt1.x,p_crt1.y]
        ,[p_crt2.x,p_crt2.y]
        ,[p_end.x,p_end.y]
      ];
      var _matrix_tmp=[
        _matrix1[0]*_matrix2[0][0]+_matrix1[1]*_matrix2[1][0]+_matrix1[2]*_matrix2[2][0]+_matrix1[3]*_matrix2[3][0]
        ,_matrix1[0]*_matrix2[0][1]+_matrix1[1]*_matrix2[1][1]+_matrix1[2]*_matrix2[2][1]+_matrix1[3]*_matrix2[3][1]
        ,_matrix1[0]*_matrix2[0][2]+_matrix1[1]*_matrix2[1][2]+_matrix1[2]*_matrix2[2][2]+_matrix1[3]*_matrix2[3][2]
        ,_matrix1[0]*_matrix2[0][3]+_matrix1[1]*_matrix2[1][3]+_matrix1[2]*_matrix2[2][3]+_matrix1[3]*_matrix2[3][3]
      ];

      var _matrix_final=[
        _matrix_tmp[0]*_matrix3[0][0]+_matrix_tmp[1]*_matrix3[1][0]+_matrix_tmp[2]*_matrix3[2][0]+_matrix_tmp[3]*_matrix3[3][0]
        ,_matrix_tmp[0]*_matrix3[0][1]+_matrix_tmp[1]*_matrix3[1][1]+_matrix_tmp[2]*_matrix3[2][1]+_matrix_tmp[3]*_matrix3[3][1]
      ];

      var _res_point={
        x:_matrix_final[0]
        ,y:_matrix_final[1]
      };
      return _res_point;
    };


  };//
</script>
<script type="text/javascript">
  function DrawPoint(x,y,_context){
    var cans=_context;
    var cxt=_context;
    cxt.beginPath();
    cxt.arc(x,y,1,0,Math.PI*2,true);
    cxt.closePath();
    cxt.fill();
    return;
    //cans.moveTo(x,y);//第一个起点
    cans.lineTo(x,y);//第二个点
    //cans.lineTo(220,60);//第三个点（以第二个点为起点）
    cans.lineWidth=1;
    cans.strokeStyle = 'red';
    cans.stroke();
  }
</script>
<script type="text/javascript">
  //--演示程序。线性贝塞尔
  var linear_start_x=$("#linear_start_x");
  var linear_start_y=$("#linear_start_y");
  var linear_end_x=$("#linear_end_x");
  var linear_end_y=$("#linear_end_y");
  var canvas_linear=document.getElementById("canvas_linear");
  var context_linear=canvas_linear.getContext("2d");
  var btn_linear=$("#btn_linear");
  var linear_showing=false;
  var linear_debug=$("#linear_debug");

  btn_linear.click(function(){
    if(linear_showing==true){
      linear_debug.text("程序正在进行演示，请稍后再进行操作。");
      return;
    }
    linear_showing=true;
    context_linear.clearRect(0,0,canvas_linear.width,canvas_linear.height);
    //--绘制两个点。
    var _start_point={
      x:parseInt(linear_start_x.val())
      ,y:parseInt(linear_start_y.val())
    };
    var _end_point={
      x:linear_end_x.val()
      ,y:linear_end_y.val()

    };
    DrawPoint(_start_point.x,_start_point.y,context_linear);

    DrawPoint(_end_point.x,_end_point.y,context_linear);

    var _bezier=new LinearBezier(_start_point,_end_point);
    function linearDraw(t){
      var _t_point=_bezier.getPoint(t);
      console.log(_t_point);
      DrawPoint(_t_point.x,_t_point.y,context_linear);
    }

    var _now_t=0.01;

    var _interval1=setInterval(function(){

      if(_now_t>=1){
        clearInterval(_interval1);

        console.log("演示结束");
        linear_showing=false;
        return;
      }
      linearDraw(_now_t);
      _now_t=_now_t+0.01;
    },100);
  });
</script>

<script type="text/javascript">
  //--演示程序。二维贝塞尔
  var sqrt_start_x=$("#sqrt_start_x");
  var sqrt_start_y=$("#sqrt_start_y");
  var sqrt_end_x=$("#sqrt_end_x");
  var sqrt_end_y=$("#sqrt_end_y");
  var sqrt_crt1_x=$("#sqrt_crt1_x");
  var sqrt_crt1_y=$("#sqrt_crt1_y");
  var canvas_sqrt=document.getElementById("canvas_sqrt");
  var context_sqrt=canvas_sqrt.getContext("2d");
  var btn_sqrt=$("#btn_sqrt");
  var sqrt_showing=false;
  var sqrt_debug=$("#sqrt_debug");

  btn_sqrt.click(function(){
    if(sqrt_showing==true){
      sqrt_debug.text("程序正在进行演示，请稍后再进行操作。");
      return;
    }
    sqrt_showing=true;
    context_sqrt.clearRect(0,0,canvas_sqrt.width,canvas_sqrt.height);
    //--绘制两个点。
    var _start_point={
      x:parseInt(sqrt_start_x.val())
      ,y:parseInt(sqrt_start_y.val())
    };
    var _end_point={
      x:parseInt(sqrt_end_x.val())
      ,y:parseInt(sqrt_end_y.val())

    };
    var _crt_point1={
      x:parseInt(sqrt_crt1_x.val())
      ,y:parseInt(sqrt_crt1_y.val())
    };
    DrawPoint(_start_point.x,_start_point.y,context_sqrt);

    DrawPoint(_end_point.x,_end_point.y,context_sqrt);
    DrawPoint(_crt_point1.x,_crt_point1.y,context_sqrt);

    var _bezier=new SquareBezier(_start_point,_crt_point1,_end_point);
    function sqrtDraw(t){
      var _t_point=_bezier.getPoint(t);
      console.log(_t_point);
      DrawPoint(_t_point.x,_t_point.y,context_sqrt);
    }

    var _now_t=0.01;

    var _interval1=setInterval(function(){

      if(_now_t>=1){
        clearInterval(_interval1);
        console.log("演示结束");
        sqrt_showing=false;
        return;
      }
      sqrtDraw(_now_t);
      _now_t=_now_t+0.01;
    },100);
  });
</script>

<script type="text/javascript">
  //--演示程序。三次贝塞尔
  var cube_start_x=$("#cube_start_x");
  var cube_start_y=$("#cube_start_y");
  var cube_end_x=$("#cube_end_x");
  var cube_end_y=$("#cube_end_y");
  var cube_crt1_x=$("#cube_crt1_x");
  var cube_crt1_y=$("#cube_crt1_y");
  var cube_crt2_x=$("#cube_crt2_x");
  var cube_crt2_y=$("#cube_crt2_y");
  var canvas_cube=document.getElementById("canvas_cube");
  var context_cube=canvas_cube.getContext("2d");
  var btn_cube=$("#btn_cube");
  var cube_showing=false;
  var cube_debug=$("#cube_debug");

  btn_cube.click(function(){
    if(cube_showing==true){
      cube_debug.text("程序正在进行演示，请稍后再进行操作。");
      return;
    }
    cube_showing=true;
    context_cube.clearRect(0,0,canvas_cube.width,canvas_cube.height);
    //--绘制两个点。
    var _start_point={
      x:parseInt(cube_start_x.val())
      ,y:parseInt(cube_start_y.val())
    };
    var _end_point={
      x:parseInt(cube_end_x.val())
      ,y:parseInt(cube_end_y.val())

    };
    var _crt_point1={
      x:parseInt(cube_crt1_x.val())
      ,y:parseInt(cube_crt1_y.val())
    };
    var _crt_point2={
      x:parseInt(cube_crt2_x.val())
      ,y:parseInt(cube_crt2_y.val())
    };
    DrawPoint(_start_point.x,_start_point.y,context_cube);

    DrawPoint(_end_point.x,_end_point.y,context_cube);
    DrawPoint(_crt_point1.x,_crt_point1.y,context_cube);

    DrawPoint(_crt_point2.x,_crt_point2.y,context_cube);

    var _bezier=new CubeBezier(_start_point,_crt_point1,_crt_point2,_end_point);
    function cubeDraw(t){
      var _t_point=_bezier.getPoint(t);
      console.log(_t_point);
      DrawPoint(_t_point.x,_t_point.y,context_cube);
    }

    var _now_t=0.01;

    var _interval1=setInterval(function(){

      if(_now_t>=1){
        clearInterval(_interval1);
        console.log("演示结束");
        cube_showing=false;
        return;
      }
      cubeDraw(_now_t);
      _now_t=_now_t+0.01;
    },100);
  });
</script>
</body>
</html>

演示

线性演示
这里写图片描述

二次演示
这里写图片描述
三次演示
这里写图片描述

完毕。后续文章将介绍一些使用bezier曲线的地方。

码农下的天桥
关注
  • 1
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
三次Bezier曲线
11-30
根据三次贝塞尔曲线基于函数，要求使用鼠标左键拖动控制多边形的顶点，同时曲线能随之发生变化。
OpenGL绘制三次Bezier曲线
08-19
二、OpenGL绘制三次Bezier曲线的原理 要使用OpenGL绘制三次Bezier曲线，需要首先定义四个控制点，然后使用De Casteljau算法来计算曲线上的点。De Casteljau算法是一种常用的Bezier曲线计算算法，它可以将Bezier曲线...
贝塞尔曲线原理(简单阐述)
weixin_30764771的博客
06-21 515
原理和简单推导（以三阶为例）： 设P0、P02、P2是一条抛物线上顺序三个不同的点。过P0和P2点的两切线交于P1点，在P02点的切线交P0P1和P2P1于P01和P11，则如下比例成立： 这是所谓抛物线的三切线定理。 当P0，P2固定，引入参数t，令上述比值为t:(1-t)，即有： t从0变到1，第一、二式就分别表示控制二边形的第一、二条边，它们是两条一次Bezier曲线。...
js-三阶贝塞尔曲线计算公式
weixin_30832351的博客
08-10 1064
/** * 三阶贝塞尔曲线 * B(t) = P0 * (1-t)^3 + 3 * P1 * t * (1-t)^2 + 3 * P2 * t^2 * (1-t) + P3 * t^3, t ∈ [0,1] * * @param t 曲线长度比例 * @param p0 起始点 * @param p1 控制点1 ...
[图形学]习题解析1：一文搞懂贝塞尔曲线题目的计算
最新发布
qq_39377889的博客
10-12 3714
一文搞懂贝塞尔曲线题目的计算。当然，从题目反向理解贝塞尔曲线也能更好的学习Bezier曲线
由给定的端点和控制点 计算3次 Bezier 曲线
zgl7903的专栏
10-28 2258
#include <math.h> //计算3次 Bezier 曲线 //P0 P3 端点 //P1 P2 控制点 //ix 输入X //oy 输出Y //有效时返回true bool CalBezier3(POINT P0, POINT P1, POINT P2, POINT P3, double ix, double &oy) { double t, y, x1=0, x2=1, y1; //超过控制点范围？ if(ix <P0.x || ix >P3..
Matlab_画二次及三次Bezier曲线.rar_bezier利用MATLAB_三次曲线_二次及三次Bezier曲线
09-24
在MATLAB中绘制二次及三次Bezier曲线是一项基本的图形绘制技能，这在计算机图形学、设计和工程领域中尤其重要。Bezier曲线是一种基于控制点的参数曲线，它们以法国工程师Pierre Bézier的名字命名，因其灵活性和计算...
三次Bezier曲线.zip
06-02
三次Bezier曲线是一种在计算机图形学中广泛使用的数学模型，它用于创建平滑的曲线路径。在MFC（Microsoft Foundation Classes）框架下实现三次Bezier曲线，我们可以利用C++编程语言的特性，结合MFC的类库来创建用户...
Bezier二次曲线
12-05
Bezier二次曲线是计算机图形学中常见的一种平滑曲线表示方法，尤其在2D和3D图形渲染、动画制作以及CAD（计算机辅助设计）系统中广泛应用。这种曲线由一系列控制点定义，通过数学上的插值算法生成平滑连续的路径。在...
三次Bezier曲线原理及实现代码
11-16
### 三次Bezier曲线原理及实现代码 #### 一、Bezier曲线简介 Bezier曲线是一种在计算机图形学中广泛应用的参数曲线，被广泛应用于图形设计、字体渲染以及计算机辅助设计等领域。这种曲线是由法国工程师皮埃尔·...
2次贝塞尔曲线算法
10-25
2次贝塞尔曲线算法 用三次Bezier逼近圆弧:圆弧要等分成多少段 用三次Bezier逼近圆弧: 得到控制顶点数组 用三次Bezier逼近圆弧片段
贝塞尔曲线
09-25
从2阶到7阶的贝赛尔曲线 private static final int MAX_COUNT = 7; // 贝塞尔曲线最大阶数 private static final int REGION_WIDTH = 30; // 合法区域宽度 private static final int FINGER_RECT_SIZE = 60; // 矩形尺寸 private static final int BEZIER_WIDTH = 10; // 贝塞尔曲线线宽 private static final int TANGENT_WIDTH = 6; // 切线线宽 private static final int CONTROL_WIDTH = 12; // 控制点连线线宽 private static final int CONTROL_RADIUS = 12; // 控制点半径 private static final int TEXT_SIZE = 40; // 文字画笔尺寸 private static final int TEXT_HEIGHT = 60; // 文本高度 private static final int RATE = 10; // 移动速率 private static final int HANDLER_WHAT = 100; private static final int FRAME = 1000; // 1000帧 private static final String[] TANGENT_COLORS = {"#7fff00", "#7a67ee", "#ee82ee", "#ffd700", "#1c86ee", "#8b8b00"}; // 切线颜色 private static final int STATE_READY = 0x0001; private static final int STATE_RUNNING = 0x0002; private static final int STATE_STOP = 0x0004; private static final int STATE_TOUCH = 0x0010; private Path mBezierPath = null; // 贝塞尔曲线路径 private Paint mBezierPaint = null; // 贝塞尔曲线画笔 private Paint mMovingPaint = null; // 移动点画笔 private Paint mControlPaint = null; // 控制点画笔 private Paint mTangentPaint = null; // 切线画笔 private Paint mLinePaint = null; // 固定线画笔 private Paint mTextPointPaint = null; // 点画笔 private Paint mTextPaint = null; // 文字画笔 private ArrayList mBezierPoints = null; // 贝塞尔曲线点集 private PointF mBezierPoint = null; // 贝塞尔曲线移动点 private ArrayList mControlPoints = null; // 控制点集 private ArrayList<ArrayList<ArrayList>> mTangentPoints; // 切线点集 private ArrayList<ArrayList> mInstantTangentPoints; private int mR = 0; // 移动速率 private int mRate = RATE; // 速率 private int mState; // 状态 private boolean mLoop = false; // 设置是否循环 private boolean mTangent = true; // 设置是否显示切线 private int mWidth = 0, mHe
计算几何04_Bezier曲线与曲面
qq_35312463的博客
01-10 4111
一、Bezier曲线 1.1 Bezier曲线定义 给定n+1个控制点Pi（i＝0，1，2，…，n），则n次Bezier曲线定义为： 式中，t∈[0,1]，Pi（i＝0，1，2，…，n）是控制多边形的n+1个控制点。 Bi,n(t) 是Bernstein多项式，称为Bernstein基函数，其表达式为： 式中（i＝0，1，2，…，n）。 从式中可以看出：Bezier曲线是控制多边形的控制点关于Bernstein基函数的加权和。Bezier曲线的次数为n，则需要n+1个控制点来定义。在实际应用中，二次B.
3次Bezier曲线求交
qq_53715621的博客
02-27 645
求两个3次 Bezier 曲线的交点
作业4：Bézier 曲线
Highlight_Jin的博客
03-25 1691
一、功能 实现de Casteljau 算法来绘制由4 个控制点表示的Bézier 曲线(当你正确实现该算法时，你可以支持绘制由更多点来控制的Bézier 曲线)。实现对Bézier 曲线的反走样。 函数功能： • recursive_bezier()：实现de Casteljau 算法计算贝塞尔曲线上对应点的坐标 ，输入的是一个控制点序列和一个浮点数t。注意这个只能找到一个点，要找到若干个...
由给定的点计算Bezier曲线
zgl7903的专栏
02-16 2810
  //计算 Bezier curve //cpt 端点及控制点 //cn cpt的数量 //st 准备计算多少步 //pXY, X,Y的坐标输出 BOOL CalBezier(POINT cpt[], int cn, int st, POINT *pXY) { int r,i,k; double t, t1; double coeffx[20], coeffy[20]; i...
2字节取值范围_高中数学：构造不等式，解析几何范围题的有效解法
weixin_39715997的博客
11-23 95
有关范围问题，常要借助不等式去解。充分利用已知条件，挖掘题目中的隐含条件构造不等式便成为解范围题的关键。本文结合具体问题谈一下构造不等式的几种方法。一、利用题目中已知不等式或常用的基本不等式构造不等式例1. 设点P到点距离之差为2m，到x轴、y轴距离之比为2，求m的取值范围。解：设点P的坐标为(x，y)，依题设得即因此点三点不共线所以因为，所以，因此点P在以M、N为焦点，实轴长为的双曲线上，故将&...
二次曲线偶逼近三次Bezier曲线的高效算法
"本文介绍了一种使用二次曲线偶来逼近三次平面Bézier曲线的算法，该方法在保持曲线整体光滑性的同时，提供更高的精度和更快的运算速度，相较于双圆弧逼近法。该算法同样适用于其他类型的三次平面曲线。在计算机图形...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值