cocos2d-js 实现双指缩放地图效果 和 单点移动效果



var  winSize = cc.director.getWinSize();
if(touches.length > 1)        // 多点进行缩放
{
    // 得到当前两触摸点
    var  point1 = touches[0].getLocation();
    var point2 = touches[1].getLocation();
    // 计算两点之间得距离
    var x1 = point1.x - point2.x;
    var y1 = point1.y - point2.y;
    var currDistance = Math.pow((x1*x1+y1*y1),0.5);//cc.pDistance(point1,point2); //Math.sqrt(x1*x1+y1*y1);//point1.distance(point2);
    // 计算两触摸点上一时刻之间得距离
    var x11 = touches[0].getPreviousLocation().x -touches[1].getPreviousLocation().x;
    var y11 = touches[0].getPreviousLocation().y - touches[1].getPreviousLocation().y;
    var prevDistance = Math.pow((x11*x11+y11*y11),0.5);//cc.pDistance(touches[0].getPreviousLocation(),touches[1].getPreviousLocation());//Math.sqrt(x11*x11+y11*y11);//touches[0].getPreviousLocation().distance(touches[1].getPreviousLocation());
    // 两触摸点与原点的差向量，pointVec1和pointVec2是相对于bgSprite的位置
    var pointVec1 = cc.p(point1.x-e.getCurrentTarget().bgOrigin.x,point1.y-e.getCurrentTarget().bgOrigin.y);//cc.pSub(point1,e.getCurrentTarget().bgOrigin);
    var pointVec2 = cc.p(point2.x-e.getCurrentTarget().bgOrigin.x,point2.y-e.getCurrentTarget().bgOrigin.y);//cc.pSub(point2,e.getCurrentTarget().bgOrigin);
    // 两触摸点的相对中点
    var relMidx = (pointVec1.x + pointVec2.x) / 2 ;
    var relMidy = (pointVec1.y + pointVec2.y) / 2 ;

    // 计算bgSprite的锚点
    var anchorX = relMidx / e.getCurrentTarget().bgSprite.getBoundingBox().width;
    var anchorY = relMidy / e.getCurrentTarget().bgSprite.getBoundingBox().height;
    // 相对屏幕的中点
    var absMidx = (point2.x + point1.x) / 2 ;
    var absMidy = (point2.y + point1.y) / 2 ;

    // 缩放时，为了避免出现空白的区域，需要做以下的边界处理。
    // 当bgSprite快要进入到屏幕时，修改bgSprite的位置（既absMidx和absMidy）。
    if(  e.getCurrentTarget().bgOrigin.x > 0)
    {
        absMidx -= e.getCurrentTarget().bgOrigin.x;
    }
    if( e.getCurrentTarget().x < -e.getCurrentTarget().bgSprite.getBoundingBox().width + winSize.width )
    {
        absMidx +=  -e.getCurrentTarget().bgSprite.getBoundingBox().width + winSize.width - e.getCurrentTarget().bgOrigin.x;
    }
    if( e.getCurrentTarget().bgOrigin.y > 0 )
    {
        absMidy -= e.getCurrentTarget().bgOrigin.y;
    }
    if( e.getCurrentTarget().bgOrigin.y < -e.getCurrentTarget().bgSprite.getBoundingBox().height + winSize.height )
    {
        absMidy +=  -e.getCurrentTarget().bgSprite.getBoundingBox().height + winSize.height - e.getCurrentTarget().bgOrigin.y;
    }
    // 重设bgSprite锚点和位置
    e.getCurrentTarget().bgSprite.setAnchorPoint(cc.p(anchorX, anchorY));
    e.getCurrentTarget().bgSprite.setPosition(cc.p(absMidx, absMidy));

    // 根据两触摸点前后的距离计算缩放倍率
    var scale = e.getCurrentTarget().bgSprite.getScale() * ( currDistance / prevDistance);
    cc.log("sacel ==== "+scale);
    // 控制缩放倍率在1～4倍之间，最小倍率不能太小，不让背景将不能填充满整个屏幕。
    scale = Math.min(4,Math.max(1, scale));
    e.getCurrentTarget().bgSprite.setScale(scale);
    // 更新原点位置
    var pt1 = cc.p(absMidx, absMidy);
    var pt2 = cc.p(e.getCurrentTarget().bgSprite.getBoundingBox().width * anchorX, e.getCurrentTarget().bgSprite.getBoundingBox().height * anchorY) ;
    //e.getCurrentTarget().bgOrigin = cc.p(absMidx, absMidy) - cc.p(e.getCurrentTarget().bgSprite.getBoundingBox().width * anchorX, e.getCurrentTarget().bgSprite.getBoundingBox().height * anchorY) ;
    e.getCurrentTarget().bgOrigin = cc.p(pt1.x-pt2.x,pt1.y-pt2.y);//cc.p(absMidx, absMidy) - cc.p(e.getCurrentTarget().bgSprite.getBoundingBox().width * anchorX, e.getCurrentTarget().bgSprite.getBoundingBox().height * anchorY) ;
}
else if(touches.length == 1)        // 单点进行移动
{
    // 单点时，touches中只有一个Touch对象，所以通过touches[0]就可以得到触摸对象
    var touch = touches[0];
    // 计算滑动过程中的滑动增量
    var diff = touch.getDelta();
    // 得到当前bgSprite的位置
    var currentPos = e.getCurrentTarget().bgSprite.getPosition();
    // 得到滑动后bgSprite应该所在的位置
    var pos = cc.pAdd(currentPos,diff);
    // 得到此刻bgSprite的尺寸
    var bgSpriteCurrSize = e.getCurrentTarget().bgSprite.getBoundingBox();

    //边界控制，约束pos的位置
    pos.x = Math.min(pos.x, bgSpriteCurrSize.width * e.getCurrentTarget().bgSprite.getAnchorPoint().x);
    pos.x = Math.max(pos.x, -bgSpriteCurrSize.width + winSize.width + bgSpriteCurrSize.width * e.getCurrentTarget().bgSprite.getAnchorPoint().x);
    pos.y = Math.min(pos.y, bgSpriteCurrSize.height * e.getCurrentTarget().bgSprite.getAnchorPoint().y);
    pos.y = Math.max(pos.y, -bgSpriteCurrSize.height + winSize.height + bgSpriteCurrSize.height * e.getCurrentTarget().bgSprite.getAnchorPoint().y);
    // 重设bgSprite位置
    e.getCurrentTarget().bgSprite.setPosition(pos);

    // 更新原点位置
    //if( pos.x >= bgSpriteCurrSize.width * e.getCurrentTarget().bgSprite.getAnchorPoint().x
    //    || pos.x <= -bgSpriteCurrSize.width + winSize.width + bgSpriteCurrSize.width * e.getCurrentTarget().bgSprite.getAnchorPoint().x)
    //{
    //    diff.x = 0;
    //}
    //if( pos.y >= bgSpriteCurrSize.height * e.getCurrentTarget().bgSprite.getAnchorPoint().y
    //    || pos.y <= -bgSpriteCurrSize.height + winSize.height + bgSpriteCurrSize.height * e.getCurrentTarget().bgSprite.getAnchorPoint().y)
    //{
    //    diff.y = 0;
    //}
    //e.getCurrentTarget().bgOrigin += diff;

    var off = cc.pSub(pos,currentPos);
    //e.getCurrentTarget().bgOrigin += off;
    e.getCurrentTarget().bgOrigin = cc.pAdd(cc.p(e.getCurrentTarget().bgOrigin.x,e.getCurrentTarget().bgOrigin.y),off);

}