資料拓展：
選中狀態(tài)
Graph3dView
中被選中的圖元會顯示為較暗的狀態(tài)业踢，變暗系數(shù)是由圖元style
的brightness
和select.brightness
屬性決定孟抗，select.brightness
屬性默認值為0.7
泳挥，最終返回值大于1
變亮啦租，小于1
變暗，等于1
或為空則不變化讥蔽。
Graph3dView#getBrightness
函數(shù)控制最終圖元亮度涣易，因此也可以通過重載覆蓋該函數(shù)自定義選中圖元亮度，以下為默認邏輯：
getBrightness: function(data){ var brightness = data.s('brightness'), selectBrightness = this.isSelected(data) ? data.s('select.brightness') : null; if(brightness == null){ return selectBrightness; } if(selectBrightness == null){ return brightness; } return brightness * selectBrightness; },
Graph3dView#getWireframe
函數(shù)用于定義圖元立體線框效果冶伞，默認實現(xiàn)代碼如下新症， 由實現(xiàn)代碼可知通過控制wf.*
（wf
為wireframe
的簡稱）相關參數(shù)即可實現(xiàn)顯示選中線框的效果。
getWireframe: function(data){ var visible = data.s('wf.visible'); if(visible === true || (visible === 'selected' && this.isSelected(data))){ return { color: data.s('wf.color'), width: data.s('wf.width'), short: data.s('wf.short'), mat: data.s('wf.mat') }; }},
wf.visible
：默認為false
代表不顯示响禽，可設置為selected
值代表選中時才顯示徒爹，或true
值代表一直顯示線框
wf.color
：線框顏色
wf.short
：默認值為false
代表顯示封閉的立體線框，設置為true
則顯示不封閉的短線框
wf.width
：線框寬度芋类，默認值為1
隆嗅，有些系統(tǒng)下只能顯示1
的效果，不同系統(tǒng)能顯示的最大值也都有限制
wf.mat
：默認值為空侯繁，可通過ht.Default.createMatrix
構建轉換矩陣
過濾器
選擇過濾器
默認情況所有圖元都是可選中胖喳，用戶可通過設置選擇過濾器取消部分圖元的可選中功能， 可否選中的最終控制在SelectionModel
模型的filterFunc
過濾器上贮竟，也可通過重載GraphView
的isSelectable
函數(shù)丽焊， 或調(diào)用GraphView.setSelectableFunc(func)
的封裝函數(shù)控制，示例代碼如下：
graph3dView.setSelectableFunc(function(data){ return data.a('selectable');});
可見過濾器
默認情況圖元都是可見坝锰，用戶可通過設置可見過濾器隱藏部分圖元粹懒，示例代碼如下：
graph3dView.setVisibleFunc(function(data){ return data.s('all.transparent') === true;});
該示例代碼邏輯為：只顯示all.transparent
為true
的圖元。 Graph3dView#isVisible
函數(shù)最終決定圖元是否可見顷级，因此也可通過直接重載覆蓋該函數(shù)自定義：
graph3dView.isVisible = function(data){ return data.s('all.transparent') === true;};
移動過濾器
默認情況圖元都是可移動凫乖，用戶可通過設置移動過濾器固定部分圖元，示例代碼如下：
graph3dView.setMovableFunc(function(data){ return movableItem.selected;});
該示例代碼邏輯為：當movableItem
的selected
為true
時圖元才允許移動弓颈。 Graph3dView#isMovable
函數(shù)最終決定圖元可否移動帽芽，因此也可通過直接重載覆蓋該函數(shù)自定義：
graph3dView.isMovable = function(data){ return movableItem.selected;};
旋轉過濾器
當Graph3dView#setEditable(true)
設置為可編輯的情況下，默認選中圖元允許旋轉翔冀，可通過如下代碼禁止部分圖元旋轉：
graph3dView.setRotationEditableFunc(function(data){ return data instanceof ht.Shape;});
以上代碼的邏輯為：只允許ht.Shape
類型的圖元可以旋轉导街。 Graph3dView#isRotationEditable
函數(shù)最終決定圖元可否旋轉，因此也可通過直接重載覆蓋該函數(shù)自定義：
graph3dView.isRotationEditable: function(data){ return data instanceof ht.Shape;},
改變大小過濾器
當Graph3dView#setEditable(true)
設置為可編輯的情況下纤子，默認選中圖元允許改變大小搬瑰，可通過如下代碼禁止部分圖元旋轉：
graph3dView.setSizeEditableFunc(function(data){ return data instanceof ht.Shape;});
以上代碼的邏輯為：只允許ht.Shape
類型的圖元可以改變大小款票。 Graph3dView#isSizeEditable
函數(shù)最終決定圖元可否改變大小，因此也可通過直接重載覆蓋該函數(shù)自定義：
graph3dView.isSizeEditable: function(data){ return data instanceof ht.Shape;},
除在視圖組件上設置過濾器外泽论，GraphView
和Graph3dView
的內(nèi)置過濾機制也參考了以下style
屬性艾少，用戶可直接改變以下style
達到對單個圖元的控制效果：
2d.visible
：默認值為true
，控制圖元在GraphView
上是否可見
2d.selectable
：默認值為true
翼悴，控制圖元在GraphView
上是否可選中
2d.movable
：默認值為true
缚够，控制圖元在GraphView
上是否可移動
2d.editable
：默認值為true
，控制圖元在GraphView
上是否可編輯
2d.move.mode
：默認值為空鹦赎，控制圖元移動范圍谍椅，可設置為如下參數(shù)：xy
：可在xy
平面移動
x
：僅沿x
軸移動
y
：僅沿y
軸移動
任何其他非空值代表不可移動
3d.visible
：默認值為true
，控制圖元在Graph3dView
上是否可見
3d.selectable
：默認值為true
古话，控制圖元在Graph3dView
上是否可選中
3d.movable
：默認值為true
雏吭，控制圖元在Graph3dView
上是否可移動
3d.editable
：默認值為true
，控制圖元在Graph3dView
上是否可編輯
3d.move.mode
：默認值為空煞额，參見鍵盤操作思恐，控制圖元移動范圍沾谜，可設置為如下參數(shù)：xyz
：可在三維空間移動
xy
：僅在xy
平面移動
xz
：僅在xz
平面移動
yz
：僅在yz
平面移動
x
：僅沿x
軸移動
y
：僅沿y
軸移動
z
：僅沿z
軸移動
任何其他非空值代表不可移動
所有的動作交互：
toolbar = new ht.widget.Toolbar([
{//旋轉
label: 'Rotatable',
type: 'check',
selected: true,
action: function(){
g3d.setRotatable(this.selected);
}
},
{//縮放
label: 'Zoomable',
type: 'check',
selected: true,
action: function(){
g3d.setZoomable(this.selected);
}
},
{//平移
label: 'Pannable',
type: 'check',
selected: true,
action: function(){
g3d.setPannable(this.selected);
}
},
{
label: 'Walkable',
type: 'check',
selected: true,
action: function(){
g3d.setWalkable(this.selected);
}
},
{
label: 'Resettable',
type: 'check',
selected: true,
action: function(){
g3d.setResettable(this.selected);
}
},
{
label: 'RectSelectable',
type: 'check',
selected: true,
action: function(){
g3d.setRectSelectable(this.selected);
}
},
'separator',
{
label: 'Node Movable',
type: 'check',
selected: true,
action: function(){
g3d.setMovableFunc(this.selected ? null : function(data){
return false;
});
}
},
{
label: 'Node Rotatable',
type: 'check',
selected: true,
action: function(){
g3d.setRotationEditableFunc(this.selected ? null : function(data){
return false;
});
}
},
{
label: 'Node Scalable',
type: 'check',
selected: true,
action: function(){
g3d.setSizeEditableFunc(this.selected ? null : function(data){
return false;
});
}
},
{
label: 'Editable',
type: 'check',
selected: true,
action: function(){
g3d.setEditable(this.selected);
}
},
'separator',
{
type: 'toggle',
selected: false,
label: 'First person mode',
action: function(){
g3d.setFirstPersonMode(this.selected);
}
}
]);
監(jiān)聽動作事件并在頁面顯示出來
rows = new ht.List();
g3d.mi(function(e){ //mi 增加交互事件監(jiān)聽器是addInteractorListener的縮寫
var text = ' ' + e.kind;
if(e.part){
text += ' on ' + e.part + ' of ' + e.data.s('label');
}
text += '<br>';
rows.add(text);
if(rows.size() > 25){
rows.removeAt(0);
}
text = '';
rows.each(function(row){
text += row;
});
div.innerHTML = text;
});
鼠標經(jīng)過圖元節(jié)點時的明暗度的變化
/*******************鼠標經(jīng)過時明暗度的變化************************************/
g3d.getBrightness = function(data){
if(data.s('isFocused')){
return 0.7;
}
return null;
};
lastFocusData = null;
g3d.getView().addEventListener('mousemove', function(e){
var data = g3d.getDataAt(e);
if(data !== lastFocusData){
if(lastFocusData){
lastFocusData.s('isFocused', false);
}
if(data){
data.s('isFocused', true);
}
lastFocusData = data;
}
});
/*******************************************************/
獲取style列表的方法----鼠標經(jīng)過圖元節(jié)點時膊毁，把圖元節(jié)點所有的樣式以json字符串的形式顯示出來
g3d.getToolTip = function(e){
var data = this.getDataAt(e);
if(data){
return '<pre>' + JSON.stringify(data.getStyleMap(), null, 4) + '</pre>';
}
return null;
};
雙擊圖元節(jié)點，圖元節(jié)點吸附的相關交互
g3d.onDataDoubleClicked = function(data, e, dataInfo) {
if(data.face) {
// getHost()獲取和設置吸附的圖元對象
//getAttaches()返回目前吸附到該圖元的所有對象基跑，返回ht.List鏈表對象婚温，無吸附對象時返回空
data.getHost().getAttaches().each(function(attach) {
if(attach.pop) {
toggleData(attach);
}
});
}
Animation(data, dataInfo.name);
};
