精华内容
下载资源
问答
  • 页面上有两颗星星图标,画一条线连接两颗星星。 1.先获取两点的坐标 2.计算弦长及旋转角度 3.绘制线 <div class="quality-analysis"> <div class="cnt-box"> <span class="selected-start"> ...
    页面上有两颗星星图标,画一条线连接两颗星星。

    1.先获取两点的坐标   2.计算弦长及旋转角度   3.绘制线

    <div class="quality-analysis">
      <div class="cnt-box">
         <span  class="selected-start">
            <svg class="icon fs16 warn-text icon-orange " aria-hidden="true">
               <use xlink:href="#h-delete-collect"></use>
             </svg>
          </span>
          <span  class="selected-start">
            <svg class="icon fs16 gray-text" aria-hidden="true">
              <use xlink:href="#h-collect"></use>
             </svg>
            </span> 
      </div>
    </div>
    <script>
      export default {
        data() {
          return {
            positionList: [], // 获取坐标
          }
        },
        mounted() {
          this.getStartPosition()
          this.drawLine(this.positionList)
        },
        methods: {
          // 获取星星坐标
          getStartPosition() {
            let nodeList = document.querySelectorAll('.selected-start')
            let parentNode = document.querySelector('.cnt-box').offsetParent
            let actualLeft = 0
            let current = 0
            let actualTop = 0
            if(nodeList.length>0){
              for(let i=0;i<nodeList.length;i++){
                actualLeft = nodeList[i].offsetLeft  // 累加计算星星相对于顶级父元素的距离
                actualTop = nodeList[i].offsetTop
                current = nodeList[i].offsetParent
                while(current!== parentNode){
                  actualLeft += current.offsetLeft
                  actualTop += current.offsetTop
                  current = current.offsetParent
                }
                let obj = {
                  x:actualLeft,
                  y:actualTop,
                }
                this.positionList.push(obj)
              }
            }
           
          },
    
          // 画星星连线
          drawLine(positionList) {
            if(positionList.length>0){
              for(let i=1;i<positionList.length;i++){
                // 计算长宽
                let rectWidth = Math.abs(positionList[i].x - positionList[i-1].x)
                let rectHeight = Math.abs(positionList[i].y - positionList[i-1].y)
                // 在页面确定div左上角的具体位置
                let rectX = positionList[i].x < positionList[i-1].x ? positionList[i].x : positionList[i-1].x
                let rectY = positionList[i].y < positionList[i-1].y  ? positionList[i].y : positionList[i-1].y
              
                // 弦长
                let stringWidth = Math.ceil(Math.sqrt((rectWidth * rectWidth)+ (rectHeight*rectHeight)))
                let xPad = (rectWidth - stringWidth)/2
                let yPad = (rectHeight - 2)/2
                // 从x轴到(x,y)的旋转角度
                let radNum = Math.atan2((positionList[i].y - positionList[i-1].y),(positionList[i].x - positionList[i-1].x))
                let  traX  = rectX +  xPad - 8 // 8为星星图标大小的1/2
                let  traY  = rectY +  yPad + 8
                // 创建div
                let div = document.createElement('div')
                div.innerHTML = '<div ' +
                  ' style = "width:' + stringWidth + 'px;height:2px;transform:translate(' + traX+ 'px,' + traY +'px) rotate('+ radNum+ 'rad) " class="draw-line-style"></div>'
                let doc = document.querySelector('.quality-analysis')
                doc.appendChild(div)
              }
            }
          }
        }
      }
    </script>

    说明:

    <style lang="scss">
      .quality-analysis {
        position: relative;
      .draw-line-style{
        top: 0;
        position: absolute;
        border-top: 1px solid $bgOrange;
      }
    </style>

    1.每个元素都有offsetTop和offsetLeft属性,表示该元素的左上角与父容器(offsetParent对象)左上角的距离。所以,只需要将这两个值进行累加,就可以得到该元素的绝对坐标。

    2.atan2(y,x) :返回从 x 轴到点 (x,y) 的角度(介于 -PI/2 与 PI/2 弧度之间)。

    展开全文
  • 把描述直角坐标系上的一个点的类作为基类派生出描述一条直线的泪和一个描述三角形的类定义成员函数,要求两点间的距离和三角形的面积 题目要求把描述直角坐标系上的一个点的类作为基类派生出描述一条直线的泪和一个...

    把描述直角坐标系上的一个点的类作为基类派生出描述一条直线的泪和一个描述三角形的类定义成员函数,要求两点间的距离和三角形的面积


    在这里插入图片描述

    #include<iostream>
    #include<string>
    #include<cmath>
    using namespace std;
    
    class Point
    {
    protected:
        int x1, y1;
    public:
        Point(int a, int b)
        {
            x1 = a; y1 = b;
        }
    };
    
    class Line :public Point
    {
    protected:
        int x2, y2;
    public:
        Line(int a, int b, int c, int d) :Point(a, b), x2(c), y2(d) {}
    };
    
    class Triangle :public Line
    {
    protected:
        int x3, y3;
        double area;
    public:
        Triangle(int a, int b, int c, int d, int e, int f) :Line(a, b, c, d), x3(e), y3(f) {}
        void f() {
            double x, y, z, s;
            x = sqrt((double)(x2 - x1) * (x2 - x1) + (y2 - y1) * (y2 - y1));
            y = sqrt((double)(x2 - x3) * (x2 - x3) + (y2 - y3) * (y2 - y3));
            z = sqrt((double)(x3 - x1) * (x3 - x1) + (y3 - y1) * (y3 - y1));
            s = (x + y + z) / 2;
            area = sqrt(s * (s - x) * (s - y) * (s - z));
        }
    
        void print()
        {
            cout << "(" << x1 << "," << y1 << ")" << "(" << x2 << "," << y2 << ")" << "(" << x3 << "," << y3 << ")" << endl;
            cout << "area=" << area << endl;
        }
    };
    
    
    int main()
    {
        int a[6];
        for (int i = 0; i < 6; i++)
            cin >> a[i];
        Triangle tri(a[0], a[1], a[2], a[3], a[4], a[5]);
        tri.f();
        tri.print();
        return 0;
    }
    
    
    展开全文
  • 【直线 是1阶的曲线】  这是计算机图形学样条曲线绘制或数学上插值函数的问题。首先,例如一条直线两点可以... 也即:两点确定一条直线(一阶多项式),三点确定一条抛物线(二阶多项式),有10个点就可以确定...

           【直线  是1阶的曲线】

          这是计算机图形学样条曲线绘制或数学上插值函数的问题。首先,例如一条直线,两点可以定义一条直线,而直线的定义式可以写为:y=kx+b,可用一次函数表示;即一阶的曲线(直线)由两个点定义。同理又例如:二阶的抛物线y=ax²+bx+c由三个点定义。
         也即:两点确定一条直线(一阶多项式),三点确定一条抛物线(二阶多项式),有10个点就可以确定一个9阶多项式(9阶多项式里面还有一个常数项,就是10个未知数,我们有10个数据点,刚好可以求解)。
    那么拟合特征多边形时,就需要使用样条曲线。样条曲线就是用多项式插值方法来表示或近似模拟任意特征多边型的拟合曲线,而曲线的阶数就等于(多边形顶点个数-1)。

    展开全文
  • * 判断由x3, y3定义是否在由x1, y1 和 x2, y2定义直线上(不是线段)? * @param x1 - 直线的第的x坐标 * @param y1 - 直线的第的y坐标 * @param x2 - 直线的第二个的x坐标 *
    public class LineAndPoint {
        
        /**
         * 判断由x3, y3定义的点是否在由x1, y1 和 x2, y2定义的直线上(不是线段)?
         * @param x1 - 直线的第一个点的x坐标
         * @param y1 - 直线的第一个点的y坐标
         * @param x2 - 直线的第二个点的x坐标
         * @param y2 - 直线的第二个点的y坐标
         * @param x3 - 要判断的点的x坐标
         * @param y3 - 要判断的点的y坐标
         * @param delta - 误差范围
         * @return true or false.
         */
        public static boolean ifPointOnLine(float x1, float y1, float x2, float y2, float x3, float y3, float delta) {
            float xa = x2 - x1;
            float ya = y2 - y1;
            float xb = x3 - x1;
            float yb = y3 - y1;
            return (Math.abs(yb / xb - ya / xa) <= delta);
        }
        
        /**
         * 判断由x3, y3定义的点是否在由x1, y1 和 x2, y2定义的线段之上?
         * @param x1 - 线段的第一个端点的x坐标
         * @param y1 - 线段的第一个端点的y坐标
         * @param x2 - 线段的第二个端点的x坐标
         * @param y2 - 线段的第二个端点的y坐标
         * @param x3 - 要判断的点的x坐标
         * @param y3 - 要判断的点的y坐标
         * @param delta - 误差范围
         * @return true or false.
         */
        public static boolean ifPointOnSegment(float x1, float y1, float x2, float y2, float x3, float y3, float delta) {
            float xa = x2 - x1;
            float ya = y2 - y1;
            float xb = x3 - x1;
            float yb = y3 - y1;
            return (Math.abs(yb / xb - ya / xa) <= delta
                    && Math.min(x1, x2) <= x3
                    && Math.max(x1, x2) >= x3
                    && Math.min(y1, y2) <= y3
                    && Math.max(y1, y2) >= y3);
        }
        
        /**
         * 判断由x3, y3定义的点是否在由x1, y1 和 x2, y2定义的直线上(不是线段)?
         * @param x1 - 直线的第一个点的x坐标
         * @param y1 - 直线的第一个点的y坐标
         * @param x2 - 直线的第二个点的x坐标
         * @param y2 - 直线的第二个点的y坐标
         * @param x3 - 要判断的点的x坐标
         * @param y3 - 要判断的点的y坐标
         * @param delta - 误差范围
         * @return true or false.
         */
        public static boolean ifPointOnLine(double x1, double y1, double x2, double y2, double x3, double y3, double delta) {
            double xa = x2 - x1;
            double ya = y2 - y1;
            double xb = x3 - x1;
            double yb = y3 - y1;
            return (Math.abs(yb / xb - ya / xa) <= delta);
        }
        
        /**
         * 判断由x3, y3定义的点是否在由x1, y1 和 x2, y2定义的线段之上?
         * @param x1 - 线段的第一个端点的x坐标
         * @param y1 - 线段的第一个端点的y坐标
         * @param x2 - 线段的第二个端点的x坐标
         * @param y2 - 线段的第二个端点的y坐标
         * @param x3 - 要判断的点的x坐标
         * @param y3 - 要判断的点的y坐标
         * @param delta - 误差范围
         * @return true or false.
         */
        public static boolean ifPointOnSegment(double x1, double y1, double x2, double y2, double x3, double y3, double delta) {
            double xa = x2 - x1;
            double ya = y2 - y1;
            double xb = x3 - x1;
            double yb = y3 - y1;
            return (Math.abs(yb / xb - ya / xa) <= delta
                    && Math.min(x1, x2) <= x3
                    && Math.max(x1, x2) >= x3
                    && Math.min(y1, y2) <= y3
                    && Math.max(y1, y2) >= y3);
        }
    }
    
    展开全文
  • using System;namespace day327{ public class CPoint { double x; double y; public CPoint(double x,double y) { this.x = x; this.y = y; } ...
  • 两点生成曲线

    千次阅读 2018-01-22 20:38:43
    看了标题的人可能会有这样的反应:两点不是能确定无限条曲线吗,这不是扯淡吗。。其实现在的需求是这样的:在一个游戏里,我们需要根据起点和落点生成一条看上去合理的曲线运动轨迹。在我的想象中,它至少应该是往...
  •  给定n+ 1个控制P0,P1, ...,Pn和个节点向量U= {u0,u1, ...,um},p次B-样条曲线由这些控制和节点向量U定义    其中Ni,p(u)是p次B-样条基函数。  B-样条曲线形式与贝塞尔曲线相似 。不像贝塞尔曲线,B-样条...
  • 2、遍历出所有取出两点的情况(不考虑先后顺序),根据任意两点确定一条直线,直线参数为k斜率,b与y轴交点的纵坐标(此时x=0),将他们放入一个列表中 3、将所有直线放入一个集合并完成去重操作,增加直线的第三个...
  • 样例 N = 4 且序列为 [0, 1, 3] 时,缺失的数为2。注意 可以改变序列中数的位置。挑战 在数组上原地完成,使用O(1)的额外空间和O(N)的时间。思路 ...3.想到了所有数列跟完整数列缺失的是即为
  • import math class Point: def __init__(self, x, y): self.x = x self.y = y def getX(self): return self.x def getY(self): return self.y class Line: def...
  • Unity求一条直线与平面的交点

    万次阅读 2018-06-01 20:19:59
    已知一个平面上的一点P0和法向量n,一条直线上的L0和方向L,求该直线与该平面的交点P如下图首先我们分析一下我们知道平面和直线的法向量,知道平面和直线上的一点,求直线与平面上的交点p。这里我们就要引入积的...
  • canvas02:使用canvas绘制一条直线

    千次阅读 2019-04-15 23:04:48
    在canvas01中,我们创建了一个简单的canvas案例,现在我们在canvas中绘制一条直线。 步骤: 1.定义canvas工具 2.设置起始坐标x,y (moveTo(x,y)) 3.移动到结束x1,y1 (lineTo(x1,y1)) 4.设置直线宽度...
  • python 计算两直线交点

    万次阅读 2018-05-08 19:17:40
    最近在做图像的透射变换,有一个关键问题就是找到原图像内四边形的四个顶点...首先,我们定义:直线L1:[x1,y1,x2,y2],直线L2:[x3,y3,x4,y4]简单解释一下原理:两点确定一条直线,而每一条直线都可以表示为:Y=kX+...
  • 两点坐标如何画出直线 matlab

    千次阅读 2016-09-20 17:45:00
    两点坐标如何画出直线 方法1:利用直线方程 斜率加截距  方法2:数据拟合 1 %由两点坐标得数据拟合直线与画线 2 x = [1,2]; 3 y = [5,8]; 4 k = ((8-2)/(5-1));% 由两点坐标得到直线斜率 5 line ...
  • Opencv学习笔记-----求取两条直线的交点坐标

    万次阅读 多人点赞 2016-12-15 12:06:07
    个2维平面中有直线(到点、(到点,这两条直线的交点用行列式表示如下: 行列式可变形写作: 该交点是由4个两两一确定的线段所在位置的直线的交点 根据贝塞尔参数可以将直线定义为: 其中...
  • //构造出两条线  CRect c = new CRect(l1, l2);  p1.print();  Console.Write("到");  p2.print();  Console.WriteLine("的距离:" + l1.distance());  Console.Write("周长为:" +c.perimeter() + " 面积为...
  • 一条直线上经过的格子

    千次阅读 2011-05-16 21:20:00
    斜率的绝对值小于1的情况  第二种情况是,斜率的绝对值大于1的情况  首先让我来说说第种情况  这线段的分别在种不同颜色的格子中  我先把在紫色格子中(左边的格子)的点定义为...
  • [latex]PGF and Tikz 求两条直线曲线的交点: 还是看个简单的例子吧: \begin{frame}{$Tikz$画出两条直线的交点} \begin{tikzpicture} \path [draw,name path=upward line] (1,0) -- (1,1); \path [draw,...
  • opencv3找直线并求任意两条直线交点

    千次阅读 2018-07-09 20:51:21
    opencv3找直线并求任意两条直线交点,并显示出来,是直线交点,因为我把线段延长了。 求交点函数 /*函数功能:求两条直线交点*/ /*输入:条Vec4i类型直线*/ /*返回:Point2f类型的*/ Point2f getCrossPoint...
  • 从图中可以看出,只有四个是保持不变的,分别...(1)在上四构成的三个线段中,p0-p1上有到,p1-p2上有到,p2-p3上有到,这三个分别这在上三个线段做差值运算。现在以上三个分别取名为A1,...
  • 判断直线的左右那

    千次阅读 2017-10-11 20:22:38
    方法:采用几何计算,求面积法。... 注意向量是有方向的... 判断 某一点在直线左右侧左右方向是相对前进方向...判断直线的左侧还是右侧是计算几何里面的个最基本算法.使用矢量来判断.  定义:平面上的三点P1
  • 我们所熟知的MALTAB 能够根据函数公式绘出相应的函数图像,由此我们便可以利用已知两点坐标,求出两点之间线段的一元次函数,并绘出图像。 二、绘图步骤 1.取定所要绘制图像的点,并明确需要绘制多少条直线 ...
  • 可以通过在Line 类中添加个方法来判断两条直线的交点,图5-8 阐明了数学原理。   图 5-8 如果想要,可以忽略这些数学,因为它们不是这个例子中最重要的部分。如果愿意信任新方法中的代码,可以跳到下个...
  • 关于贝塞尔曲线知识(请具体阅读)转载自:http://www.cnblogs.com/jay-dong/archive/2012/09/26/2704188.html这里直接讲解在U3D中的实现方式 ...(1)在上四构成的三个线段中,p0-p1上有到
  • 这里的pt1和pt2是一条直线的两个端点,这里已知下图中的rh0 和θ,现在只需要求图中“任意”两点, 使用OpenCV的cvLine函数画出pt1点到pt2的直线 。 看看下图 就明白这里1000什么的是为什么了。
  • canvas绘制任意两点的动态直线

    千次阅读 2017-01-15 11:30:09
    <title>Canvas绘制任意两点间的动态直线 <script src="../jquery-3.1.0.min.js"></script> <script src="./action.js"></script> 看看CSS文件 *{ margin:0; padding:0; box...
  • 在这章节,我们以其中曲线段为例,改变其对应的控制,看看曲线段形状的改变,同时也看看对应的回旋体图形的改变。 控制坐标如下图: “问题六十”中的“基本曲线”的控制对应如上ABCDEF六个
  • #include #include using namespace std;...class Point //定义坐标类 { public: //定义必要的构造函数 Point(double a=0,double b=0):x(a),y(b){} double xreturn(){return x;} double yreturn(){return y;}
  • MATLAB绘制B样条曲线

    万次阅读 多人点赞 2015-05-09 18:50:42
    1 B样曲线1.1 B样条曲线定义B样方法具有表示与设计自由型曲线曲面的强大功能,是形状数学描述的主流方法之,另外B样方法是目前工业产品几何定义国际标准——有理B样方法(NURBS)的基础。B样方法兼备了...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 92,600
精华内容 37,040
关键字:

两点确定一条直线的定义