关于javascript:EaseJs-中-regX-regY-的用法

作者：凹凸曼 - 大力士

前情提要

动效开发中最罕用的根本变形动作就是缩放、旋转等，该变形会波及到中心点的设置。因为咱们采纳了 createJs 中的 easeJs 库进行图形绘制，这个时候咱们就会用到 regX/regY。上面先看一个小 demo:

咱们先在页面中画一个 100×100 的矩形，并搁置在 canvas 两头，代码如下：

import React, {useRef, useEffect} from "react";
import {Power0, TweenMax as Tween} from "gsap";
import {Stage, Shape, Graphics, Ticker} from "@createjs/easeljs";
import "./App.css";
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 Stage(canvasRef.current);
    const graphics = 
    new Graphics().beginFill("#0ff").drawRect(0, 0,   100, 100);
    const shape = new Shape(graphics);
    window.stage.addChild(shape);
    // 将矩形搁置在 canvas 中
    shape.x = 150;
    shape.y = 150;
    shape.alpha = 0.3;
    Ticker.on("tick", e => {stage.update();
    });
  }, []);
  return (<div style={{ position: "relative", width: "100%", height: "100%"}}>
      <div style={{position: "absolute", left: "10%", top: "20%"}}>
        <canvas className="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 为负，则向右下偏移。
当初咱们让两头的矩形动起来, 向 useEffect 底部增加如下代码:

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

成果如下：

很显然咱们能发现，该对象的注册点即左顶点。

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

官网阐明：

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

当初咱们设置 regX/regY，显示对象宽度 / 高度的一半（100 / 2 = 50）, 为了比照，咱们新增一个同地位的矩形,（在 useEffect 底部增加)

const createShape = () => {const graphics = new Graphics() .beginFill("#0f0")
                            .drawRect(0, 0, 100, 100);
   const shape = new 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
   });
 };
createShape();

成果如下：

淡蓝色的为该矩形本来的地位，设置 regX/regY 后，可知图形的确是绕核心旋转。只是该矩形地位产生了偏移，咱们须要调整显示对象的地位，将其地位还原为初始状态并围绕核心旋转。

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

成果如下：

设置任意旋转核心
当初咱们分明了，regX/regY 会扭转显示对象的注册点地位，并使该对象地位产生偏移。那咱们能够很简略的利用这一个性和显示对象的 x,y 属性联结应用达到咱们的目标。
举个例子：当初咱们想让矩形绕其右上顶点旋
利用 regX/regY，使其绕右顶点旋转
利用 x, y 将偏移后的对象还原至初始地位
代码如下：

// 第一步实现，将旋转核心移至右顶点
shape.regX = 100
shape.regY = 0

// 第二步实现，设置 x,y 将显示对象移回初始地位
shape.x += 100
shape.y = 0

成果如下：

依附下面拆分的方法，咱们就能够将旋转核心设置为该显示对象上的任意一点啦。
（大家会不会因而迷糊 如果旋转核心不在显示对象上该如何解决，上面也做一下阐明）。

举个例子：当初咱们心愿矩形绕【画布的左顶点】旋转。

• 利用 regX/regY 将显示对象注册点调整为画布左顶点。
• 利用 x,y 将显示对象还原至初始地位

所以 其实和旋转核心在显示对象上是统一的。

// 第一步
shape.regX = -150
shape.regY = -150

// 第二步
shape.x -= 150 
shape.y -= 150

成果如下：（速率调快了，不便看成果）

总结：

regX/regY 会扭转其旋转核心，并随同显示对象地位偏移（绝对于原显示对象而言）

当显示对象存在缩放和旋转时，状况会不会不同呢？

• 有缩放的状况

给显示对象设置缩放值

shape.scale = 0.5;

设置中心点：

// 第一步实现，设置显示对象注册点偏移至中心点处
shape.regX = (width / 2) * scale
shape.regY = (height / 2) * scale
      
// 第二步实现，设置 x / y 将显示对象偏移到原来的地位，shape.x += (width / 2) * scale
shape.y += (height / 2) * scale

很显然，地位计算并不正确。因为缩放不会影响注册点所在坐标系。
调整 regX/regY 取值

shape.regX = width / 2
shape.regY = height / 2

则失去绕中心点旋转后果，成果如下：

• 有旋转的状况

给显示对象自身设置旋转角度

shape.rotation = 30;
  
// 解决中心点设置
shape.regX = width / 2
shape.regY = height / 2
shape.x += width / 2
shape.y += height / 2

即：显示对象的旋转，不会影响旋转核心的设置

总结：

regX/regY、x/ y 配合应用能够设置任意中心点。另外通过旋转和缩放两种状况中心点的设置和成果可知：缩放在中心点设置之前就已失效所以缩放是以其左顶点进行缩放，而旋转是在设置完中心点之后失效，所以其是绕其中心点进行旋转的。额定须要留神的是，当设完中心点，对象通过旋转动效后，如须要将中心点重置为左顶点时。此时注册点的偏移量重置为 0。但 x, y 的地位须要通过旋转公式求出旋转后左顶点的坐标，而不是单纯的还原地位。

欢送关注凹凸实验室博客：aotu.io

或者关注凹凸实验室公众号（AOTULabs），不定时推送文章。