分类
电脑/技术

Canvas的矩形、虚线、虚线矩形、画笔颜色函数封装

如题。封装了几个canvas的函数,有需要的话可以直接用。

直接上代码:

canvas画笔颜色封装:

            //画笔颜色
            function contextColor(color, context) {
                context ? context : context = ctx;
                if (color == 1) {
                    context.strokeStyle = "#00FF00"; //green
                } else if (color == 2) {
                    // context.strokeStyle = "#0000FF"; //blue
                    context.strokeStyle = "#00FFFF"; //AQUA
                } else if (color == 3) {
                    context.strokeStyle = "#FFFF00"; //yellow
                } else if (color >= 4 && color <= 6) {
                    context.strokeStyle = "#FFFFFF"; //WHITE
                } else if (color == 7) {
                    context.strokeStyle = "#FF0000"; //red
                } else if (isNaN) {
                    context.strokeStyle = color ? color : context.strokeStyle = "#FF00FF"; //FUCHSIA
                }
            }

canvas画矩形:

            //画方框
            function drawstrokeRect(x, y, w, h, color) {
                contextColor(color);
                ctx.strokeRect(x, y, w, h);
            }

canvas画虚线:

            //虚线直线
            function drawDashLine(starX, starY, endX, endY, step) {
                ctx.beginPath();
                ctx.moveTo(starX, starY);
                ctx.setLineDash([step ? step : 5]);
                ctx.lineWidth = 2;
                ctx.lineTo(endX, endY);
                ctx.stroke();
            }

canvas画虚线矩形:

            //虚线矩形
            function drawDashRect(x, y, w, h, color) {
                contextColor(color);
                drawDashLine(x, y, (x + w), y);
                drawDashLine((x + w), y, (x + w), (y + h));
                drawDashLine(x, y, x, (y + h));
                drawDashLine(x, (y + h), (x + w), (y + h));
            }
分类
电脑/技术

Canvas_ZoomIn_ZoomOut

基于Canvas的扩大与缩小功能。其原理为:

file

按照上图的原理,做一个扩大缩小的功能,需要画三个canvas的窗口。可以隐藏原图(A窗口),用户看到的只有BC窗口。如图:

file

html 的canvas部分 应该是:

<canvas id="StageCanvas" width="682"></canvas><!-- 放大后的图(工作区 -->
<canvas id="OriginalCanvas" style="display:none;"></canvas><!-- 原图(隐藏 -->
<canvas id="AnimatedZoomCanvas" width="400"></canvas><!-- 缩小图(扩大缩小 -->
<p>拡大縮小比例:<span id="CropImage_gap">100%</span></p>
<span id="MoveUp" class="btn btn-success btn-lm" data-toggle="tooltip" title="上移動"><i class="fas fa-arrow-up"></i></span>
<span id="MoveLeft" class="btn btn-success btn-lm" data-toggle="tooltip" title="左移動"><i class="fas fa-arrow-left"></i></span>
<span id="MoveRight" class="btn btn-success btn-lm" data-toggle="tooltip" title="右移動"><i class="fas fa-arrow-right"></i></span>
<span id="MoveDow" class="btn btn-success btn-lm" data-toggle="tooltip" title="下移動"><i class="fas fa-arrow-down"></i></span>
<span id="ZoomIn" class="btn btn-indigo btn-lg" data-toggle="tooltip" title="拡大"><i class="fas fa-search-plus"></i></span>
<span id="ZoomOut" class="btn btn-indigo btn-lg" data-toggle="tooltip" title="縮小"><i class="fas fa-search-minus"></i></span>
<span id="Recover" class="btn btn-cyan btn-lg" data-toggle="tooltip" title="全体"><i class="fas fa-search"></i></span>

当然,还加入了扩大缩小功能,鼠标长按功能,滚轮控制功能,滚轮倍率功能。

file

JavaScript的代码:

    <!-- Canvas -->
    <script type="text/javascript">
        $(function() {
            //主显示StageCanvas
            var StageCanvas = document.getElementById("StageCanvas"),
                Sctx = StageCanvas.getContext("2d");

            //扩大缩小canvas窗口
            var AnimatedZoomCanvas = document.getElementById("AnimatedZoomCanvas"),
                AZctx = AnimatedZoomCanvas.getContext("2d");

            //OriginalCanvas //原图大小
            var OriginalCanvas = document.getElementById("OriginalCanvas"),
                Octx = OriginalCanvas.getContext("2d");

            //图片的url
            var BGimg = new Image();
            BGimg.src = "../i-scr/0001_180402_130900_285_OK_C1.BMP"; //图片地址

            //设置canvas的宽
            StageCanvas.width = $("#CameraWidth").width();

            //其他参数
            var StageCanvas_w = StageCanvas.width, //主显示StageCanvas宽
                StageCanvas_h, //主显示StageCanvas高
                img_w = BGimg.width, //图片宽
                img_h = BGimg.height, //图片高
                StageCanvas_gap, //主显示StageCanvas和图片比率
                AnimatedZoomCanvas_w = AnimatedZoomCanvas.width, //缩放画布宽
                AnimatedZoomCanvas_h, //缩放画布高
                AnimatedZoomCanvas_gap, //缩放画布和图片比率
                CropImage_x = 0, //截取图的x
                CropImage_y = 0, //截取图的y
                CropImage_w, //截取宽
                CropImage_h; //截取高

            var CanvasX = 50,
                CanvasY = 45,
                CanvasW = 50,
                CanvasH = 50; //canvas矩形的参数(test测试用

            //当图片加载完成后,画背景图
            BGimg.onload = function() {
                OriginalCanvas.width = BGimg.width; //set OriginalCanvas.width
                OriginalCanvas.height = BGimg.height; //set OriginalCanvas.height
                StageCanvas_gap = img_w / StageCanvas_w; // get StageCanvas_gap =img(BGimg.width)/StageCanvas_w
                StageCanvas_h = (img_h / StageCanvas_gap); //get StageCanvas_h
                StageCanvas.height = StageCanvas_h; //set StageCanvas.height
                AnimatedZoomCanvas_gap = img_w / AnimatedZoomCanvas_w; // get AnimatedZoomCanvas_gap = img(BGimg.width)/AnimatedZoomCanvas_w 
                AnimatedZoomCanvas_h = (img_h / AnimatedZoomCanvas_gap); //get AnimatedZoomCanvas_h
                AnimatedZoomCanvas.height = AnimatedZoomCanvas_h; //set AnimatedZoomCanvas.height
                CropImage_w = AnimatedZoomCanvas_w; //Set initial value of CropImage_w
                CropImage_h = AnimatedZoomCanvas_h; //Set initial value of CropImage_h
                BackgroundImage();
            }

            function BackgroundImage() {
                Octx.strokeStyle = "#FF00FF";
                Octx.drawImage(BGimg, 0, 0);
                Octx.strokeRect(CanvasX, CanvasY, CanvasW, CanvasH);

                let w1 = (CropImage_w * AnimatedZoomCanvas_gap); //截取宽 * 缩放画布和图片比率。
                let h1 = (CropImage_h * AnimatedZoomCanvas_gap); //截取高 * 缩放画布和图片比率。
                let x1 = (CropImage_x * AnimatedZoomCanvas_gap); //截取 x * 缩放画布和图片比率。
                let y1 = (CropImage_y * AnimatedZoomCanvas_gap); //截取 y * 缩放画布和图片比率。
                Sctx.drawImage(OriginalCanvas, x1, y1, w1, h1, 0, 0, StageCanvas_w, StageCanvas_h);
                AZctx.drawImage(OriginalCanvas, 0, 0, AnimatedZoomCanvas_w, AnimatedZoomCanvas_h);
                AnimatedZoomCanvasRect(CropImage_x, CropImage_y, CropImage_w, CropImage_h);
            }

            //AnimatedZoomCanvas里画图形
            function AnimatedZoomCanvasRect(x, y, w, h) {
                AZctx.beginPath();
                AZctx.strokeStyle = "rgba(255,152,0,1)";
                AZctx.rect(x, y, w, h);
                AZctx.stroke();
                document.getElementById("CropImage_gap").innerHTML = parseInt((AnimatedZoomCanvas_w / CropImage_w) * 100) + "%";
            }

            //復元
            document.getElementById("Recover").onclick = Recover;

            function Recover() {
                CropImage_w = AnimatedZoomCanvas_w;
                CropImage_h = AnimatedZoomCanvas_h;
                CropImage_x = 0;
                CropImage_y = 0;
                BackgroundImage();
            }

            //放大
            document.getElementById("ZoomIn").onclick = function() {
                ZoomIn(1.1);
            }

            function ZoomIn(ZoomRatio) {
                let CropImage_w_back = CropImage_w;
                let CropImage_h_back = CropImage_h;
                if (CropImage_x <= 0 || CropImage_y <= 0) {
                    CropImage_w /= ZoomRatio;
                    CropImage_h /= ZoomRatio;
                    CropImage_x += (CropImage_w_back - CropImage_w) / 2;
                    CropImage_y += (CropImage_h_back - CropImage_h) / 2;
                } else {
                    CropImage_w /= ZoomRatio;
                    CropImage_h /= ZoomRatio;
                    CropImage_x += (CropImage_w_back - CropImage_w) / 2;
                    CropImage_y += (CropImage_h_back - CropImage_h) / 2;
                }
                BackgroundImage();

            }

            //缩小
            document.getElementById("ZoomOut").onclick = function() {
                ZoomOut(1.1);
            }

            function ZoomOut(ZoomRatio) {
                let CropImage_w_back = CropImage_w;
                let CropImage_h_back = CropImage_h;
                let CropImage_RightDowW = CropImage_x + CropImage_w; //右下角x
                let CropImage_RightDowY = CropImage_y + CropImage_h; //右下角y
                if (CropImage_RightDowW >= AnimatedZoomCanvas_w || CropImage_RightDowY >= AnimatedZoomCanvas_h) {
                    CropImage_w *= ZoomRatio;
                    CropImage_h *= ZoomRatio;
                    let CropImage_missdistanceX = (CropImage_x + CropImage_w) - CropImage_RightDowW; //get 扩大差=扩大后右下角x-扩大前右下角x
                    let CropImage_missdistanceY = (CropImage_y + CropImage_h) - CropImage_RightDowY; //get 扩大差=扩大后右下角y-扩大前右下角y
                    if (CropImage_y <= 0) {
                        CropImage_y = 0;
                        CropImage_x -= CropImage_missdistanceX;
                        BackgroundImage();
                    } else if (CropImage_x <= 0) {
                        CropImage_x = 0;
                        CropImage_y -= CropImage_missdistanceY;
                        BackgroundImage();
                    } else {
                        CropImage_x -= CropImage_missdistanceX;
                        CropImage_y -= CropImage_missdistanceY;
                        if (CropImage_x <= 0) { //防止左边超出框外
                            CropImage_x = 0;
                        }
                        BackgroundImage();
                    }
                } else if (CropImage_RightDowY < AnimatedZoomCanvas_h || CropImage_RightDowW < AnimatedZoomCanvas_w) {
                    CropImage_w *= ZoomRatio;
                    CropImage_h *= ZoomRatio;
                    CropImage_y -= (CropImage_h - CropImage_h_back) / 2;
                    CropImage_x -= (CropImage_w - CropImage_w_back) / 2;
                    if(CropImage_x<=0){
                        CropImage_x=0;
                    }
                    if(CropImage_y<=0){
                        CropImage_y=0;
                    }
                    BackgroundImage();
                }
                if (CropImage_w >= AnimatedZoomCanvas_w || CropImage_h >= AnimatedZoomCanvas_h) {
                    Recover();
                }
            }

            //键盘
            var MoveUp = false,
                MoveDow = false,
                MoveLeft = false,
                MoveRight = false;

            //长按连续事件
            setInterval(function() {
                if (MoveUp) {
                    MoveupFunction();
                } else if (MoveDow) {
                    MoveDowFunction();
                } else if (MoveLeft) {
                    MoveLeftFunction();
                } else if (MoveRight) {
                    MoveRightFunction();
                }
            }, 50);

            //按下鼠标(上下左右)
            document.getElementById("MoveUp").onmousedown = function() {
                MoveUp = true;
            }
            document.getElementById("MoveDow").onmousedown = function() {
                MoveDow = true;
            }
            document.getElementById("MoveLeft").onmousedown = function() {
                MoveLeft = true;
            }
            document.getElementById("MoveRight").onmousedown = function() {
                MoveRight = true;
            }
            //松开鼠标(上下左右)
            document.getElementById("MoveUp").onmouseup = function() {
                MoveUp = false;
            }
            document.getElementById("MoveDow").onmouseup = function() {
                MoveDow = false;
            }
            document.getElementById("MoveLeft").onmouseup = function() {
                MoveLeft = false;
            }
            document.getElementById("MoveRight").onmouseup = function() {
                MoveRight = false;
            }
            //移开鼠标(上下左右)
            document.getElementById("MoveUp").onmouseout = function() {
                MoveUp = false;
            }
            document.getElementById("MoveDow").onmouseout = function() {
                MoveDow = false;
            }
            document.getElementById("MoveLeft").onmouseout = function() {
                MoveLeft = false;
            }
            document.getElementById("MoveRight").onmouseout = function() {
                MoveRight = false;
            }

            //上移
            function MoveupFunction() {
                if (CropImage_y <= 0) {
                    CropImage_y = 0;
                } else {
                    CropImage_y--;
                }
                BackgroundImage();

            }

            //下移
            function MoveDowFunction() {
                let CropImage_Dowy = CropImage_y + CropImage_h;
                if (CropImage_Dowy >= AnimatedZoomCanvas_h) {
                    CropImage_y = AnimatedZoomCanvas_h - CropImage_h;
                } else {
                    CropImage_y++;
                }
                BackgroundImage();

            }

            //左移
            function MoveLeftFunction() {
                if (CropImage_x <= 0) {
                    CropImage_x = 0;
                } else {
                    CropImage_x--;
                }
                BackgroundImage();
            }

            //右移
            function MoveRightFunction() {
                let CropImage_Rightx = CropImage_x + CropImage_w;
                if (CropImage_Rightx >= AnimatedZoomCanvas_w) {
                    CropImage_x = AnimatedZoomCanvas_w - CropImage_w;
                } else {
                    CropImage_x++;
                }
                BackgroundImage();

            }

            //scroll_Up函数
            function scrollUp(scrollData) {
                if (scrollData == 120) {
                    ZoomOut(1.1);
                } else if (scrollData == 240) {
                    ZoomOut(1.3);
                } else if (scrollData == 360) {
                    ZoomOut(1.5);
                } else if (scrollData == 480) {
                    ZoomOut(1.9);
                }
            }
            //scroll_Down函数
            function scrollDown(scrollData) {
                if (scrollData == -120) {
                    ZoomIn(1.1);
                } else if (scrollData == -240) {
                    ZoomIn(1.3);
                } else if (scrollData == -360) {
                    ZoomIn(1.5);
                } else if (scrollData == -480) {
                    ZoomIn(1.9);
                }
            }
            //滚动鼠标
            AnimatedZoomCanvas.onmousewheel = function(e) {
                let scrollData = e.wheelDelta;
                if (CropImage_w <= AnimatedZoomCanvas_w && CropImage_h <= AnimatedZoomCanvas_w) {
                    scrollUp(scrollData);
                    scrollDown(scrollData);
                } else {
                    Recover();
                }

            }

            //添加鼠标按下事件
            AnimatedZoomCanvas.onmousedown = function(e) {
                let dmx = e.offsetX - CropImage_x;
                let dmy = e.offsetY - CropImage_y;
                if (AZctx.isPointInPath(e.offsetX, e.offsetY)) {
                    //路径正确,鼠标移动事件
                    AnimatedZoomCanvas.onmousemove = function(ev) {
                        CropImage_x = ev.offsetX - dmx;
                        CropImage_y = ev.offsetY - dmy;
                        //限制移动不能超出画布
                        if (CropImage_x <= 0) {
                            CropImage_x = 0;
                        }
                        if (CropImage_y <= 0) {
                            CropImage_y = 0;
                        }
                        let CropImage_Rightx = CropImage_x + CropImage_w;
                        if (CropImage_Rightx >= AnimatedZoomCanvas_w) {
                            CropImage_x = AnimatedZoomCanvas_w - CropImage_w;
                        }
                        let CropImage_Dowy = CropImage_y + CropImage_h;
                        if (CropImage_Dowy >= AnimatedZoomCanvas_h) {
                            CropImage_y = AnimatedZoomCanvas_h - CropImage_h;
                        }
                        //鼠标移动每一帧都清楚画布内容,然后重新画圆
                        AZctx.clearRect(0, 0, AnimatedZoomCanvas.width, AnimatedZoomCanvas.height);
                        BackgroundImage();
                    };
                };

                //鼠标抬起清除绑定事件
                AnimatedZoomCanvas.onmouseup = function() {
                    AnimatedZoomCanvas.onmousemove = null;
                    AnimatedZoomCanvas.onmouseup = null;
                };
                AnimatedZoomCanvas.onmouseout = function() {
                    AnimatedZoomCanvas.onmouseup();
                };
            }

            // console.log('鼠标移动坐标')
            StageCanvas.onmousemove = function mouseMoveAction(e) {
                document.getElementById("mouse_x").innerHTML = e.offsetX;
                document.getElementById("mouse_y").innerHTML = e.offsetY;
            };
        })
    </script>
分类
电脑/技术

JavaScript实现角距離:中心/重心/点距离/x与y距离/垂线与距离

前言

接下来开发新功能,称之为「角距離(かくきょり)」 ,中文称之为「角距(jiǎo jù)」 。引用百度百科的解释:

「角距,即角距离,也称为角分离、视距离、或视分离,在数学(特别是几何学和三角学)和自然科学(包括天文学、地质学等等),从不同于两个点物体的位置(即第三点)观察这两个物体,由观测者指向这两个物体的直线之间所夹角度的大小。角距离(或分离)与角度本身是同义的,但意义却是对两个天体(对恒星,是当从地球观测)之间线距离的建议(通常是很大或未知的)。」

大概印象如下:

1

而我们打算要实现的功能有:中心/重心/点距离/x与y距离/垂线与距离 。最终是通过JavaScript/canvas来实现的,因为还没开始写,这边先整理一下思路、公式之类的。

ここからやるよ

先理解一下canvas的坐标系。

2

canvas的坐标系是左上角(0,0)开始,所以都是正值,负值是看不见的,和中学时候学习的坐标系略有不同。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Canvas绘制直线</title>
    </head>
    <body>
        <canvas id="canvas" width="200" height="150" style="border: 0.0625rem;"></canvas>
    </body>
    <script>
        var canvas = document.getElementById("canvas");
        var cxt = canvas.getContext("2d");
        //画直线
        window.onload = function(){
            cxt.moveTo(80,20);
            cxt.lineTo(20,60);
            cxt.stroke();
        }
    </script>
</html>

2

上图左边是中学时学的坐标系(使用笛卡尔坐标系)将 (0,0) 放置在正中央,y 轴由下至上 x 轴由左至右。而上图右边的电脑窗口的坐标系在 y 轴的方向是相反的。(0,0) 被定义在左上角并往右边及往下延伸。

1. 中心

4

如图,A点和B点点中心点怎么求呢?直接 ${A}(x,y)-{B}(x,y)$ 就可以了。

//A点
var Ax = 80,
    Ay = 20;

//B点
var Bx = 20,
    By = 60;

//中心点
var Cx = Ax-Bx,
    Cy = Ay-By;

2. 重心

5

var Ax,Ay, //设置A点坐标
    Bx,By, //设置B点坐标
    Cx,Cy, //设置C点坐标
    CGx, //Center of gravity
    CGy; //重心
CGx = (Ax + Bx + Cx) / 3;
CGy = (Ay + By + Cy) / 3;

3. 两点距離

6

页面中有 AB 两个点,那么我们设两点坐标 A(x1, y1)、B(x2, y2)。我们可以将 AB 的连线看成是直角三角形的斜边,图中 C 为直角三角形的直角。现在我们已知 A、B 两点的坐标,那么边长 BC 就是 |x1 – x2|,边长 AC 就是 |y1 – y2|。

那么根据勾股定理 $a^2 + b^2 = c^2$ ,斜边 AB 就求得公式为 $|AB|=\sqrt{(x1-x2)^2+(y1-y2)^2}$ 公式已经知道了,下面用代码的形式写出来:

function getDistanceBetweenTwoPoints(x1, y1, x2, y2){
    var a = x1 - x2;
    var b = y1 - y2;

    // c^2 = a^2 + b^2
    // a^2 = Math.pow(a, 2)
    // b^2 = Math.pow(b, 2)
    var result = Math.sqrt(Math.pow(a, 2) + Math.pow(b, 2));

    return result;
}

Math.sqrt方法是求平方根,Math.pow(n, 2)是求一个数的平方。上面的的方法就是根据两点的坐标求得两点的距离。

除了根据勾股定理之外,我们还可以根据一次函数的来得到斜边的长度,将斜边 AB 看成一个一次函数 y = kx + b,将 A、B 两点的坐标代入,我们就可以得到 $|AB|=\sqrt{1+k^2}|x1-x2|=\sqrt{1+\frac{1}{k^2}}|y1-y2|$ 。

4. xy座標距離

① x座標距離

7

手绘图,大概这么个意思。B(x,y)A(x,y) 的坐标,取结果 Distance(x,y) 的 x 就是了。

var Ax,Ay, //设置A点坐标
    Bx,By, //设置B点坐标
    Distancex, //距離x
    Distancey; //距離y
Distancex = Ax - Bx;
Distancey = Ay - By;

② y座標距離

8

也是手绘图,大概这么个意思。B(x,y)A(x,y) 的坐标,取结果 Distance(x,y) 的 y 就是了。

var Ax,Ay, //设置A点坐标
    Bx,By, //设置B点坐标
    Distancex, //距離x
    Distancey; //距離y
Distancex = Ax - Bx;
Distancey = Ay - By;

5. 直線の交叉点

10

如上图,已知四个点(Ax,Ay)(Bx,By)(Cx,Cy)(Dx,Dy),其中(Ax,Ay)(Bx,By)确定直线1(Cx,Cy)(Dx,Dy) 确定直线2,求直线1直线2的交点(CrossPointx,CrossPointy),公式如下:

$$CrossPointy=\frac{[(Ay-By)\times(Cy-Dy)\times Ax+(Cy-Dy)\times(Bx-Ax)\times Ay + (By-Ay)\times(Cy-Dy)\times Dx+(Dx-Cx)\times(By-Ay)\times Dy]}{[(Bx-Ax)\times(Cy-Dy)+(Ay-By)\times(Cx-Dx)]}$$

$$CrossPointx=Dx+\frac{(Cx-Dx)\times(CrossPointy-Dy)}{(Cy-Dy)}$$

//先求出CrossPointy
CrossPointy = ( (Ay-By)*(Cy-Dy)*Ax + (Cy-Dy)*(Bx-Ax)*Ay + (By-Ay)*(Cy-Dy)*Dx + (Dx-Cx)*(By-Ay)*Dy ) / ( (Bx-Ax)* (Cy-Dy) + (Ay-By)*(Cx-Dx) );
//求CrossPointx
CrossPointx = Dx + (Cx-Dx)*(CrossPointy-Dy) / (Cy-Dy);

6. 点直線間垂線と距離

垂线:当两条直线相交所成的四个角中,有一个角是直角时,即两条直线互相垂直,其中一条直线叫做另一直线的垂线,交点叫垂足。

垂足:如果两直线的夹角为直角,那么就说这两条直线互相垂直,其中一条直线叫做另一条直线的垂线,他们的交点叫做垂足,或者一条直线垂直交于另一直线,其交点称为该直线的垂足。

10

图上有 x y z 三个坐标轴,Unity 和 canvas 都可以画 2D 3D 的图。接下来画的是2D图,所以坐标用(x,y)就可以了。为了方便理解,把图重新画一下,以下图为准。

11

公式:

$$ T=\frac{(C-A)\times(A-B)}{(A-B)^2} $$

$$P=(A-B)\times T+A$$

var Ax,Ay, //设置A点坐标
    Bx,By, //设置B点坐标
    Cx,Cy, //设置C点坐标
    Px,Py,
        T;

① 点直線間垂線

//垂线就是 C点 和 P点 
T = ( (Cx-Bx)*(Ax-Bx) + (Cy-By)*(Ay-By) ) / ( (Ax-Bx)*(Ax-Bx) + (Ay-By)*(Ay-By) );
Px= (Ax-Bx)*T + Ax;
Py= (Ay-By)*T + Ay;

②点直線間距離

用勾股定理公式 $a^2 + b^2 = c^2$ 来算出两点的距离。

var a = Cx - Px;
var b = Cy - Py;
var Distance = Math.sqrt(Math.pow(a, 2) + Math.pow(b, 2));

我自己也不清楚有没有错误的地方,未来的自己呀,如果看到错误的话,记得帮忙指正哦。