2.3.6 拾取和选择

优质

小牛编辑

130浏览

2023-12-01

这里，我们将介绍一下拾取和选择的区别和使用方法。

拾取

通过平台提供的属性和接口，我们可以获取鼠标拾取到（Pick）的物体，将下面的代码输入到项目文件中，即可打印当前拾取和之前拾取的物体。

// 每一帧判断拾取的物体是否发生变化
app.on('update', function () {
    if (app.picker.isChanged()) {
console.clear();
// 打印当前被pick的物体
if (app.picker.objects[0]) {
console.log('当前拾取的物体 ' + app.picker.objects[0].name);
}
// 打印之前被pick的物体
if (app.picker.previousObjects[0]) {
console.log('之前拾取的物体 ' + app.picker.previousObjects[0].name);
}
    }
});

通过事件获取鼠标拾取的物体，可以通过 MouseEnter 和 MouseLeave 事件来实现。将下面的代码输入到项目文件中，即可给鼠标拾取到的对象添加边框。

// 鼠标拾取物体显示边框
app.on(THING.EventType.MouseEnter, '.Thing' ,function(ev) {
    ev.object.style.outlineColor = '#FF0000';
});
// 鼠标离开物体边框取消
app.on(THING.EventType.MouseLeave,'.Thing', function(ev) {
    ev.object.style.outlineColor = null;
});

通过鼠标框选一个区域获取区域内的物体，可以参考下面代码根据实际需求进行框选物体的获取。

// 由于框选比较消耗性能，因此预先设置框的“候选集”，只在候选集中框选
var things = app.query('.Thing');
app.picker.areaCandidates = things;

// 启动框选 传入 鼠标按下时开始框选的屏幕坐标
app.picker.startAreaPicking({
    x: x,
    y: y
});
//结束框选
app.picker.endAreaPicking();

我们提供了拾取结果的回调pickedResultFunc。可以参考下面的代码根据具体需求实现对应效果。

//  修改进入层级选择设置
// {String} ev.level 当前层级标识枚举值 可通过 THING.LevelType 获取枚举值，如建筑层级标识为 THING.LevelType.Building
// {THING.BaseObject} ev.object 当前层级对象（将要进入的层级对象）
// {THING.BaseObject} ev.current 当前层级对象（将要进入的层级对象）
// {THING.BaseObject} ev.previous 上一层级对象（离开的层级对象）
app.on(THING.EventType.EnterLevel, '.Building', function (ev) {
    app.picker.pickedResultFunc = function (obj) {
return obj;
    }
}, 'customLevelPickedResultFunc');
// 暂停建筑层级的默认选择行为
app.pauseEvent(THING.EventType.EnterLevel, '.Building', THING.EventTag.LevelPickedResultFunc);

选择

鼠标悬停到物体上，但不代表已经选择这个物体了，比如是我们点击后才表明我们选择了它。选择物体，我们通过 Selection 模块实现，可通过 app.selection 的接口实现该功能，见下例：

//将物体加入到选择集中
app.selection.select(obj);
// 判断对象是否在选择集中
 app.selection.has(obj);
//将物体从选择集中删除
app.selection.deselect(obj);
//清空选择集
app.selection.clear();

通过平台提供的属性和方法，可以侦测选择集变化，Selection 通过提供 isChanged 方法获取选择集变化，通过 objects 和 previousObjects 获取当前选择集和变化之前的选择集，见下例：

if(app.selection.isChanged()) {
    //获取当前哪些物体被选择
    console.log(app.selection.objects);
    //当isChanged时，之前都有那些物体被选择
    console.log(app.selection.previousObjects);
}

也可以通过事件侦测选择集变化，使用 Select 和 Deselect 事件精确控制物体针对选择的响应，如下例：

app.on(THING.EventType.Select, '.Thing', function (ev) {
    // 选择集中的物体颜色进行改变
    ev.object.style.color = "#ff0000";
});
app.on(THING.EventType.Deselect, '.Thing', function (ev) {
    // 物体从选择集中删除时，清除颜色
    ev.object.style.color = null;
});

我们也可以通过 SelectionChange 事件通知物体选择集合更新。

app.on(THING.EventType.SelectionChange, function (ev) {
    console.log(ev.previousObjects+" "+ev.objects);
});

下一个教程中，我们来学习事件。