青瓷引擎UI组件怎么用之滚动条与滚动视图

青瓷引擎的滚动条与滚动条视图组件该如何使用呢？其构成与属性又是什么样子的呢？下文，绿盟小编整理带来「青瓷引擎UI组件怎么用之滚动条与滚动视图」，想知道的我都告诉你：

滚动条：

滚动条组件(qc.ScrollBar)类似拉条组件Slider，支持用户通过拖拽选择滚动位置，一般结合滚动视图ScrollView使用。

ScrollBar构成

从主菜单(游戏对象/滚动条)或工具条上创建两个滚动条对象，一个水平摆放，一个竖直摆放，得到如下对象结构：

ScrollBar - qc.ScrollBar对象，继承于UIImage类型，作为背景图片
slidingArea- qc.Node对象，作为滚动条的显示区域，默认其完全填充满父节点ScrollBar的矩形区域
sliders - qc.UIImage对象，作为前景图片滑块对象，设置到ScrollBar.sliders属性上

通过如下代码可实现与以上操作同样的效果：

// 创建滚动条对象
var scrollBar = new qc.ScrollBar(game, parent);

scrollBar.width = 160;
scrollBar.height = 20;
scrollBar.size = 0.2;
scrollBar.direction = qc.ScrollBar.LEFT_TO_RIGHT;

// 创建滚动区域对象
var slidingArea = game.add.node(scrollBar);
slidingArea.name = 'slidingArea';
slidingArea.setAnchor(new qc.Point(0, 0), new qc.Point(1, 1));
slidingArea.setStretch(0, 0, 0, 0);
slidingArea.pivotX = slidingArea.pivotY = 0.5;

// 创建滑块对象
var sliders = game.add.image(slidingArea);
sliders.name = 'sliders';
sliders.setAnchor(new qc.Point(0, 0), new qc.Point(1, 1));
sliders.setStretch(0, 0, 0, 0);
sliders.pivotX = sliders.pivotY = 0.5;
scrollBar.sliders = sliders;
scrollBar.interactive = true;

scrollBar.texture = game.assets.find('__builtin_resource__');
scrollBar.frame = 'sliderbg.png';
scrollBar.imageType = qc.UIImage.IMAGE_TYPE_SLICED;

sliders.texture = game.assets.find('__builtin_resource__');
sliders.frame = 'button.png';
sliders.imageType = qc.UIImage.IMAGE_TYPE_SLICED;
ScrollBar属性

Direction: 滚动条方向，支持如下四种类型，node.direction = qc.ScrollBar.LEFT_TO_RIGHT;
qc.ScrollBar.LEFT_TO_RIGHT，水平方向滚动，左端为0，右端为1
qc.ScrollBar.RIGHT_TO_LEFT，水平方向滚动，左端为1，右端为0
qc.ScrollBar.TOP_TO_BOTTOM，竖直方向滚动，顶端为0，底端为1
qc.ScrollBar.BOTTOM_TO_TOP，竖直方向滚动，顶端为1，底端为0
Value: 当前滚动条位置值，取值范围0.0~1.0
Sliders: 绑定滑块对象，scrollBar.sliders = sliders;
Size: 滑块大小，取值范围0.0~1.0，scrollBar.size = 0.2;
Fix Silders Size: 是否指定滑块大小，scrollBar.fixSlidersSize = true;
Number Of Step: 滚动时滑块从0到1的步数，scrollBar.numberOfStep = 10;

滚动视图：

滚动视图(qc.ScrollView)用于当所要显示的内容需要占用比较大的空间，却需要在一个较小的区域显示，滚动视图提供滚动内容功能。

ScrollView构成

从主菜单(游戏对象/滚动视图)或工具条上创建滚动视图对象，并创建一个UIImage对象作为大图片内容，得到如下的滚动视图对象结构：

ScrollView - qc.ScrollView对象，继承于UIImage类型，本例中设置内置的button2.png图片作为灰色底图
node - qc.Node对象，被scrollView.content所引用，作为需要滚动显示内容的根节点
background - qc.UIImage对象，图片尺寸大于scrollView对象矩形区域

通过如下代码可实现与以上操作同样的效果：

// 创建滚动视图对象
var scrollView = new qc.ScrollView(game, parent);

// 设置灰色底图
scrollView.texture = game.assets.find('__builtin_resource__');
scrollView.frame = 'button.png';
scrollView.imageType = qc.UIImage.IMAGE_TYPE_SLICED;

// 设置滚动视图大小
scrollView.width = 400;
scrollView.height = 400;

// 运行水平和垂直滚动
scrollView.canHorizontal = true;
scrollView.canVertical = true;

// 开启交互功能
scrollView.interactive = true;
// 滚动区域有限制，但可以超越边界，之后被反弹回来
scrollView.movementType = qc.ScrollView.MOVEMENT_ELASTIC;
// 超出边界后反弹复位速度，elasticity值越大，复位越慢
scrollView.elasticity = 2;

// 设置mask进行内容裁切
var mask = scrollView.addScript("qc.NodeMask");
mask.checkInField = false;

// 创建滚动内容
var content = game.add.node(scrollView);
scrollView.content = content;

// 设置滚动背景图片内容
var background = game.add.image(content);
background.texture = game.assets.find('backgroundKey');
background.resetNativeSize();
ScrollView属性

Content: 滚动视图内容，node.content = content。滚动视图自动计算本节点的一级孩子包围盒作为滚动内容大小。
Horizontal Scroll: 水平滚动
Horizontal: 是否允许水平滚动，node.canHorizontal = true;
ScrollBarH: 绑定水平滚动条对象，node.horizontalScrollBar = scrollBar;
Value: 水平方向滚动比例，node.horizontalNormalizedPosition = 0.5;
Vertical Scroll: 垂直滚动
Vertical: 是否允许垂直滚动，node.canVertical = true;
ScrollBarV: 绑定垂直滚动条对象，node.verticalScrollBar = scrollBar;
Value: 垂直方向滚动比例，node.verticalNormalizedPosition = 0.5;
Movement Type: 移动类型，目前支持以下三种类型，node.movementType = qc.ScrollView.MOVEMENT_ELASTIC;
qc.ScrollView.MOVEMENT_UNRESTRICTED: 滚动区域无限制
qc.ScrollView.MOVEMENT_ELASTIC: 滚动区域有限制，但可以超越边界，之后被拖回
qc.ScrollView.MOVEMENT_CLAMPED: 滚动区域有限制，无法超过边界
Elasticity: 超出边界后反弹复位速度，值越大，复位越慢，node.elasticity = 2；
Inertia: 是否惯性滑动，node.inertia = true;
DecelerationRate: 惯性滑动的减速参数，node.decelerationRate = 0.03;
ScrollSensitivity: 响应滚动时的倍率，node.scrollSensitivity = 1;
Propagation Scroll: 滚动到边界时是否向父亲传播滚动事件，仅支持movementType为MOVEMENT_CLAMPED类型

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

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

青瓷引擎UI组件怎么用之滚动条与滚动视图

文章正文

相关文章

相关软件