Question

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

如下图所示，

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

我添加了单击按钮功能，

//要绘制圆，

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

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

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>

绘制具有尺寸的几何形状并显示它

1 个答案: