长屏插件使用

1、创建容器

longPage = this.longPage = new BitmapContainer(RES.getRES("gameSceneBg"));

2、将容器放置舞台对象 s (这里要注意插件的只监听top层舞台对象使用其他对象将导致滚动失效)

KWhaleUtils.AddStageByScaleWNoCheck(s, longPage, 1);

3、进行配置设置

var cur = s.canvas.style.zIndex;
var at = new AlloyTouch({
    touch: s.canvas,//反馈触摸的dom
    vertical: true,//不必需，默认是true代表监听竖直方向touch
    target: longPage, //运动的对象
    property: "y", //被运动的属性
    min: Math.ceil(0 - (longPage.height - s.sh))>0?0:Math.ceil(0 - (longPage.height - s.sh)), //不必需,运动属性的最小值
    max: 0, //不必需,滚动属性的最大值
    sensitivity: KWRatio,//不必需,触摸区域的灵敏度，默认值为1，可以为负数
    factor: 1 * KWRatio,//不必需,表示触摸位移与被运动属性映射关系，默认值是1
    step: 1,//用于校正到step的整数倍
    maxSpeed: KWRatio,
    // outFactor:0.5,
    touchStart: function () {
        s.canvas.style.zIndex = 1000;
    },
    touchMove: function () {
        console.log(longPage)
        console.log(longPage.y)
        // that.card1._dom_ele.style.top = (that.page.y / window["KWRatio"] + that.page.height / window["KWRatio"] * that.card1._pos_object.scaleY / window["KWRatio"]) + "px";
    },
    touchEnd: function () {
        s.canvas.style.zIndex = cur;
    }
});

4、往长屏对象longPage添加元素 (以往我们都是直接往舞台对象添加bitmap对象，但长页面必须往容器添加bitmap对象才生效)

写好的便捷方法：

Panel.prototype.createLongPageBitmap = function (stage, resName, channel, scale) {//创建图片的方法
    var obj = KWhaleUtils.getBmpByName(resName);
    if (channel !== undefined) {
        console.log('我进来了')
        if (channel !== 0 && channel !== 0.5 && channel !== 1) {
            throw new Error("值必须为0，0.5，1三值之一 ");
            return;
        }
        obj.anchorX = obj.anchorY = channel;
    }
    if (scale) {
        KWhaleUtils.AddBitmapContainerByScaleHNoCheck(stage, obj, scale);
    } else {
        KWhaleUtils.AddBitmapContainerByScaleHNoCheck(stage, obj, obj.height / 1240);// 1240为长画面总height
    }
    return obj;
};

调用:

circle = that.createLongPageBitmap(容器, main引入的图片, 0.5)

5、我们每次对容器内对象进行外观属性修改时都要进行刷新

circle.updateRelativeData(longPage)

6、如要进行角度旋转操作那么我们必须对bitmap对象的rotationFollow设为false

bitmap.rotationFollow = false;

长屏插件使用

相关推荐