使用{n}嵌套变换

问题描述

我有一个带有未知嵌套元素的容器，我想使用js +转换翻译来移动选定的子目标。我的问题是父元素可以缩放，因此所选对象的移动速度取决于缩放比例。而且旋转也使它难以沿鼠标移动的方向移动。

我应该如何解决这个问题？我的假设是我需要遍历DOM树并合并所有矩阵，然后加上，减去值以找出需要移动多少东西。最终，我还需要修复轮换支持，但稍后再讨论，也许还会有另一个问题。

但是现在我遇到了一个错误：

Error: Out of skills
   at <brain>:1:∞

const target = document.querySelector('.target')
let init = null // Stores drag start event

target.onmousedown = evt => {
  evt.preventDefault()
  init = evt
}

// clear init event
onmouseup = () => init = null

// move the target around
onmousemove = evt => {
  if (init) {
    const x = evt.clientX - init.clientX
    const y = evt.clientY - init.clientY
    target.style.transform = `translate(${x}px,${y}px)`
  }
}

.nested {
    position: absolute;
    border: 4px solid #ccc;
    width: 100px;
    height: 100px;
    top: 50px;
    left: 70px;
    /* Box-sizing: border-Box; */
}

.nested.rotate {
    transform-origin: 0 0;
    transform: rotate(-30deg);
}

.nested.scale {
    transform: scale(1.5,1.5);
}

.nested .target {
    top: 50px;
    left: 50px
}
html,body {
    position: relative;
    height: 100%;
    margin: 0;
    padding: 0;
}
.description {
    padding: 10px;
}
.target {
    position: absolute;
    width: 100px;
    height: 100px;
    top: 150px;
    left: 100px;
    line-height: 100px;
    text-align: center;
    background: #ee8;
    color: #333;
    font-weight: bold;
    border: 1px solid #333;
    Box-sizing: border-Box;
    transform: translate(18px,-70px);
}

<div class="container">
    <div class="nested first">
        No Transform
        <div class="nested scale">
            scale(1.2,1.2)
            <div class="nested rotate">
                rotate(30deg)
                <div class="target">Target</div>
            </div>
        </div>
    </div>
</div>

错误问题：：如果将元素（x，y）拖动到先前已旋转的父级中，则onMove回调中的this.x和this.y值分别表示水平和垂直方向，而忽略了父级旋转的事实。 结果是，例如，如果将父级旋转90度，则在水平拖动子级时，子级会垂直移动，反之亦然。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）