文章目录
- 前言
- 一、环境
- 二、版本一_code
- 2.分析
- 类
- 属性
- 方法
- 详细分析
- 详细分析onLoad()
- onMouseWheel(event)详细分析
- 总结
前言
学习笔记，请多多斧正。
一、环境
通过精灵rect放置脚本实现鼠标滚轮放缩地图。
二、版本一_code
import { _decorator, Component, Node } from 'cc';
const { ccclass, property } = _decorator;
@ccclass('MapZoom')
export class MapZoom extends Component {
@property(Node)
mainMapNode = null; // 大地图节点
@property(Node)
miniMapNode = null; // 小地图节点（不会被缩放）
@property
scaleFactor = 0.1; // 缩放因子
@property
minScale = 0.5; // 最小缩放比
@property
maxScale = 3.0; // 最大缩放比
onLoad() {
// 绑定鼠标滚轮事件
this.node.on(Node.EventType.MOUSE_WHEEL, this.onMouseWheel, this);
}
onMouseWheel(event) {
// 获取当前大地图缩放比例
let currentScale = this.mainMapNode.scale.x;
// 根据滚动方向调整缩放比例
if (event.getScrollY() > 0) {
// 向上滚动，放大
currentScale += this.scaleFactor;
} else {
// 向下滚动，缩小
currentScale -= this.scaleFactor;
}
// 限制缩放范围
currentScale = Math.max(this.minScale, Math.min(currentScale, this.maxScale));
// 应用新的缩放值，只对大地图进行设置
this.mainMapNode.setScale(currentScale, currentScale, currentScale);
// 小地图保持原样，不做任何修改
}
}
2.分析
类
@ccclass('MapZoom'): 这是一个装饰器，用于定义一个新的 Cocos Creator 组件类，名为 MapZoom。
extends Component: MapZoom 类继承自 Cocos Creator 的 Component 基类，意味着它可以作为场景中的一个组件使用。
属性
mainMapNode:
类型：Node
描述：代表大地图的节点。这个节点会根据用户的鼠标滚轮输入进行缩放。miniMapNode:
类型：Node
描述：表示小地图的节点。小地图不会受到缩放影响，因此在鼠标滚动时不进行修改。scaleFactor:
类型：number
描述：每次鼠标滚轮滚动时，缩放的增量。默认值为 0.1。minScale:
类型：number
描述：大地图可缩放的最小比例。默认值为 0.5。maxScale:
类型：number
描述：大地图可缩放的最大比例。默认值为 3.0。
方法
onLoad()
- 在组件加载时自动调用该方法。它主要用于设置事件监听器。
this.node.on(Node.EventType.MOUSE_WHEEL, this.onMouseWheel, this): 绑定鼠标滚轮事件，当用户滚动鼠标时，会触发onMouseWheel方法。
onMouseWheel(event)
- 这是处理鼠标滚轮事件的主要方法。
- 获取当前缩放比例：使用
this.mainMapNode.scale.x获取当前大地图的缩放值。 - 缩放调整：
- 如果滚轮向上滚动
(event.getScrollY() > 0)，则增加缩放值。 - 如果滚轮向下滚动，则减少缩放值。
- 如果滚轮向上滚动
- 限制缩放范围：
- 使用
Math.max()和Math.min()来确保缩放值在设定的最小和最大范围内。
- 使用
- 应用缩放：
- 调用
this.mainMapNode.setScale(currentScale, currentScale, currentScale)来更新大地图的缩放值。 - 小地图保持不变，不做处理。
- 调用
详细分析
详细分析onLoad()
onLoad() {
// 绑定鼠标滚轮事件
this.node.on(Node.EventType.MOUSE_WHEEL, this.onMouseWheel, this);
}
- 生命周期方法
onLoad():
这是 Cocos Creator 组件的一部分，表示当组件被实例化并添加到场景中时调用的方法。在这个阶段，所有的属性都已初始化，并且可以访问组件的节点和其他资源。 - 事件绑定
this.node.on(...):
this.node是当前组件所附加的节点（Node）。on方法用于注册事件监听器。Node.EventType.MOUSE_WHEEL:
这是一个预定义的事件类型，表示鼠标滚轮事件。它会在用户滚动鼠标滚轮时触发。this.onMouseWheel:
这是事件处理函数的引用。当鼠标滚轮事件被触发时，Cocos Creator 会调用这个方法来处理事件。在本例中，当用户滚动鼠标时，将会执行onMouseWheel方法。this:
这是上下文参数，用于指定onMouseWheel方法中的this引用。通过传入this，确保在onMouseWheel方法被调用时，this指向当前的MapZoom实例，而不是可能的其他对象（如事件的源对象）。
onMouseWheel(event)详细分析
onMouseWheel(event) {
// 获取当前大地图缩放比例
let currentScale = this.mainMapNode.scale.x;
// 根据滚动方向调整缩放比例
if (event.getScrollY() > 0) {
// 向上滚动，放大
currentScale += this.scaleFactor;
} else {
// 向下滚动，缩小
currentScale -= this.scaleFactor;
}
// 限制缩放范围
currentScale = Math.max(this.minScale, Math.min(currentScale, this.maxScale));
// 应用新的缩放值，只对大地图进行设置
this.mainMapNode.setScale(currentScale, currentScale, currentScale);
// 小地图保持原样，不做任何修改
}
}
- 获取当前大地图缩放比例
let currentScale = this.mainMapNode.scale.x;
this.mainMapNode: 这是一个指向大地图节点的引用。scale.x: 获取大地图当前的缩放比例（通常只需获取 x 轴的缩放比例，因为在2D图形中，通常三个轴的缩放是相同的）。
- 根据鼠标滚动方向调整缩放比例
if (event.getScrollY() > 0) {
// 向上滚动，放大
currentScale += this.scaleFactor;
} else {
// 向下滚动，缩小
currentScale -= this.scaleFactor;
}
event.getScrollY(): 获取鼠标滚轮的滚动值。如果返回值大于0，则表示鼠标向上滚动；如果返回值小于0，则表示向下滚动。this.scaleFactor: 一个预定义的变量，决定每次滚轮操作时缩放的大小。
- 限制缩放范围
currentScale = Math.max(this.minScale, Math.min(currentScale, this.maxScale));
- 使用
setScale()方法将计算后的currentScale应用到大地图节点上，更新其视觉表现。这会影响到渲染和用户看到的地图。
总结
提示：这里对文章进行总结：
例如：以上就是今天要讲的内容，本文仅仅简单介绍了pandas的使用，而pandas提供了大量能使我们快速便捷地处理数据的函数和方法。
