javascript - 可调整大小的二维平面图，拖动图像上的标尺

Question

我正在寻找具有以下功能的交互式二维平面图

这意味着用户可以同时拖动楼层 map 并调整其大小。我找到的唯一相对链接是

编辑:到目前为止，我已经能够创建基于 svg 的图表并应用 anchor 拖动图像

我的 fiddle

https://jsfiddle.net/sbh24vuq/

 $(function() {

          addBackdrop(50);

          var $window = $(window);
          var radius = 40, editColor = 'rgb(79, 128, 255)';
          var type = /(canvas|webgl)/.test(url.type) ? url.type : 'svg';
          var two = new Two({
              type: Two.Types[type],
              fullscreen: true,
              autostart: true
            }).appendTo(document.body);


         ....
complete code is on fiddle 
        }

但我想在拖动时添加标尺。

Answer 1

从探索现有的开源平面图项目开始:

• https://github.com/topics/floorplan?l=javascript
• https://github.com/topics/floorplans?l=javascript

以下是快速搜索显示的内容:

• react-planner
• Floor Plan V4
• homeRoughEditor

之后，您想通过转到演示页面来查看其功能:

• react-planner demo
• homeRoughEditor demo

接下来，您将深入研究代码并尝试了解其实现方式。