Cocos_鼠标滚轮放缩地图

前言

学习笔记，请多多斧正。

一、环境

通过精灵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);
}

1. 生命周期方法
   onLoad():
   这是 Cocos Creator 组件的一部分，表示当组件被实例化并添加到场景中时调用的方法。在这个阶段，所有的属性都已初始化，并且可以访问组件的节点和其他资源。
2. 事件绑定

• 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);
        // 小地图保持原样，不做任何修改
    }
}

1. 获取当前大地图缩放比例

let currentScale = this.mainMapNode.scale.x;

• this.mainMapNode: 这是一个指向大地图节点的引用。
• scale.x: 获取大地图当前的缩放比例（通常只需获取 x 轴的缩放比例，因为在2D图形中，通常三个轴的缩放是相同的）。

2. 根据鼠标滚动方向调整缩放比例

if (event.getScrollY() > 0) {
    // 向上滚动，放大
    currentScale += this.scaleFactor;
} else {
    // 向下滚动，缩小
    currentScale -= this.scaleFactor;
}

• event.getScrollY(): 获取鼠标滚轮的滚动值。如果返回值大于0，则表示鼠标向上滚动；如果返回值小于0，则表示向下滚动。
• this.scaleFactor: 一个预定义的变量，决定每次滚轮操作时缩放的大小。

3. 限制缩放范围

currentScale = Math.max(this.minScale, Math.min(currentScale, this.maxScale));

• 使用 setScale() 方法将计算后的 currentScale 应用到大地图节点上，更新其视觉表现。这会影响到渲染和用户看到的地图。

总结

提示：这里对文章进行总结：
例如：以上就是今天要讲的内容，本文仅仅简单介绍了pandas的使用，而pandas提供了大量能使我们快速便捷地处理数据的函数和方法。