EaseJs 中 regX / regY 的用法

Chase620 等级 757 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/,如有侵权,请联系删除。

收藏
评论区

相关推荐

EaseJs 中 regX / regY 的用法
EaseJs 中 regX / regY 的用法 by 凹凸曼大力
SS
修改文件Controller-Service-PACserver.cs 1、 //PacUrl = $"http://127.0.0.1:{config.localPort}/pac?t={GetTimestamp(DateTime.Now)}{PacSecret}"; PacUrl = $"http://127.0.0.1:{confi
lua中的table
1、 table 是 lua 中最重要的数据类型。 2、 table 类似于 python 中的字典。 3、 table 只能通过构造式来创建 例1: Lua代码   mytable = { a = 10, b = 11, c = 20, ddd = 30 }   print(mytable\["a"\])  
2018最新Web前端经典面试试题及答案
javascript: ----------- ###  JavaScript中如何检测一个变量是一个String类型?请写出函数实现 typeof(obj) === "string" typeof obj === "string" obj.constructor === String ### 请用js去除字符串空格? ###
2018最新Web前端经典面试试题及答案
javascript: ----------- ###  JavaScript中如何检测一个变量是一个String类型?请写出函数实现 typeof(obj) === "string" typeof obj === "string" obj.constructor === String ### 请用js去除字符串空格? ###
C# 将html实体编码转换到正常字符 & #40;格式
获取到html实体编码字符后,通过正则获取其中的html实体编码,再统一强制转换到正常字符;  代码如下: string strformat = item.value7; //将html实体编码转换到正常字符 string regx = "(?<=(& #)).+?(
Hive SQL50道练习题
建表 create table student(s_id string,s_name string,s_birth string,s_sex string) row format delimited fields terminated by '\t';create table course(c_id string,c_name string,t_i
Hive重写表数据丢失风险记录
若在Hive中执行INSERT OVERWRITE重写同一个表的数据时,有可能会造成数据丢失。 如 INSERT OVERWRITE TABLE table\_name SELECT \* FROM table\_name * * * 一、新建一张分区表 --------- create table test_chj_cols (id str
Javascript中最常用的55个经典技巧
[Javascript中最常用的55个经典技巧](https://www.oschina.net/action/GoToLink?url=http%3A%2F%2Fwenku.it168.com%2Fd_000002914.shtml) 1\. oncontextmenu="window.event.returnValue=false" 将彻底屏蔽鼠标右键
Lua中table的实现
本文来自《Lua设计与实现》的阅读笔记,推荐Lua学习者可以购买一本,深入浅出讲解lua的设计和实现原理,很赞,哈哈 Lua中对于表的设计,是基于数组和散列表,和其他语言不同,对于数组的下标是从1开始的,对于散列表而言,只要其键值补位nil,都可以存储在其中。 **一、table的基本类型定义** 首先看看table的数据定义,参考源码lobject.
Openlayers4中实现动态线效果
**概述:** 本文讲述如何结合canvas在Openlayers4中实现动态线的效果。 **效果:** ![](https://static.oschina.net/uploads/img/201804/25191518_tjv1.jpg) **代码:** 1、move-line扩展 **\[javascript\]** [view plain
Qt之JSON生成与解析
<p><!--StartFragment--><span style="color: rgb(73, 73, 73); font-family: simsun; font-size: 14px; line-height: 21px; widows: 1; background-color: rgb(226, 226, 226);">&nbsp;JSON(Ja
React平时的一些踩坑总结
1. Warning: validateDOMNesting(...): Whitespace text nodes cannot appear as a child of . Make sure you don't have any extra whitespace between tags on each line of your source cod
TP5+layui表格使用(更新中)
<table class="layui-hide" id="category"></table> <script type="text/javascript" src="__PLUGINS__/axios/axios.min.js"></script> <script type="text/javascr
string按行读取以及按空格分隔
### 1、string读取某一行,然后按空格分隔吹每一个string int main() { string line,b; getline(cin,line); stringstream ss(line); while(ss>>b) { cout<<