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

Question

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

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

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

我的小提琴

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

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

• 反应计划者
• 平面图 V4
• homeRoughEditor

之后，您想通过访问演示页面来查看它的功能：

• 反应规划器演示
• homeRoughEditor 演示

接下来，您将深入研究代码并尝试理解它是如何实现的。