绘制带有尺寸的几何形状并显示出来答案

【问题标题】：Draw geometrical shapes with dimensions and display it绘制带有尺寸的几何形状并显示出来
【发布时间】：2018-09-12 06:02:10
【问题描述】：

我必须绘制几何形状及其尺寸并以该形状显示。

如下图所示，

我想显示矩形的长度和宽度、圆的半径和中心形状的面积。
如果用户选择并编辑几何形状，则尺寸应相应更新。

我已经添加了点击按钮功能，

//画圆，

                dojo.connect(dojo.byId('gr_circle_polygon'), 'onclick', function (startIndex, endIndex) {
                isClicked = true;
                if (($("#gr_fh_polygon").hasClass('active')) || ($("#gr_rect_polygon").hasClass('active')) || ($("#gr_circle_polygon").hasClass('active'))) {
                    clearDrawingTools();
                } else {
                    dojo.connect(toolbar, "onDrawEnd", findPointsInExtent);
                    toolbar.activate(Draw['CIRCLE']);
                    $("#gr_circle_polygon").addClass('active')
                }
            });

//绘制矩形，

                dojo.connect(dojo.byId('gr_rect_polygon'), 'onclick', function (startIndex, endIndex) {
                isClicked = true;
                if (($("#gr_fh_polygon").hasClass('active')) || ($("#gr_rect_polygon").hasClass('active')) || ($("#gr_circle_polygon").hasClass('active'))) {
                    clearDrawingTools();
                } else {
                    dojo.connect(toolbar, "onDrawEnd", findPointsInExtent);
                    toolbar.activate(Draw['RECTANGLE']);
                    $("#gr_rect_polygon").addClass('active')
                }
            });

//绘制手绘多边形

                dojo.connect(dojo.byId('gr_fh_polygon'), 'onclick', function (startIndex, endIndex) {
                isClicked = true;
                if (($("#gr_fh_polygon").hasClass('active')) || ($("#gr_rect_polygon").hasClass('active')) || ($("#gr_circle_polygon").hasClass('active'))) {
                    clearDrawingTools();
                } else {
                    dojo.connect(toolbar, "onDrawEnd", findPointsInExtent);
                    //    dojo.connect(toolbar, "onclick", showAllActions);
                    toolbar.activate(Draw['FREEHAND_POLYGON']);
                    $("#gr_fh_polygon").addClass('active')
                }
            });

我已阅读以下示例，但找不到合适的示例。

【问题讨论】：

标签： javascript jquery arcgis-js-api

【解决方案1】：

嘿，看看这个：

const update = (elem) => {
  const target = $($(elem).parent()[0]);
  const h = target.children('.h').val();
  const w = target.children('.w').val();
  const r = target.children('.r').val();
  const text = target.children('.text');
  if (r) {
    const d = r * 2;
    target.css({
      width: d,
      height: d,
    });
    text.text(`Area: ${3.1416 * r * r}, Radius: ${r}`)
  }
  if (h && w) {
    target.css({
      width: w,
      height: h,
    });
    text.text(`Area: ${w * h}, Width: ${w}, Height: ${h}`)
  }
};

.flex{
  min-width: 100vw;
  display: flex;
  justify-content: space-around;
}
.rect, .circ{
  width: 200px;
  height: 200px;
  background-color: #eee;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.circ{ border-radius: 50%; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='flex'>
  <div class='rect'>
    <p class='text'></p>
    <input class='h' type='number' placeholder='height'/>
    <input class='w' type='number' placeholder='width'/>
    <input class='s' type='submit' value='submit' onclick='update(this)'>
  </div>
  <div class='circ'>
    <p class='text'></p>
    <input class='r' type='number' placeholder='radius'/>
    <input class='s' type='submit' value='submit' onclick='update(this)'>
  </div>
</div>

【讨论】：

我正在寻找 ArcGIS JS API。
我想在用户绘制时显示尺寸。