EaseJs中regX/regY的设置

前情提要

动效开发中最常用的基本动效就是缩放、旋转等效果；需要设置旋转中心，缩放中心等。这个时候我们就会用到regX/regY。

我们先在页面中画一个100x100的矩形，并放置在canvas中间，代码如下：

/* global createjs */
import React, { useRef, useEffect } from 'react'
import './easeljs-1.0.2'
import { Power0, TweenMax as Tween } from 'gsap'
function MotionDemo() {
  const canvasRef = useRef(null)
  Tween.ticker.fps(24)
  useEffect(() => {
    canvasRef.current.width = 400
    canvasRef.current.height = 400
    let stage
    window.stage = stage = new createjs.Stage(canvasRef.current)
    const graphics = new createjs.Graphics()
      .beginFill('#0ff')
      .drawRect(0, 0, 100, 100)
    const shape = new createjs.Shape(graphics)
    window.stage.addChild(shape)
    //将矩形放置在canvas中间
    shape.x = 150
    shape.y = 150
    shape.alpha = 0.3

    createjs.Ticker.on('tick', e => {
      stage.update()
    })
  }, [])

  return (
    <div style={{ position: 'relative', width: '100%', height: '100%' }}>
      <div style={{ position: 'absolute', left: '40%', top: '20%' }}>
        <canvas ref={canvasRef} width={200} height={200} />
      </div>
    </div>
  )
}

export default MotionDemo

效果如下：

^_^ 继续说回regX/regY

什么是regX/regY

官方文档解释：

regX：The left offset for this display object's registration point.即该显示对象注册点的左偏移量。

regY: The y offset for this display object's registration point.即该显示对象注册点的上偏移量。

需要明确的是：regX/regY为正时，对象往左上偏移；regX/regY为负，则向右下偏移。

设置regX/regY绕图形中心旋转

官方说明：

For example, to make a 100x100px Bitmap rotate around its center, you would set regX and regY to 50.将一个100x100的矩形，旋转中心设为重点，则需要将regX/regY设为50.

现在我们让中间的矩形动起来,向useEffect 底部添加如下代码

    Tween.to(shape, 2, {
      rotation: 360,
      repeat: -1,
      ease: Power0.easeNone,
    })

效果如下（阴影的出现是由于生成gif压缩导致，可以忽略：

很显然我们能发现，该对象的注册点即旋转中心为左顶点。现在我们按官方说明，设置regX/regY，显示对象宽度/高度的一半（100 / 2 = 50）, 为了对比，我们新增一个同位置的矩形，

    const createShape = () => {
     const graphics = new createjs.Graphics()
       .beginFill('#0f0')
       .drawRect(0, 0, 100, 100)
     const shape = new createjs.Shape(graphics)
     shape.x = 150
     shape.y = 150
     shape.regX = 50
     shape.regY = 50
     window.stage.addChild(shape)
     Tween.to(shape, 2, {
       rotation: 360,
       repeat: -1,
       ease: Power0.easeNone,
     })
   }

效果如下：

淡蓝色的为该矩形原本的位置，设置regX/regY后，图形确实是绕中心旋转，但该点却依然是显示对象的左顶点。只是该矩形位置发生了偏移。说明 regX/regY的改变，并不会改变注册点的偏移。只是改变了显示对象的位置。所以现在我们需要设置显示对象的位置,从而将该图形位置还原并围绕中心旋转

    //将createShape中shape的位置往右下调整shape宽度的一半
      shape.x += 50
      shape.y += 50

效果如下：（这才是我们需要的效果呀～

设置你想要的旋转中心

现在我们清楚了，regX/regY并不会改变显示对象的注册点，只是会使该对象位置发生偏移。那我们可以很简单的利用这一特性和显示对象的x,y属性联合使用达到我们的目的。

举个例子：现在我们想让矩形绕其右上顶点旋转

利用x,y将偏移后的对象移回到最初的位置。
利用regX/regY 产生偏移，使偏移后的对象的右顶点与原注册点（即左顶点）重合代码如下：

    //第一步实现，设置x,y将显示对象已到画布的左顶点，
      此时注册点则在显示对象的左顶点了
    shape.x += 100
    shape.y = 0
    
    // 第二步实现，设置regX/regY将显示对象偏移到原来的位置，
    shape.regX = 100
    shape.regY = 0

效果如下：

依靠上面拆分的办法，我们就可以将旋转中心设置为该显示对象上的任意一点啦。

不知道大家会不会因此迷糊如果旋转中心不在显示对象上该如何处理，下面也做一下说明。

举个例子：现在我们希望矩形绕【画布的左顶点】旋转。请时刻牢记，注册点不会改变这一特性。

利用x,y将显示对象位置调整为画布的左顶点
利用regX/regY将显示对象偏移回原来的位置。

    /*
      第一步实现，设置x,y将显示对象已到画布的左顶点，
      此时注册点则在显示对象的左顶点了
     */
      shape.x = 0
      shape.y = 0
      
    /*
      第二步实现，设置regX/regY将显示对象偏移到原来的位置，
    */
      shape.regX = -150
      shape.regY = -150

效果如下：（速率调快了，方面看效果）

总结：regX/regY不会改变注册点的位置，只会让显示对象产生偏移（相对于原显示对象而言）到此关于旋转中心的设置就说这么多啦，欢迎大家指正和讨论～