EaseJs 中 regX / regY 的用法

Chase620 等级 409 0 0

EaseJs 中 regX / regY 的用法

EaseJs 中 regX / regY 的用法

by 凹凸曼-大力士 on 2020-11-05

动效开发过程中总会遇到中心点设置问题,本文介绍了EaseJS中regX/regY设置中心点的用法。

前情提要

动效开发中最常用的基本变形动作就是缩放、旋转等,该变形会涉及到中心点的设置。由于我们采用了createJs中的easeJs库进行图形绘制,这个时候我们就会用到regX/regY。下面先看一个小demo:

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
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

效果如下:
EaseJs 中 regX / regY 的用法

^_^ 继续说回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 底部添加如下代码:

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

效果如下:
EaseJs 中 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.

现在我们设置regX/regY,显示对象宽度/高度的一半(100 / 2 = 50), 为了对比,我们新增一个同位置的矩形,(在useEffect底部添加)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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();

效果如下:
EaseJs 中 regX / regY 的用法

淡蓝色的为该矩形原本的位置,设置regX/regY后,可知图形确实是绕中心旋转。只是该矩形位置发生了偏移,我们需要调整显示对象的位置,将其位置还原为初始状态并围绕中心旋转。

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

效果如下:
EaseJs 中 regX / regY 的用法

设置任意旋转中心
现在我们清楚了,regX/regY会改变显示对象的注册点位置,并使该对象位置发生偏移。那我们可以很简单的利用这一特性和显示对象的x,y属性联合使用达到我们的目的。
举个例子:现在我们想让矩形绕其右上顶点旋
利用regX/regY ,使其绕右顶点旋转
利用x, y将偏移后的对象还原至初始位置
代码如下:

1
2
3
4
5
6
7
// 第一步实现,将旋转中心移至右顶点
shape.regX = 100
shape.regY = 0

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

效果如下:
EaseJs 中 regX / regY 的用法

依靠上面拆分的办法,我们就可以将旋转中心设置为该显示对象上的任意一点啦。
(大家会不会因此迷糊 如果旋转中心不在显示对象上该如何处理,下面也做一下说明)

举个例子:现在我们希望矩形绕【画布的左顶点】旋转。

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

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

1
2
3
4
5
6
7
// 第一步
shape.regX = -150
shape.regY = -150

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

效果如下:(速率调快了,方便看效果)
EaseJs 中 regX / regY 的用法

总结:

regX/regY会改变其旋转中心,并伴随显示对象位置偏移(相对于原显示对象而言)

当显示对象存在缩放和旋转时,情况会不会不同呢?

  • 有缩放的情况

给显示对象设置缩放值

1
shape.scale = 0.5;

设置中心点:

1
2
3
4
5
6
7
// 第一步实现,设置显示对象注册点偏移至中心点处
shape.regX = (width / 2) * scale
shape.regY = (height / 2) * scale

// 第二步实现,设置x/y将显示对象偏移到原来的位置,
shape.x += (width / 2) * scale
shape.y += (height / 2) * scale

EaseJs 中 regX / regY 的用法
很显然,位置计算并不正确。因为缩放不会影响注册点所在坐标系。
调整regX/regY取值

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

则得到绕中心点旋转结果,效果如下:
EaseJs 中 regX / regY 的用法

  • 有旋转的情况

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

1
2
3
4
5
6
7
shape.rotation = 30;

//处理中心点设置
shape.regX = width / 2
shape.regY = height / 2
shape.x += width / 2
shape.y += height / 2

EaseJs 中 regX / regY 的用法

即:显示对象的旋转,不会影响旋转中心的设置

总结:

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

EaseJs

经验分享

感谢您的阅读,本文由 凹凸实验室 版权所有。如若转载,请注明出处:凹凸实验室(https://aotu.io/notes/2020/11/05/easeJs-center-setting/

上次更新:2021-02-02 15:48:05

React 入门儿

node.js 沙盒逃逸分析

var gitalkOpts={id:"bm90ZXMvMjAyMC8xMS8wNS9lYXNlSnMtY2VudGVyLXNldHRpbm",owner:"o2team",repo:"o2team.github.io",title:"EaseJs 中 regX / regY 的用法",body:"https://aotu.io/notes/2020/11/05/easeJs-center-setting/index.html\\n\\n动效开发过程中总会遇到中心点设置问题,本文介绍了EaseJS中regX/regY设置中心点的用法。",clientID:"3c4d153e6874260f9c7e",clientSecret:"dd44012504c6168bc05b9266e0554bb28c62ce15",admin:\["mamboer"\]}

本文转自 https://aotu.io/notes/2020/11/05/easeJs-center-setting/,如有侵权,请联系删除。

收藏
评论区

相关推荐

JavaScript中的类型
JavaScript中的类型 一、关于类型 什么叫做类型?简单地说,类型就是把内存中的一个二进制序列赋予某种意义。比如,二进制序列0100 0000 0111 0000 0001 0101 0100 1011 1100 0110 1010 0111 1110 1111 1001 1110如果看作是64位无符号整数类型就是4
计算机网络
一、HTTP 1.1  请求和响应报文 开始⾏,⽤于区分是请求报⽂还是响应报⽂。在请求报⽂中的开始⾏叫做请求⾏(Request Line)
utils.js 文件 工具类 方法分享
javascript / 时间解析工具 @param {(Object|string|number)} time @param {string} cFormat @returns {string | null} / export function parseTime(time, cFormat) { if (arguments.leng
EaseJs 中 regX / regY 的用法
EaseJs 中 regX / regY 的用法 by 凹凸曼大力
一文弄懂Java中String的所有小秘密
简介 String是java中非常常用的一个对象类型。可以说java中使用最多的就是String了。那么String到底有哪些秘密呢?接下来本文将会一一讲解。 String是不可变的 String是不可变的,官方的说法叫做immutable或者constant。 String的底层其实是一个Char的数组。 priv
Ant Design 可编辑的树形表格
Ant Design Editable Tree TableAnt Design of React Editable Tree Table可编辑的树形表格Need in the work, but i did not find readymade components easy to understand after Baidu and Googl
前端面试题自检 JS CSS 部分
JS类型 JavaScript的简单数据类型Number , String , Boolean , Undefined , Null , Symbol typeof 操作符的返回值 number string boolean undefined object function
idea运行junit测试程序报错command line is too long. shorten command line for
idea运行junit测试程序报错command line is too long. shorten command line for ... 解决方法在项目根目录.idea/workspace.xml文件中添加一行代码xml<component name"PropertiesComponent"  ... <property name"d
Dubbo 源码分析 - 服务调用过程
Dubbo 源码分析 服务调用过程注: 本系列文章已捐赠给 Dubbo 社区,你也可以在 Dubbo 中阅读本系列文章。1\. 简介在前面的文章中,我们分析了 Dubbo SPI、服务导出与引入、以及集群容错方面的代码。经过前
MyBatis 源码分析 - 插件机制
1.简介一般情况下,开源框架都会提供插件或其他形式的拓展点,供开发者自行拓展。这样的好处是显而易见的,一是增加了框架的灵活性。二是开发者可以结合实际需求,对框架进行拓展,使其能够更好的工作。以 MyBatis 为例,我们可基于 MyBatis 插件机制实现分页、分表,监控等功能。由于插件和业务无关,业务也无法感知插件的存在。因此可以无感植入插件,在无形中增强
MyBatis 源码分析 - 内置数据源
MyBatis 源码分析 内置数据源1.简介本篇文章将向大家介绍 MyBatis 内置数据源的实现逻辑。搞懂这些数据源的实现,可使大家对数据源有更深入的认识。同时在配置这些数据源时,也会更清楚每种属性的意义和用途。因此,如果大家想知其然,也知其所以然。那么接下来就让我们一起去探索 MyBatis 内置数据源的源码吧。MyBatis 支持三种数据源配置,分别
[C#]ArrayList、string、string[]之间的转换
1、ArrarList 转换为 string\[\] :  ArrayList list new ArrayList();  list.Add("aaa");  list.Add("bbb");  string\[\] arrString (string\[\])list.ToArray(typeof( string)) ;2、string\[\] 转换
antd table input 失焦的问题
<a name"UYeEu"</a 背景隔壁 zym 同事遇到了一个问题,在编辑表格时,每输入一个字符后都会失去焦点,需要重新点击聚焦后才能继续输入,如图:<br /<br /​<br /<a name"xKS8Z"</a 原因归根结底,是关于 key 的问题。<br /原先的代码中,components 在 render 中,然而在每次 setState
面试官:JavaScript的数据类型你了解多少?
前言作为JavaScript的入门知识点,Js数据类型在整个JavaScript的学习过程中其实尤为重要。最常见的是边界数据类型条件判断问题。我们将通过这几个方面来了解数据类型: 概念 检测方法 转换方法 概念undefined、Null、Boolean、String、Number、Symbol、BigInt为基础类型;Ob
java中去除字符串(String)中的换行字符(\r \n \t)
本文转载自 若有侵权,请联系本人删除例1:public class Test public static void main(String\[\] args) String s \ "'sds gdasda" + "\\n" + "edaeafd'"; System.out.println("转换前:"+s);