【Cocos Creator 3.x】实现放大镜效果

在Cocos Creator 3.x中，实现放大镜效果可以通过编写脚本来动态调整节点（如图像）的缩放和位置。以下是一个简单的示例脚本，用于创建一个放大镜效果：

cc.Class({
    extends: cc.Component,
 
    properties: {
        // 需要应用放大镜效果的节点
        targetNode: cc.Node,
        // 放大镜镜头节点
        lensNode: cc.Node,
        // 放大倍数
        zoomScale: 3,
    },
 
    // 调整目标节点位置和缩放，以实现放大镜效果
    updateLens: function () {
        var targetPos = this.targetNode.convertToWorldSpaceAR(cc.v2(0, 0));
        var lensPos = this.node.convertToNodeSpaceAR(targetPos);
 
        var zoomScale = this.zoomScale;
        this.lensNode.scaleX = this.lensNode.scaleY = zoomScale;
        this.lensNode.x = lensPos.x - this.lensNode.width / 2;
        this.lensNode.y = lensPos.y - this.lensNode.height / 2;
    },
 
    onLoad: function () {
        // 初始化时更新放大镜位置
        this.updateLens();
    },
 
    update: function (dt) {
        // 持续更新放大镜位置
        this.updateLens();
    },
});

将此脚本添加到一个节点上，并在属性检查器中设置targetNode为你想要放大镜效果跟随的节点，lensNode为放大镜镜头节点，zoomScale为放大倍数。

在这个脚本中，updateLens函数计算目标节点在世界坐标系中的位置，并将其转换为放大镜节点的局部坐标系中。然后，根据放大倍数调整放大镜镜头节点的缩放，并重新定位以保持放大镜焦点对准目标节点。在onLoad中初始化，在update循环中持续更新放大镜位置。