Мы пытаемся создать редактор HTML, в котором мы манипулируем всеми элементами DOM, такими как текст и изображения.
Я застрял в сценарии, в котором я пытаюсь изменить размер текстового html-объекта. Этот текстовый объект HTML создается с использованием двух DIV, которые перекрывают друг друга и являются идентичными. Измерения обоих DIV также одинаковы. Элемент DIV-1 содержит текстовое значение, а элемент DIV-2 содержит схему с обработчиками, которые используются для поворота, изменения размера и масштабирования. Таким образом, DIV-2 содержит 4 обработчика на каждом углу.
Теперь, когда мы изменяем размер этого текстового объекта, перетаскивая правый нижний обработчик в DIV-2, он без проблем изменяет размеры, что означает, что верхний левый обработчик в DIV-2 становится фиксированным источником для масштабирования, т.е. позицией верхнего левый обработчик не меняется. Обратите внимание, что в этом случае мы не повернули текстовый объект.
НО, когда мы сначала поворачиваем текстовый объект, а затем пытаемся изменить его размер, текстовый объект изменяет размеры, но обработчик TOP-LEFT должен был оставаться фиксированным в одном месте, но этого не происходит, он смещается от своей первоначальной позиции при изменении размера текстовый объект.
Как мы можем решить эту проблему?
Я не могу использовать «transform-origin» из-за своей структуры.
Пожалуйста, ознакомьтесь с изображением для лучшего понимания
Структура нашего соответствующего кода:
<div class="block" style="position: absolute; pointer-events: auto; top: 196px; left: 217px; width: 291px; height: 53px; transform: rotate(21deg);">
<div class="child target target_bc4a06b52bb5a3d908ff158ae56f4cf ql-container ql-snow ds-selectable" id="id_target_bc4a06b52bb5a3d908ff158ae56f4cf" style="width: 120px; height: 22px; text-align: center; border: 1px solid rgb(204, 204, 204); transform-origin: 0px 0px; transform: scaleX(2.42651) scaleY(2.42651);" data-degree="21">
<div class="ql-editor select-all" data-gramm="false" contenteditable="false">
<p style="font-family: Arial;">Add a Heading</p>
</div>
<div class="ql-clipboard" contenteditable="true" tabindex="-1"></div>
<div class="ql-tooltip ql-hidden"><a class="ql-preview" target="_blank" href="about:blank"></a><input type="text" data-formula="e=mc^2" data-link="https://quilljs.com" data-video="Embed URL"><a class="ql-action"></a><a class="ql-remove"></a></div>
</div>
</div>
<div class="mapperwrapper" tabindex="0" pointer-events="none" style="left: 0px; top: 0px; transform-origin: 0px 0px 0px; transform: scale(1) translate3d(0px, 0px, 0px); position: absolute; pointer-events: none; width: 100%; height: 100%; overflow: visible;">
<div class="mapperParent" style="position: absolute; pointer-events: none; top: 196px; left: 217px; width: 289px; height: 53px; transform: rotate(21deg);">
<div class="_mapper" id="id_target_bc4a06b52bb5a3d908ff158ae56f4cf" style="width: 291px; height: 53px; text-align: center; border: 1px solid rgb(204, 204, 204); transform-origin: 0px 0px; opacity: 1; position: relative; top: 0px; left: 0px; user-select: none; pointer-events: none; visibility: visible;">
<div class="ddmrr-drag-drop resize-anchor" data-direction="e" style="position: absolute; pointer-events: auto; width: 10px; height: 20px; display: block; background-color: rgb(255, 255, 255); border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 8px; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 3px 0px; right: -7px; top: 50%; transform: translateY(-50%);"></div>
<div class="ddmrr-drag-drop resize-anchor" data-direction="w" style="position: absolute; pointer-events: auto; width: 10px; height: 20px; display: block; background-color: rgb(255, 255, 255); border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 8px; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 3px 0px; left: -7px; top: 50%; transform: translateY(-50%);"></div>
<div class="ddmrr-drag-drop resize-anchor" data-direction="ne" style="position: absolute; pointer-events: auto; width: 10px; height: 10px; display: block; background-color: rgb(255, 255, 255); border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 50%; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 3px 0px; top: -7px; right: -7px;"></div>
<div class="ddmrr-drag-drop resize-anchor" data-direction="se" style="position: absolute; pointer-events: auto; width: 10px; height: 10px; display: block; background-color: rgb(255, 255, 255); border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 50%; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 3px 0px; bottom: -7px; right: -7px;"></div>
<div class="ddmrr-drag-drop resize-anchor" data-direction="nw" style="position: absolute; pointer-events: auto; width: 10px; height: 10px; display: block; background-color: rgb(255, 255, 255); border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 50%; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 3px 0px; top: -7px; left: -7px;"></div>
<div class="ddmrr-drag-drop resize-anchor" data-direction="sw" style="position: absolute; pointer-events: auto; width: 10px; height: 10px; display: block; background-color: rgb(255, 255, 255); border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 50%; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 3px 0px; bottom: -7px; left: -7px;"></div>
<div class="ddmrr-drag-drop rotate-anchor" style="position: absolute; width: 21px; height: 21px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 21 21'%3E%3Cpath fill='currentColor' d='M15.25 18.48V15a.75.75 0 1 0-1.5 0v4c0 .97.78 1.75 1.75 1.75h4a.75.75 0 1 0 0-1.5h-2.6a8.75 8.75 0 0 0-2.07-15.53.75.75 0 1 0-.49 1.42 7.25 7.25 0 0 1 .91 13.34zM8.75 5.52V9a.75.75 0 0 0 1.5 0V5c0-.97-.78-1.75-1.75-1.75h-4a.75.75 0 0 0 0 1.5h2.6a8.75 8.75 0 0 0 2.18 15.57.75.75 0 0 0 .47-1.43 7.25 7.25 0 0 1-1-13.37z'/%3E%3C/svg%3E") 1px 1px no-repeat rgb(255, 255, 255); border-radius: 50%; display: block; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 3px 0px; top: 100%; right: 50%; transform: translateX(50%) translateY(10px); pointer-events: auto;">
<div id="deg" style="width:50px;top:-22px;position:absolute;text-align:center;pointer-events:none">21</div>
</div>
</div>
</div>
</div>
Пожалуйста, помогите!