Laya 中缩放的实现

Laya 缩放功能的实现

在 laya 中实现滚轮对选中对象的缩放，涉及到以下两个模块:

• 事件
• 容器坐标

1. 事件

在 Laya 中， Event 是事件类型的集合。包含了常见的鼠标事件、键盘事件。

• 1.1 事件的触发
  
    触发一个事件，需要设置一个事件接收区域.
  
  如若未明确指定事件，事件触发默认是冒泡模式。从子节点开始依次向父节点查询，直到找到绑定了指定事件的容器后结束。
  
  在对容器进行绑定时有下面两种方式:

方法一：根据事件对象获取(不推荐使用)
mySprit.on(Laya.Event.MouseDOwn, this, this.Scale);
public Scale(e: Event)
{
    // 此种形式获取 sp, 并未明确指定绑定事件的 sp，触发事件时，需冒泡查找, 不推荐使用
    let sp = e.target as Laya.Sprite;
}

方法二： 直接传入目标容器
mySprit.on(Laya.Event.MouseDOwn, this, this.Scale, [targetSp]);
public Scale(sp,  e: Event)
{
    // 直接用传入的 sp 进行绑定
}

• 1.2 事件的绑定与解绑
  
    只有在需要时候事件时，才绑定事件方法。用完后，需要解除绑定。这样可以避免同一个对象多次绑定的问题，
  
  在 laya 中,事件管理器是允许同一个对象的同一个方法事件进行多次绑定的，这样容易造成许多意向不到的 bug, 所以务必
  
  只在使用时进行绑定，用完立马解除绑定。注意，如鼠标移动事件、MouseUp 事件一般使用 Stage 来触发。
  
  如下例：

// 下面的代码为按下鼠标左键，允许拖动目标容器，松开鼠标左键后，无法拖动目标容器
this.firstSp = new Laya.Sprite();
this.firstSp.graphics.drawRect(0, 0, 100, 100, null, "#ffffff");   // 绘制图形
this.firstSp.on(Laya.Event.MOUSE_DOWN, this, this.MouseDown, [this.firstSp]); // 绑定 mouse_down 事件
this.firstSp.hitArea = this.firstSp.getGraphicBounds();       // 指定可触发事件区域
this._rootSp.addChild(this.firstSp);
Laya.stage.addChild(this._rootSp);

// 在 mouse_down 事件后才绑定事件
private MouseDown(sp:Laya.Sprite, e:Laya.Event)
{
    Laya.stage.on(Laya.Event.MOUSE_MOVE, this, this.MouseMove, [sp])
    Laya.stage.on(Laya.Event.MOUSE_UP, this, this.MouseUp, [sp])
}

private MouseMove(sp:Laya.Sprite, e:Laya.Event)
{
    sp.x += 5;
}

// 在 mouseup 事件后解除除了触发事件外的其他一切事件
private MouseUp(sp:Laya.Sprite, e:Laya.Event)
{
    Laya.stage.off(Laya.Event.MOUSE_MOVE, this, this.MouseMove)
    Laya.stage.off(Laya.Event.MOUSE_UP, this, this.MouseUp)
}

• 1.3 可点击区域的设置
  
    容器要触发交互事件，必须设置可点击区域

// 将绘图区域设置为 点击区域
this.firstSp.hitArea = this.firstSp.getGraphicBounds();       // 指定可触发事件区域
// 用数值设定点击区域
this.firstSp.hitArea = new Laya.Rectangle(0, 0, 10000, 10000)

容器坐标

laya 2d 坐标系坐标单位为像素, Stage 左上角为左边原点 (0,0)。向右为 x 轴正向，向下为 Y 轴正向。所有容器创建时坐标原点默认为 (0,0), 此处需要注意:

所有容器的原点坐标都是相对于其父容器原点的坐标，是局部坐标，而非全局坐标。

因此，对象在容器中的坐标为局部坐标，转换为全局需要逐层向父容器变换，知道跟容器 Stage 为止。 同时要注意：

在移动、缩放对象时不要改变对象坐标，改变容器坐标，实现对象的改变。

// 对容器对象进行缩放
///-------------- Scale Drawing Sprite --------------------------
public static MouseWheel(currentSp: Laya.Sprite, e: Laya.Event) {
    let spriteX = 0, spriteY = 0;
    if(currentSp.parent)   // 考虑了父容器的偏差， TODO: 父容器与 stage 有偏差
    {
        spriteX = (currentSp.parent as Laya.Sprite).x
        spriteY = (currentSp.parent as Laya.Sprite).y;
    }
    this.Zoom(currentSp, e.stageX - spriteX, e.stageY - spriteY, e.delta);
}
private static Zoom(sp: Laya.Sprite, x: number, y: number, delta: number) {
    let oldScale = sp.scaleX;
    let scale = delta > 0 ? WebCad.GlobalScaleRatio : 1 / WebCad.GlobalScaleRatio;
    let newScale = sp.scaleX * scale;
    // 设置最大最小缩放范围
    newScale = newScale < 0.1 ? 0.1 : (newScale > 50 ? 50 : newScale);
    // 获取在缩放比例下，光标相对偏移位置
    sp.x = sp.x - (x - sp.x) * (newScale - oldScale) / oldScale;
    sp.y = sp.y - (y - sp.y) * (newScale - oldScale) / oldScale;
    sp.scale(newScale, newScale);
}

---

当有多个操作的时候，比如需要对象同时涉及到缩放，平移以及旋转时候，我们应当遵循下面这个原则：

先处理缩放，再旋转，然后平移。

这里涉及到一个矩阵组合运算的原则：

**矩阵的组合

矩阵的乘法运算不遵守交换律，这意味着它们的顺序很重要。当矩阵相乘时，在最右边的矩阵是第一个与向量相乘的，所以我们应当从右向左来读这个乘法。所以在组合时，先缩放操作，然后旋转，最后才是位移，否则它们会互相影响。比如，你先位移再缩放，位移的向量也会同样缩放。