Cocos_鼠标滚轮放缩地图

文章目录

前言
一、环境
二、版本一_code
- 2.分析
总结

前言

学习笔记，请多多斧正。

一、环境

通过精灵rect放置脚本实现鼠标滚轮放缩地图。

二、版本一_code

javascript 复制代码

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()

javascript 复制代码

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)详细分析

javascript 复制代码

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

获取当前大地图缩放比例

javascript 复制代码

let currentScale = this.mainMapNode.scale.x;

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

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

javascript 复制代码

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

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

限制缩放范围

javascript 复制代码

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

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

总结

提示：这里对文章进行总结：

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