拾取和选择

ThingJS 系统内置了很多事件,比点击鼠标、键盘输入、层级变化等。用户可以监听这些事件,在事件回调中进行相应的业务逻辑处理。

拾取

通过属性和接口获取鼠标拾取(Pick)的物体

当鼠标在一个物体上悬停时,我们经常希望做一些操作,比如变色等。

我们使用 Picker 类来获取鼠标拾取(Pick)的物体,通过 app.picker 得到 Picker 类来实现这个功能,见下例:

//判断拾取的物体是否改变
if(app.picker.isChanged()) {
    //通过app.picker.objects 得到当前拾取的物体
    console.log(app.picker.objects);
    //通过app.picker.previousObjects 得到之前拾取的物体
    console.log(app.picker.previousObjects);
}  

通过事件获取鼠标拾取的物体

可以通过 MouseEnterMouseLeave 来实现 。

// 鼠标拾取物体显示边框
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;
}); 

Pick 发生变化时会触发 PickChange 事件,也可以通过事件的回调参数获取当前和之前的拾取物体。

app.on(THING.EventType.PickChange,function (ev) {
    ev.objects.style.color = '#ff0000';
    ev.previousObjects.style.color = null;
}); 

区域 Pick 物体

有时我们通过鼠标框选一个区域,在区域内的物体我们认为是被 `Pick` 的,如下例:

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

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

pickedResultFunc

选择

选择物体

鼠标悬停到物体上,但不代表我选择它了,比如是我们点击后才表明我们选择了它。选择物体,我们通过 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);
}  

通过事件侦测选择集变化

可以通过 SelectDeselect 事件精确控制物体针对选择的响应,如下例:

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);
}); 

查看示例

示例效果如下:

在线咨询
QQ交流群
微信公众号