前言

在前端可视化可视化领域，对组件的伸缩、拖动、旋转操作是常有的功能

本文将以一个 div 作为组件讲述如何实现这些功能

定义

组件采用div的方式，主要原因是开发快，方便定制，canvas或svg较难上手

而其他的控制按钮采用的是 canvas

大致结构如下：

控件的数据结构为

{
  left,
  top,
  width,
  height
}

拖拽

为何先讲拖拽，因为这个操作是独立的，不需要考虑其他两个操作

旋转

伸缩后面再讲，是因为计算坐标差的时候会受到旋转的影响

对组件设置transform:rotate(30deg)后，将按组件中点顺时针旋转30°

注意，不是按左上角坐标点旋转。

那么这个旋转角度要怎么计算呢？

伸缩

已知当前旋转角度为 deg，对应的弧度为 rad = deg * Math.PI/180, 对八个位置的伸缩处理如下

1. left位置，偏移量为 x (往左伸缩则x值<0,否则值>0))

width 的值为 width -= x';其中 x' = x * Math.cos(rad)
同时由于中心点也要变更,
left 的值为 left += x' * Math.cos(rad)
top 的值为 top += x' * Math.sin(rad)

1. 组件上下边中部的拉伸按钮，在垂直方向上移动的距离差为 y,

则实际组件需要被拉伸的宽度应该为 y'=y/(Math.cos(rad)) 同时由于中心点也要变更，left变更量为y'*Math.cos(rad)，top变更量为y'*Math.sin(rad)

1. 组件左右边中部的拉伸按钮，在水平方向上移动的距离差为 x,

则实际组件需要被拉伸的长度应该为 x'=x*(Math.cos(rad)

3. 组件四周的拉伸按钮，在水平方向上移动的距离差为 x,在垂直方向上移动的距离差为 y,

则实际组件需要被拉伸的宽度应该为 y'=y/(Math.cos(rad),长度应该为 x'=(y * Math.tan(rad)+x)*Math.cos(rad)