分类
未分類

網站第一篇文章

歡迎使用 WordPress。這是這個網站的第一篇文章,試試為這篇文章進行編輯或直接刪除,然後開始撰寫新文章!

分类
一条咸鱼 电脑/技术

时间叠加计算

https://c.runoob.com/front-end/61

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title>静时间叠加计算</title>
    </head>

    <body>

        <h1>静涛</h1>
        <p id="JTtime"></p>

    </body>
    <script>
        window.onload = function starttime() {
            time(JTtime, '2017/8/12');                           // 在一起的时间
            ptimer = setTimeout(starttime, 1000);            // 添加计时器
        }

        function time(obj, futimg) {
            var nowtime = new Date().getTime();             // 现在时间转换为时间戳
            var futruetime = new Date(futimg).getTime();   // 未来时间转换为时间戳
            var msec = nowtime - futruetime;                  // 毫秒 未来时间-现在时间
            var time = (msec / 1000);                         // 毫秒/1000
            var day = parseInt(time / 86400);                 // 天  24*60*60*1000 
            var hour = parseInt(time / 3600) - 24 * day;          // 小时 60*60 总小时数-过去的小时数=现在的小时数 
            var minute = parseInt(time % 3600 / 60);            // 分 -(day*24) 以60秒为一整份 取余 剩下秒数 秒数/60 就是分钟数
            var second = parseInt(time % 60);                 // 以60秒为一整份 取余 剩下秒数
            //              console.log(hour+":"+minute+":"+second)
            //              alert(hour)
            obj.innerHTML = "一起时间已经:<br>" + day + "天" + hour + "小时" + minute + "分" + second + "秒" + "了<br>"

            return true;
        }
    </script>

</html>
分类
一条咸鱼

密码保护:乜

这是一篇受密码保护的文章,您需要提供访问密码:

分类
电脑/技术

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>
分类
一条咸鱼

密码保护:高堂明镜悲白发,朝如青丝暮成雪。

这是一篇受密码保护的文章,您需要提供访问密码:

分类
一条咸鱼

密码保护:Welcome back

这是一篇受密码保护的文章,您需要提供访问密码:

分类
未分類

Hello world!

Welcome to WordPress. This is your first post. Edit or delete it, then start writing!

之前写博客使用的是 hexo ,把个人博客放在了GitHub Page(https://ganwt.github.io)里。谁曾想,微信直接把我的域名给封禁了。初以为可能是因为国内禁止GitHub吧,可是,直到我发现了微信并不禁止GitHub的主网站,这是什么狗屁道理。主站没禁,禁我这小透明网页。

怀揣着对WordPress的好奇,买了一个月的NameSilo Cheap Web Hosting试玩(服务器位于加拿大)。虽然有些卡慢,但这种可视化操作像古早的QQ空间一样简单。打算弄个wp的新站,找了日本的gmo和sakura,因为读日语的片仮名(カタカナ)太难受了,虽然我英文也很烂,最终买了美国的公司的亚洲线路(服务器位于新加坡)。速度是没日本的快,但是比加拿大的快了,且没有不明所以片假名干扰。

疫情影响下都紧锁国门,恰巧身份证过期,今年都补办无望了。人民币账户都被冻结,微信什么的钱也提现不出来,这服务器可以用支付宝付款,便一口气买了四年。昨晚草草做了主页,接下来就把文章转移一下吧。

分类
电脑/技术

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));

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

分类
电脑/技术

赛灵思xilinx(ZCU106) 连接PC文件I/O和局域网Apache2

前言

我们在用 Zynq UltraScale+ MPSoC ZCU106 评估套件做开发的时候,前端页面依靠在 Goole Chrome 上面运行HTML + CSS + Javascript 来实现。利用 PHP 连接CPU-Acore ,再通过共用内存的方式与 CPU-Rcore交互。

image-20200617102447402

思路

大致思路如图所示。做页面的开发与调试的过程中,需要后端的数据,才不至于整个页面到处是error的提示和无法运行。刚开始是做了个虚拟的数据程序.exe在pc上做页面的开发与调试。随着开发节奏的紧凑,时间不够用,每版特地做个虚拟程序的方案实在进行不下去了,就想要做个PC直连板子传输文件,且顺带通过Apache2让项目组的其他人也可以操控板子。大致思路如下:

image-20200617103533901

网页访问实现方案:

先给板子设定一个ip,再给电脑设一个ip,再设个转发端口。

给板子设ip:

ifconfig eth0 192.168.100.2 netmask 255.255.255.0 up

这样就完成了,当然,每次重启之后就必须重新输入一下。可以在启动程序里面写入永久命令,这样就不用每次输入了。

在板子(linux)的 /etc/network/interfaces 里写入

# /etc/network/interfaces -- configuration file for ifup(8), ifdown(8)

# The loopback interface
auto lo
iface lo inet loopback

# Wireless interfaces
iface wlan0 inet dhcp
    wireless_mode managed
    wireless_essid any
    wpa-driver wext
    wpa-conf /etc/wpa_supplicant.conf

iface atml0 inet dhcp

# Wired or wireless interfaces
auto eth0

//--------改下面eth0的[hcp]为[static]---------//
iface eth0 inet static
    address 192.168.100.2     //改这里的IP
    netmask 255.255.255.0
    network 192.168.100.0    //改这里的IP
    gateway 192.168.7.1
iface eth1 inet dhcp

# Ethernet/RNDIS gadget (g_ether)
# ... or on host side, usbnet and random hwaddr
iface usb0 inet static
    address 192.168.7.2
    netmask 255.255.255.0
    network 192.168.7.0
    gateway 192.168.7.1

# Bluetooth networking
iface bnep0 inet dhcp

接下来给电脑设置一下:

两种方式:
1. 不开apache2, 用80端口
只需要一步:
1) 防火墙里添加入站规则, 允许tcp80端口入站

2.使用9090端口
管理员权限打开cmd窗口:
1) netsh interface portproxy delete v4tov4 listenport=80
2) netsh interface portproxy add v4tov4 listenport=9090 connectaddress=192.168.100.2 connectport=80
防火墙:
3) 防火墙里添加入站规则, 允许tcp9090端口入站

控制台访问实现方案:

如果是与板子直连的PC,直接ssh就可以访问了。

ssh root@192.168.100.2

而,非直连PC的话,还需要再做个22端口的代理。

管理员权限打开cmd窗口:
1) netsh interface portproxy add v4tov4 listenport=2222 connectaddress=192.168.100.2 connectport=22
防火墙:
2) 防火墙里添加入站规则, 允许tcp2222端口入站

就可以通过2222端口访问板子的控制台了