Question

我们正在尝试构建一个HTML编辑器，在该编辑器中我们可以处理所有DOM元素，例如文本和图像。

我被困在试图调整文本html对象大小的情况下。使用两个相互重叠且相同的DIV创建此文本HTML对象。两个DIV的测量值也完全相同。 DIV-1元素包含文本值，DIV-2元素包含轮廓以及带有用于旋转，调整大小和缩放的处理程序的轮廓。因此，DIV-2在每个角落都包含4个处理程序。

现在，当我们通过拖动DIV-2中的右下处理程序来调整此文本对象的大小时，它的大小调整没有任何问题，这意味着DIV-2中的左上处理程序成为了缩放的固定原点，即顶部位置左处理程序不变。请注意，在这种情况下，我们没有旋转文本对象。

但是，当我们首先旋转文本对象然后尝试调整其大小时，该文本对象将重新调整大小，但是TOP-LEFT处理程序应保持固定在一个位置，但是这不会发生，因为它在调整大小时会偏离其原始位置文本对象。

我们如何解决此问题？

由于我的结构，我不能使用“ transform-origin”。

Kindly refer the image for better understanding

我们相关代码的结构：

<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(&quot;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&quot;) 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>

请帮助！

缩放时如何保持旋转DIV的固定角

0 个答案: