h5 组合和解组

一。组合：就是指多个元素组合成一个元素，组合的元素称为父元素，被组合的元素则称为子元素。组合后：父元素进行拖动、旋转、缩放时，子元素也相对于父元素进行。

• 拖动时：实际就是改变父元素的位置，子元素相对于父元素是不变的。所以子元素相对于最原始的坐标轴为: 父元素的位置 + 子元素的位置。
• 旋转： 父元素旋转是绕父元素的中心点进行旋转的，子元素也是绕父元素的中心点进行旋转。则子元素的相对位置计算方式是：通过获取子元素的中心点，然后利用绕点旋转公式计算出子元素中心点绕父元素中心点旋转后得出的新的子元素中心点。然后就可以得出旋转后子元素的定位点。之后用定位点加上父元素的定位点就是子元素相对于原始坐标轴的值。绕点旋转公式：deg 旋转角度、point 旋转的点(X, Y)、center 旋转的中心点(Xr, Yr)

  

  newX = center.x + (point.x - center.x) * Math.cos(deg) - (point.y - center.y) * Math.sin(deg)
  newY = center.y + (point.x - center.x) * Math.sin(deg) + (point.y - center.y) * Math.cos(deg)
  

        相对于原始坐标点的值(child代表旋转的子元素，parent 代表父元素)：

1. left = newX - child.width / 2 + parent.left
2. top = newY - child.height / 2 + parent.top
3. rotate = parent.rotate + child.rotate.

• 缩放：对于组合，缩放都是等比缩放的（scale）。首先我们就个计算父元素width变换就可以得出一个比例scale值，然后让子元素的width、height、left、top、fontSize 都乘以scale就得出里面的子元素的缩放大小。

二。解组：就是把一个元素里面的子元素全部拿出来，然后拿出来的子元素就变成啦，单独的元素。

• 拖动：在解组的时候，所有的子元素的坐标都必须相对于原始坐标而言。所以现在子元素的值就是：父元素的位置 + 子元素的位置。

  left = parent.left + child.left
  top = parent.top + child.top

• 旋转: 见组合上面的描述，就是解组时候的操作。
• 缩放：由于在组合的时候缩放操作的时候子元素也跟着改变，所以解组时子元素不需要操作。

三: 说明：元素在旋转的时候，该元素的width、height、left、right 始终保持不变。

虽然dom元素在页面的大小是改变的，但是我们计算的时候，始终不要考虑这个。