V2EX = way to explore
V2EX 是一个关于分享和探索的地方
Sign Up Now
For Existing Member  Sign In
sunboy911
V2EX  ›  问与答

求思路:图片上要加个测量功能,可以任意图片上选取两点,然后测量这两点间的距离

  •  
  •   sunboy911 · Oct 31, 2017 · 5334 views
    This topic created in 3101 days ago, the information mentioned may be changed or developed.

    如题。有木有大神用 js 实现过类似的功能,拜托了。

    38 replies    2018-05-11 16:29:26 +08:00
    jlsk
        1
    jlsk  
       Oct 31, 2017
    没上过高中?
    sxm
        2
    sxm  
       Oct 31, 2017 via Android
    先判断 2 点是否为斜线,斜线的话那就套用公式计算直角三角形的斜边长度
    sunboy911
        3
    sunboy911  
    OP
       Oct 31, 2017
    不是问直线咋算,是代码具体咋实现的
    mooncakejs
        4
    mooncakejs  
       Oct 31, 2017
    最基础的勾股定理还要啥代码?
    CEBBCAT
        5
    CEBBCAT  
       Oct 31, 2017 via Android   ❤️ 1
    选两点的时候可以拿到坐标,把坐标做勾股运算就好了
    coderluan
        6
    coderluan  
       Oct 31, 2017
    首先用 getMousePos 之类的函数获取两点的坐标( ax,ay ),( bx,by )
    然后距离就等于 开方(( ax-bx )( ax-bx )+( ay-by )( ay-by ))

    @sxm #3 那公式也也适用斜线的,不用判断。

    PS:虽然我知道这个政治不正确,但是我还是忍不住怀疑楼主是不是培训班出身......
    jiangzhuo
        7
    jiangzhuo  
       Oct 31, 2017
    alert('出门左转得力文具淘宝旗舰店')
    holystrike
        8
    holystrike  
       Oct 31, 2017
    @jlsk 勾股定理是初中
    m939594960
        9
    m939594960  
       Oct 31, 2017
    楼主要的只是这么单纯的功能啊。。。我还以为是那种实景点两个点自动测距离呢
    xomix
        10
    xomix  
       Oct 31, 2017
    @coderluan 亮点斜线公式,还可以求斜率……话说我当年也突然想不起来过
    jlsk
        11
    jlsk  
       Oct 31, 2017
    @holystrike
    说勾股定理的都没上过高中!

    这是平面解析几何的内容,高二的那个小薄本
    平面上两点间的距离公式跟勾股定理有个屁关系!
    勾股定理只不过是特例中的特例
    连 TM 基本三角函数都不懂,就会个小学生现推理也能推出来的勾股定理
    给定直线 AB 的长度和倾斜角勾股定理能 tm 反推点坐标吗?
    给你极坐标的两点 P1P2 你用勾股定理给我算算距离?

    对于这个站的文化水平之低感到惊讶!
    kokdemo
        12
    kokdemo  
       Oct 31, 2017
    @jlsk 戾气也太大了,嘴能放干净点么
    jlsk
        13
    jlsk  
       Oct 31, 2017
    @kokdemo 放你妈了隔壁,傻逼
    你那只狗眼看到老子嘴不干净了?
    sunboy911
        14
    sunboy911  
    OP
       Oct 31, 2017
    @coderluan 话说 js 咋操作图片呀,在图片上选两个点 然后给其连上线,然后线上给其距离显示出来
    imn1
        15
    imn1  
       Oct 31, 2017
    @jlsk
    虽然确实是平面解析几何,也应该用它来解
    但并非知道两点坐标不能用勾股定理来解吧?
    liuminghao233
        16
    liuminghao233  
       Oct 31, 2017 via iPhone
    游标卡尺比较准
    sunboy911
        17
    sunboy911  
    OP
       Oct 31, 2017
    不知道这操作图片的 js 咋写呀 选点和连线
    jlsk
        18
    jlsk  
       Oct 31, 2017
    @imn1 如果是正交平面那是能解
    本来我也不想说啥,看到他强调初中我才多说两句

    但是就 lz 这个问题不一定坐标系是正交平面啊
    如果那图是用在一些特定场合的坐标系下呢?
    hxndg
        19
    hxndg  
       Oct 31, 2017
    @jlsk
    不太明白你在表达什么,虽然平面上两点距离公式不等于勾股定理,但是讲解的时候还是以勾股定理作为依托,
    当然确实得承认V站的部分程序员解析几何的东西不是很了解,至于极坐标系就是另外的问题了,当然我也记得不清楚了.

    PS  你下面的回复太脏了,兄弟.
    kokdemo
        20
    kokdemo  
       Oct 31, 2017
    cc @Livid

    @jlsk 这位已经开始人身攻击和辱骂了。
    takanasi
        21
    takanasi  
       Oct 31, 2017 via Android
    lz 内心是崩溃的,他只是想知道怎么做特效
    coderluan
        22
    coderluan  
       Oct 31, 2017
    @sunboy911 #15

    也就是说其实你是连 js 都不懂呗,你也不是求思路,是想要代码......
    这样可以不好...

    https://gist.github.com/LuanZhanKuangGe/e0714d39301eb884e2ac35c0f0af20ea
    coderluan
        23
    coderluan  
       Oct 31, 2017
    @jlsk #12 文化水平低总好过素质低。
    1oNflow
        24
    1oNflow  
       Oct 31, 2017 via iPhone
    我以为要通过图片估算三维空间中两个物体的距离……
    icyalala
        25
    icyalala  
       Oct 31, 2017
    楼主应该只是 JS 不行,想要求个 JS Demo 吧。。。

    @jlsk 14 楼回复很不干净。
    wxt
        26
    wxt  
       Oct 31, 2017 via Android
    google map api v3 离线版本,离线地图,把图片切成地图碎片,还能放大缩小,获取到坐标,计算距离。
    回复不要太脏!
    Livid
        27
    Livid  
    MOD
    PRO
       Oct 31, 2017   ❤️ 1
    @kokdemo 举报收到。这个账号已经彻底 ban。
    wangxiaoer
        28
    wangxiaoer  
       Oct 31, 2017
    找个轻量级的地图库比如 leafletjs 之类,直接加载图片,有测距功能。
    Mithril
        29
    Mithril  
       Oct 31, 2017
    简单的欧几里得距离上面的公式就能算。
    实际上勾股定理也能算
    但想要知道图像中物体的实际距离就不可能了,除非对图像内容进行限制。
    Shura
        30
    Shura  
       Oct 31, 2017 via Android
    我想到了昨天那个“高数”的帖子,这明显的是求两点间距离(欧几里德距离),关勾股定理什么事?
    YingJie
        31
    YingJie  
       Oct 31, 2017 via Android   ❤️ 1
    YingJie
        32
    YingJie  
       Oct 31, 2017 via Android
    @YingJie 没翻到下面就 @了,不好意思,撤回。
    sunboy911
        33
    sunboy911  
    OP
       Oct 31, 2017
    @coderluan 受教了
    sunboy911
        34
    sunboy911  
    OP
       Oct 31, 2017
    是的求代码哈哈
    magicO
        35
    magicO  
       Oct 31, 2017 via Android
    @Livid 好评,净化环境
    wjm2038
        36
    wjm2038  
       Oct 31, 2017 via Android
    @Shura 指的应该是 a*a+b*b=c*c,两个点坐标 x 差距和 y 差距就是 a 和 b,勾股定理也没错
    ctt
        37
    ctt  
       Nov 1, 2017 via iPhone
    勾股定理也没错,初中生就不会解这个距离差的求法了?没必要死板。
    wmm
        38
    wmm  
       May 11, 2018
    java 中
    坐标 1:(3,0)
    坐标 1:(0,4)
    float fLen = (float) Math.sqrt(Math.pow((3 - 0), 2) + Math.pow(0 - 4, 2));

    fLen = 5.0
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Solana   ·   5653 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 102ms · UTC 06:51 · PVG 14:51 · LAX 23:51 · JFK 02:51
    ♥ Do have faith in what you're doing.