EaseJs中regX/regY的设置

popeye_big
887 阅读4分钟

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属性联合使用达到我们的目的。

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

  1. 利用x,y将偏移后的对象移回到最初的位置。
  2. 利用regX/regY 产生偏移，使偏移后的对象的右顶点与原注册点（即左顶点）重合 代码如下：
    //第一步实现，设置x,y将显示对象已到画布的左顶点，
      此时注册点则在显示对象的左顶点了
    shape.x += 100
    shape.y = 0
    
    // 第二步实现，设置regX/regY将显示对象偏移到原来的位置，
    shape.regX = 100
    shape.regY = 0

效果如下：

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

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

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

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

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

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

avatar
文章
阅读
粉丝