青瓷引擎官方插件扩展UI之滚动支持ScrollSupport

青瓷引擎官方插件扩展UI滚动支持（ScrollSupport）作用为滚动窗口支持。详细介绍如下：

构造函数

com.qici.extraUI.ScrollSupport(game, node, fnGetViewRect, fnGetContentRect, fnSetContentPosition);
变量
事件
使用方式

在任意脚本中实例化一个本对象。并设置事件对象等信息后，即可获得滚动支持。

this.scrollSupport = new com.qici.extraUI.ScrollSupport(
this.game, // 游戏对象
this.gameObject, // 用来监控事件的节点对象
this.getViewRect.bind(this), // 获取可显示视窗大小的函数
this.getContentRect.bind(this), // 获取滚动的内容区域大小的函数
this.setContentPosition.bind(this) // 设置滚动内容偏移的函数
);

这样就可以让gameObject获得滚动视图的支持了。
编辑器支持

如果需要编辑器支持，需要在使用该对象的脚本中添加下列属性:

canHorizontal: {
get : function() {
return this.scrollSupport ? this.scrollSupport.canHorizontal : null;
},
set : function(value) {
this.scrollSupport && (this.scrollSupport.canHorizontal = value);
}
},

canVertical: {
get : function() {
return this.scrollSupport ? this.scrollSupport.canVertical : null;
},
set : function(value) {
this.scrollSupport && (this.scrollSupport.canVertical = value);
}
},

movementType: {
get : function() {
return this.scrollSupport ? this.scrollSupport.movementType : null;
},
set : function(value) {
this.scrollSupport && (this.scrollSupport.movementType = value);
}
},

elasticity: {
get : function() {
return this.scrollSupport ? this.scrollSupport.elasticity : null;
},
set : function(value) {
this.scrollSupport && (this.scrollSupport.elasticity = value);
}
},

inertia: {
get : function() {
return this.scrollSupport ? this.scrollSupport.inertia : null;
},
set : function(value) {
this.scrollSupport && (this.scrollSupport.inertia = value);
}
},

decelerationRate: {
get : function() {
return this.scrollSupport ? this.scrollSupport.decelerationRate : null;
},
set : function(value) {
this.scrollSupport && (this.scrollSupport.decelerationRate = value);
}
},

scrollSensitivity: {
get : function() {
return this.scrollSupport ? this.scrollSupport.scrollSensitivity : null;
},
set : function(value) {
this.scrollSupport && (this.scrollSupport.scrollSensitivity = value);
}
},

propagationScroll: {
get : function() {
return this.scrollSupport ? this.scrollSupport.propagationScroll : null;
},
set : function(value) {
this.scrollSupport && (this.scrollSupport.propagationScroll = value);
}
},

/**
* @property {qc.Node | null} horizontalScrollBar - 水平滚动条
*/
horizontalScrollBar : {
get : function() {
return this.scrollSupport ? this.scrollSupport.horizontalScrollBar : null;
},
set : function(value) {
this.scrollSupport && (this.scrollSupport.horizontalScrollBar = value);
}
},

/**
* @property {qc.Node | null} verticalScrollBar - 竖直滚动条
*/
verticalScrollBar : {
get : function() {
return this.scrollSupport ? this.scrollSupport.verticalScrollBar : null;
},
set : function(value) {
this.scrollSupport && (this.scrollSupport.verticalScrollBar = value);
}
},

/**
* @property {number} horizontalNormalizedPosition - 水平方向上滚动的比例
*/
horizontalNormalizedPosition : {
get : function() {
return this.scrollSupport ? this.scrollSupport.horizontalNormalizedPosition : null;
},
set : function(value) {
this.scrollSupport && this.scrollSupport.setNormalizedPosition(value, 0);
}
},

/**
* @property {number} verticalNormalizedPosition - 竖直方向上滚动的比例
*/
verticalNormalizedPosition : {
get : function() {
return this.scrollSupport ? this.scrollSupport.verticalNormalizedPosition : null;
},
set : function(value) {
this.scrollSupport && this.scrollSupport.setNormalizedPosition(value, 1);
}
}

并在对应的editor脚本中添加：

var self = this;
gui.columnWidths = [self.indent, "70+0.1", "60+0.5"];
// 是否水平滚动
var title = gui.titleLine('Horizontal Scroll', G.preference.query('collapse.scrollView') === true);
title.add(gui.line([
gui.empty(),
gui.text('Horizontal', { toolTip: 'canHorizontal' }),
gui.checkBox({ bind: 'canHorizontal' })
]));
title.add(InspectorUtil.drawNodeRef(target, 'horizontalScrollBar', undefined, true, 'ScrollBarH'));
title.add(gui.line([
gui.empty(),
gui.text('Value', { toolTip: 'horizontalNormalizedPosition' }),
gui.numberInput({ bind: 'horizontalNormalizedPosition' })
]));

// 是否垂直滚动
title = gui.titleLine('Vertical Scroll', G.preference.query('collapse.scrollView') === true);
title.add(gui.line([
gui.empty(),
gui.text('Vertical', { toolTip: 'canVertical' }),
gui.checkBox({ bind: 'canVertical' })
]));
title.add(InspectorUtil.drawNodeRef(target, 'verticalScrollBar', undefined, true, 'ScrollBarV'));
title.add(gui.line([
gui.empty(),
gui.text('Value', { toolTip: 'verticalNormalizedPosition' }),
gui.numberInput({ bind: 'verticalNormalizedPosition' })
]));
gui.columnWidths = defaultConfig;

// 边界限制类型
gui.line([
gui.text('Movement Type', { toolTip: 'movementType' }),
self._moveType = gui.dropDownList({ bind: 'movementType', items: [
{ label: 'Unrestricted', value: qc.ScrollView.MOVEMENT_UNRESTRICTED },
{ label: 'Elastic', value: qc.ScrollView.MOVEMENT_ELASTIC },
{ label: 'Clamped', value: qc.ScrollView.MOVEMENT_CLAMPED }
]})
]);

// 复位速度
var old = target.movementType;
self._moveType.onValueChanged = function(v) {
if (v !== old)
self.repaint();
};

if (target.movementType === qc.ScrollView.MOVEMENT_ELASTIC) {
gui.line([
gui.text('Elasticity', { align: 'left' }),
gui.numberInput({ bind: 'elasticity' })
]);
}

// 惯性滑动
gui.line([
gui.text('Inertia', { align: 'left' }),
gui.checkBox({ bind: 'inertia' })
]);
gui.line([
gui.text('Deceleration Rate', { toolTip: 'decelerationRate' }),
gui.numberInput({ bind: 'decelerationRate' })
]);

// 滚动的敏感度
gui.line([
gui.text('Scroll Sensitivity', { toolTip: 'scrollSensitivity' }),
gui.numberInput({ bind: 'scrollSensitivity' })
]);

// 滚动的敏感度
gui.line([
gui.text('Propagation Scroll', { toolTip: 'propagationScroll' }),
gui.checkBox({ bind: 'propagationScroll' })
]);

文章来自绿盟(xDowns.com)转载请注明来路。

· 青瓷引擎官方插件扩展UI之表格数据适配器
· [图文] 如何使用青瓷引擎官方插件之服务器通讯
· 如何使用青瓷引擎官方插件之微信接口
· [图文] 如何使用青瓷引擎官方插件之锁屏插件
· 如何使用青瓷引擎官方插件之粒子系统
· [图文] 如何使用青瓷引擎官方插件之Arcade物理系统
· 青瓷引擎怎么启用脏矩形脏矩形怎么使用
· 青瓷引擎与Excel表格之间不得不说的秘密！
· 青瓷引擎如何将游戏数据保存到本地存储？
· 青瓷引擎如何加载游戏资源游戏资源管理教程

青瓷引擎 1.0.7 官网最新版 - HTML5小游戏开发工具

青瓷引擎官方插件扩展UI之滚动支持ScrollSupport

文章正文

相关文章

相关软件