V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
Cui
V2EX  ›  程序员

[请教前端技术问题] Web 端 JS 实现勾勒矢量图功能

  •  1
     
  •   Cui · 2017-08-13 11:54:21 +08:00 · 4058 次点击
    这是一个创建于 2657 天前的主题,其中的信息可能已经有所发展或是发生改变。

    现在项目中遇到一个需求

    可参考:

    https://www.indoorway.com/videos/map_editor.mp4

    https://www.indoorway.com/videos/dashboard_animation_v2.mp4

    流程为:

    1. 上传一张户型图( jpg、png 文件)
    2. 勾勒出户型图的每个房间,并定义房间名称
    3. 生成一个矢量的户型图
    4. 可通矢量的户型图交互,定义每个房间的信息
    5. 最后可通过矢量的户型图,查看房间统计信息、展示房间热力图

    请教前端大神,该如何实现这个功能,有没有类似的开源插件;

    或者可私信报价,完成这个插件:cuiqi#focusx.cn

    7 条回复    2017-08-13 16:51:15 +08:00
    zhlssg
        1
    zhlssg  
       2017-08-13 12:34:15 +08:00
    感觉用 canvas 做好一点
    jinwyp
        2
    jinwyp  
       2017-08-13 13:31:48 +08:00
    估计要 2-3 万,这东西肯定没有开源的,有也不可能好用。
    shui14
        3
    shui14  
       2017-08-13 13:36:24 +08:00
    难点在 23,45 现在已有流行的图表库,问题是从一张图片识别户型并格勒轮廓,这就是图像处理的问题了,应该换个思路吧,图像处理没那么轻松,服务端处理好,返回前端这个矢量图,前端做交互展示数据
    qiaobeier
        4
    qiaobeier  
       2017-08-13 16:09:16 +08:00
    搜索 image mark 有个插件前端和你需求一致,至于编辑功能,我记得 wp 有个收费插件和你的需求完全一致。这个插件开发成本主要在编辑功能,前端没啥花头,canvas 和 svg 方面有大把的插件可以用
    YangXiaoming
        5
    YangXiaoming  
       2017-08-13 16:46:39 +08:00
    类似的需求地图和 GIS 行业已经解决烂掉了,和你的唯一区别就是那边出来的结果是地图坐标,你不需要地图坐标。 http://leafletjs.com/ http://leafletjs.com/plugins.html#heatmaps http://leafletjs.com/plugins.html#edit-geometries
    YangXiaoming
        6
    YangXiaoming  
       2017-08-13 16:47:47 +08:00   ❤️ 1
    YangXiaoming
        7
    YangXiaoming  
       2017-08-13 16:51:15 +08:00
    自动识别这个功能还是算了吧,有多少人工就能产出多少人工智能。就酱紫。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5463 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 28ms · UTC 03:28 · PVG 11:28 · LAX 19:28 · JFK 22:28
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.