• 请不要在回答技术问题时复制粘贴 AI 生成的内容
Cui
V2EX  ›  程序员

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

  •  1
     
  •   Cui · Aug 13, 2017 · 4904 views
    This topic created in 3221 days ago, the information mentioned may be changed or developed.

    现在项目中遇到一个需求

    可参考:

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