THING.UE.USelection API 文档

简介

THING.UE.USelection 是一个用于实现在屏幕上框选Thing对象以及添加特定Tag对象的组件。

简单示例

创建一个对象池，用来生成框选到的对象头顶的气泡

var pool = new THING.UE.ObjectPool({
    create: function (thing) {
        var style = {
            sideType: THING.SideType.Double,
            transparent: true,
            lights: false,
            image: new THING.ImageTexture("./Content\\Resources\\camIco.png"),
        };
        var marker = new THING.Marker({
            name: "Marker_" + thing.name,
            localScale: [1, 1, 1],
            style: style,
            renderType: THING.RenderType.Sprite,
        });
        return marker;
    }
});

创建框选组件对象，并设置相关选项

let mouseButton = 0;
global.selection = THING.Utils.createObject('Selection');
selection.setOptions({
    mode: 'position',
    frequence: 'frame',
    button: mouseButton
});

或者用以下方式

let mouseButton = 0;
global.selection = THING.UE.USelection;
selection.setOptions({
    mode: 'position',
    frequence: 'frame',
    button: mouseButton
});

设置可框选的特定标签

selection.addTag('RoadLight');

设置被框选到的对象效果

let selectedObjets = [];
function onSelected() {
    selectedObjets.forEach(function (thing) {
        //将被选中的对象设置为红色
        thing.style.color = [1, 0, 0, 1];
        //被创建的对象创建顶牌
        pool.pop(thing, function (marker) {
            marker.visible = true;
            var pos = thing.position;
            marker.localPosition = [pos[0], 10, pos[2]];
        });
    });
}

取消框选对象效果

function revertSelected() {
    //删除顶牌
    pool.pushAll(function (marker) {
        marker.visible = false;
    });
    //恢复对象颜色
    selectedObjets.forEach(function (thing) {
        thing.style.color = [1, 1, 1, 1];
    });
    selectedObjets = [];
}

鼠标左键按下并移动时框选到的Thing对象

app.on("mousemove", function (ev) {
    if (ev.button == mouseButton) {
        revertSelected();
        //直接调用selection.query可按条件查询框选对象
        selectedObjets = selection.query('.Thing');
        onSelected();
    }
},'selection');

鼠标右键关闭框选功能

app.on("click", function (ev) {
    if (ev.button == 2) {
        revertSelected();
        app.off('mousemove', 'selection');
        selection.disable();
    }
});

开启框选功能

selection.enable();

##效果图

鼠标左键按住框选，框选到的对象变红色并顶气泡