Javascript-форум - Страница с динамическим измерением размеров

Javascript-форум (https://javascript.ru/forum/)

- Оффтопик (https://javascript.ru/forum/offtopic/)

- - Страница с динамическим измерением размеров (https://javascript.ru/forum/offtopic/65345-stranica-s-dinamicheskim-izmereniem-razmerov.html)

Страница с динамическим измерением размеров

Добрый день.

Я нуб в javascript, но по работе надо сделать... поэтому прошу подсказать. (если ошибся разделом, сори)

Есть задача, графически отобразить процесс нарезки изделия (прямоугольной формы).

Хочется хтмл, чтобы на нем отобразить, условно, изделие (размеры) и "ползунками" отметить линии реза, получив при этом размеры выходных изделий. "Ползунки" сделать динамическими, чтобы можно было двигать и при этом менялись размеры.

Подскажите, пожалуйста, куда капнуть для реализации данной задачи?
Благодарю.

iorvgoqa, картинку покажи (до/в процессе/после)

Необходимо только установить линии, по которым будет выполнен рез и рассчитать размеры

может ExtJS поможет http://examples.sencha.com/extjs/6.0...#layout-border

убрать заголовки и отображать размеры областей при изменении - это легко

раскрой материала, динамическое изменение размеров

iorvgoqa, ~~в ie требуется правка~~. исправлено

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .rez {
     width: 400px;
     height: 300px;
     border: 2px groove #000000;
      position: relative;
      padding: 0;
  }
  .rez span {
    margin: 0;
    position: absolute;
    left 0;
    top: 0;
    background-color: #000000;
  }

  .rez span.v {
    left: 200px;
    width: 1px; height: 300px;
  }
  .rez:before{
     position:  absolute;
     top: 15px;
     left: 20px;
     content: attr(data-a);
  }

   .rez:after{
     position:  absolute;
     top: 15px;
      right: 20px;
     content: attr(data-b);
  }

  .rez span.g {
    width: 200px; height:1px;
    left: 200px; top : 150px;
  }
  .rez span.g:after{
     position:  absolute;
     display: block;
     top: 15px;
     right: 20px;
     content: attr(data-c);
     z-index: 100;
  }

  </style>

  <script>
window.addEventListener('DOMContentLoaded', function() {
  var rez = document.querySelector('.rez'),
      span = document.querySelectorAll('.rez span'),
      range = document.querySelectorAll('input.v,input.g');
      arr = [];
      [].forEach.call(range, function(item, i) {
              arr[i]= +item.value;
              var foo = function() {
              arr[i]= +item.value;
              span[0].style.left = arr[0]+"px";
              span[1].style.left = arr[0]+"px";
              span[1].style.width = (400 - arr[0])+"px";
              span[1].style.top = arr[1]+"px";
              rez.setAttribute("data-a", arr[0] ? arr[0] + " x 300" : "");
              rez.setAttribute("data-b", arr[0] != 400 && arr[1] ? (400 - arr[0]) + " x " + arr[1] : "");
              span[1].setAttribute("data-c", arr[0] != 400 && arr[1] != 300 ?(400 - arr[0]) + " x " + (300 - arr[1]) : "");
              }
              item.addEventListener('change', foo);
              item.addEventListener('input', foo);
      });

    });
  </script>
</head>

<body>

<div class="rez" data-a="200 x 300" data-b="200 x 150" ><span class="v"></span><span class="g" data-c="200 x 150"></span></div>
<input type="range" min="0" max="400" step="10" value="200" class="v">
<input type="range" min="0" max="300" step="10" value="150" class="g">
</body>
</html>

Цитата:

Сообщение от Pavel M. (Сообщение 431690)

Спасибо.

Цитата:

Сообщение от рони (Сообщение 431693)

iorvgoqa, в ie требуется правка.

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .rez {
     width: 400px;
     height: 300px;
 ...

Большое спасибо) не хочу показаться наглым, но какие правки для ие необходимы?

iorvgoqa,
смотрите выше вариант с учётом ie

Цитата:

Сообщение от рони (Сообщение 431701)

iorvgoqa,
смотрите выше вариант с учётом ie

Все огонь!!! Благодарю!