Нарисуйте геометрические фигуры с размерами и отобразить его

Question

Я должен нарисовать геометрические фигуры с их размерами и показать их с этой формой.

Как на рисунках ниже,

1. Я хочу показать длину и ширину прямоугольника, радиус круга и площадь фигуры в центре.
2. Если пользователь выбирает и редактирует геометрические фигуры, размеры должны обновляться соответствующим образом.

Я добавил функцию нажатия кнопки

// Чтобы нарисовать круг,

                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')
                }
            });

// Рисование многоугольника FreeHand

                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')
                }
            });

Я прочитал приведенные ниже примеры, но не смог найти подходящий.

1. https://developers.arcgis.com/javascript/3/jssamples/graphics_add.html
2. https://developers.arcgis.com/javascript/3/jssamples/toolbar_draw.html
3. https://developers.arcgis.com/javascript/3/jssamples/widget_measurement.html
4. https://developers.arcgis.com/javascript/3/jssamples/util_reshape.html

Answer 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>