JavaScript 拖拉缩放效果

核心提示： 在拖拉时，就可以根据这个参照值计算拖拉后要设置的样式参数_styleWidth：this._styleWidth = Math.max(e.clientX - this._sideLeft, 0);上面的程序能保证样式是大于等于0的数，JavaScript 拖拉缩放效果(2)，至于左边就麻

在拖拉时，就可以根据这个参照值计算拖拉后要设置的样式参数_styleWidth：

this._styleWidth = Math.max(e.clientX - this._sideLeft, 0);

上面的程序能保证样式是大于等于0的数。

至于左边就麻烦一点，因为左边拖拉是以右边为固定点，这就必须在设置宽度的同时设置left才能，保证右边固定。

首先记录右边定位参数_sideRight：

this._sideRight = e.clientX + this._styleWidth;

还有left的定位参数_fixLeft：

this._fixLeft = this._styleWidth + this._styleLeft;

在拖拉时，计算_styleWidth：

this._styleWidth = Math.max(this._sideRight - e.clientX, 0);

在根据_styleWidth设置_styleLeft：

this._styleLeft = this._fixLeft - this._styleWidth;

上下同理，至于斜角的四个方向只是同时执行两个方向，例如右下就是同时执行右边和下边：

this.Right(e); this.Down(e);

【程序结构】

在更详细的程序说明之前，先了解一下程序结构。

当点击触发点，就会根据设置给缩放程序_fun设置为八个方向的缩放程序的其中一个。

八个缩放程序分别是：Up（上）、Down（下）、Right（右）、Left（左）、RightDown（右下）、RightUp（右上）、LeftDown（左下）和LeftUp（左上）。

在这些缩放程序，首先会进行宽和高的设置，由于宽和高的设置还需要经过范围限制和比例缩放的修正，而这些会在修正程序中处理。

修正程序包括几个部分：

RepairX：水平方向修正（左右方向）；

RepairY：垂直方向修正（上下方向）；

RepairAngle：对角方向修正（右下、右上、左下、左上）；

RepairTop：top修正（用于以右边为固定点定位）；