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

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

  •  1
     
  •   Cui · 11 天前 · 683 次点击

    现在项目中遇到一个需求

    可参考:

    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
        1
    zhlssg   11 天前
    感觉用 canvas 做好一点
        2
    jinwyp   11 天前
    估计要 2-3 万,这东西肯定没有开源的,有也不可能好用。
        3
    shui14   11 天前
    难点在 23,45 现在已有流行的图表库,问题是从一张图片识别户型并格勒轮廓,这就是图像处理的问题了,应该换个思路吧,图像处理没那么轻松,服务端处理好,返回前端这个矢量图,前端做交互展示数据
        4
    qiaobeier   11 天前
    搜索 image mark 有个插件前端和你需求一致,至于编辑功能,我记得 wp 有个收费插件和你的需求完全一致。这个插件开发成本主要在编辑功能,前端没啥花头,canvas 和 svg 方面有大把的插件可以用
        5
    YangXiaoming   11 天前
    类似的需求地图和 GIS 行业已经解决烂掉了,和你的唯一区别就是那边出来的结果是地图坐标,你不需要地图坐标。 http://leafletjs.com/ http://leafletjs.com/plugins.html#heatmaps http://leafletjs.com/plugins.html#edit-geometries
        6
    YangXiaoming   11 天前   ♥ 1
        7
    YangXiaoming   11 天前
    自动识别这个功能还是算了吧,有多少人工就能产出多少人工智能。就酱紫。
    DigitalOcean
    关于   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   鸣谢   ·   1947 人在线   最高记录 3541   ·  
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.7.5 · 47ms · UTC 10:36 · PVG 18:36 · LAX 03:36 · JFK 06:36
    ♥ Do have faith in what you're doing.
    沪ICP备16043287号-1