Add edge/boundary for moving a node based on finger movement and scale of the node to make zoom feature in mobile using Cocos creator 2.4.10v

37 Views Asked by At

In cocos creator game engine 2.4.10 version, Have a game with target image which can be marked with x-mark on touch and button panel below the target area. I am trying to make a zoom in and out for only target area node with fingers gesture without affecting the button panel.

Now I just made the target area to scale up when 2 touches recorded, and it will move to touch location on moving with single finger and scaled up. It creates the illution of zoomed target area and scroll the zoomed area same as we zoom in normal image.

How to add the boundary/limit for moving the target area so that it should not move outer of the scene based on the scale value with which it is zoomed.

I tried with the following code, but it does not work. I need a way to find the limit to restrict the movement of the node with respect to it's scale.

const canvas = cc.find('Canvas'); //Canvas node

const canvasSize = canvas.getComponent(cc.Canvas).designResolution; // canvas size

let leftEdge = -canvasSize.width * this.target.scale;
let rightEdge = canvasSize.width * this.target.scale;
let topEdge = canvasSize.height * this.target.scale;
let bottomEdge = -canvasSize.height * this.target.scale;

       if (this.target.x < leftEdge) {
            this.target.x = leftEdge;
        }

        if (this.target.x > rightEdge) {
            this.target.x = rightEdge;
        }

        if (this.target.y > topEdge) {
            this.target.y = topEdge;
        }

        if (this.target.y < bottomEdge) {
            this.target.y = bottomEdge;
        }

if any one have suggestion, please help me through.

Thanks in advance

0

There are 0 best solutions below