Увеличивать содержание позади div, который можно перетаскивать

Question

Мне нужно знать, как я могу увеличить содержимое позади div, которое представляет собой оранжевую рамку, и эта рамка перетаскивается. Куда бы ни перетащили коробку, содержимое позади нее должно быть увеличено. Как это может быть сделано? Я пробовал несколько вещей, и я мог только увеличивать изображения, но не тексты и другие элементы на странице. Даже пробовал свойство масштаба css, но оно масштабирует только рамку, а не содержимое позади нее.

 .my-left-bar {
            left: 10px;
            position: absolute;
            background:#faa21b;
            height: 100%;
            
        }

        .my-top-bar {
            top: 10px;
            width: 100%;
            position: absolute;
            background:#faa21b;
           
        }

        .my-right-bar {
            right: 10px;
            height: 100%;
            position: absolute;
            background: #faa21b;
          
        }

        .my-bottom-bar {
            bottom: 10px;
            width: 100%;
            position: absolute;
            background: #faa21b;
           
        }

        #zoom-outer-layer {
            top: 0px;
            left: 0px;
            border: 12px solid #faa21b;
            width: 170px;
            height: 170px;
            text-align: center;
            cursor: move;
            position: absolute;

        }
        
     
        #zoom-inner-layer {
            position: relative;
           border: 1px solid gray;
           
            height: 170px;
            width: 170px;
        }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js">
    $(function () {
            $("#zoom-outer-layer").draggable();
        });

</script>
<h1>What is Lorem Ipsum?</h1>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
                standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make
                a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting,
                remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing
                Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions
                of Lorem Ipsum.</p>
              
            <div id="zoom-outer-layer" >
                <div class="my-left-bar"></div>
                <div class="my-right-bar"></div>
                <div class="my-top-bar"></div>
                <div class="my-bottom-bar"></div>
                <div id="zoom-inner-layer">
        
                </div>
            </div>

Answer 1

Вам нужно было бы использовать, чтобы вычислить размер шрифта, высоту строки и разрывы строк, чтобы определить, какой текст находится ниже. Я полагаю, что это выполнимо с JavaScript, если кто-нибудь может помочь с алгоритмом. Затем в поле вы должны отобразить тот же текст под полем, но более крупным шрифтом.

Еще один вариант, который может вам пригодиться, - это отрисовка текста в элементе canvas и использование на нем «лупы». собрал краткий пример с использованием подхода canvas.

const wrapText = (context, text, x, y, width, lineHeight) => {
  var words = text.trim().split(' ');
  var line = '';

  for (let word of words) {
    if (context.measureText(line + word + ' ').width > width) {
      context.fillText(line, x, y);
      line = word + ' ';
      y += lineHeight;
    } else {
      line = line + word + ' ';
    }
  }
  context.fillText(line, x, y);
}

const log = msg => {
  document.querySelector('div').innerHTML = `${msg}<br>`
};
(() => {
  const main = document.querySelectorAll("canvas")[0];
  const zoom = document.querySelectorAll("canvas")[1];
  const ctx = main.getContext("2d")
  const zoomCtx = zoom.getContext("2d");

  ctx.font = "20px Arial";
  wrapText(ctx, document.querySelector('p').textContent, 20, 20, main.width, 24);
  document.addEventListener("mousemove", e => {
    zoomCtx.fillStyle = "white";
    zoomCtx.fillRect(0, 0, zoom.width, zoom.height);
    const x = e.x - main.offsetLeft;
    const y = e.y - main.offsetTop;
    log(`X: ${x}, Y: ${y}`);
    zoomCtx.drawImage(main, x - zoom.width / 3, y - zoom.height / 3, zoom.width / 2, zoom.height / 2, 0, 0, zoom.width, zoom.height);
    zoom.style.top = e.pageY - (zoom.height / 2) + "px"
    zoom.style.left = e.pageX - (zoom.width / 2) + "px"
  });
})();

<p style="display: none">
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
  survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
  software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<canvas width="500" height="300" style="margin-left: 150px;"></canvas>
<canvas width="150" height="100" style="position:absolute; top:0; left:0; border: 1px solid black"></canvas>

<div style="margin-top: 20px; overflow: scroll; height: 100px; border: 1px solid black;">

</div>