资料拓展：
选中状态
Graph3dView
中被选中的图元会显示为较暗的状态，变暗系数是由图元style
的brightness
和select.brightness
属性决定，select.brightness
属性默认值为0.7
，最终返回值大于1
变亮，小于1
变暗，等于1
或为空则不变化。
Graph3dView#getBrightness
函数控制最终图元亮度，因此也可以通过重载覆盖该函数自定义选中图元亮度，以下为默认逻辑：
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
函数用于定义图元立体线框效果，默认实现代码如下， 由实现代码可知通过控制wf.*
（wf
为wireframe
的简称）相关参数即可实现显示选中线框的效果。
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
，有些系统下只能显示1
的效果，不同系统能显示的最大值也都有限制
wf.mat
：默认值为空，可通过ht.Default.createMatrix
构建转换矩阵
过滤器
选择过滤器
默认情况所有图元都是可选中，用户可通过设置选择过滤器取消部分图元的可选中功能， 可否选中的最终控制在SelectionModel
模型的filterFunc
过滤器上，也可通过重载GraphView
的isSelectable
函数， 或调用GraphView.setSelectableFunc(func)
的封装函数控制，示例代码如下：
graph3dView.setSelectableFunc(function(data){ return data.a('selectable');});
可见过滤器
默认情况图元都是可见，用户可通过设置可见过滤器隐藏部分图元，示例代码如下：
graph3dView.setVisibleFunc(function(data){ return data.s('all.transparent') === true;});
该示例代码逻辑为：只显示all.transparent
为true
的图元。 Graph3dView#isVisible
函数最终决定图元是否可见，因此也可通过直接重载覆盖该函数自定义：
graph3dView.isVisible = function(data){ return data.s('all.transparent') === true;};
移动过滤器
默认情况图元都是可移动，用户可通过设置移动过滤器固定部分图元，示例代码如下：
graph3dView.setMovableFunc(function(data){ return movableItem.selected;});
该示例代码逻辑为：当movableItem
的selected
为true
时图元才允许移动。 Graph3dView#isMovable
函数最终决定图元可否移动，因此也可通过直接重载覆盖该函数自定义：
graph3dView.isMovable = function(data){ return movableItem.selected;};
旋转过滤器
当Graph3dView#setEditable(true)
设置为可编辑的情况下，默认选中图元允许旋转，可通过如下代码禁止部分图元旋转：
graph3dView.setRotationEditableFunc(function(data){ return data instanceof ht.Shape;});
以上代码的逻辑为：只允许ht.Shape
类型的图元可以旋转。 Graph3dView#isRotationEditable
函数最终决定图元可否旋转，因此也可通过直接重载覆盖该函数自定义：
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
函数最终决定图元可否改变大小，因此也可通过直接重载覆盖该函数自定义：
graph3dView.isSizeEditable: function(data){ return data instanceof ht.Shape;},
除在视图组件上设置过滤器外，GraphView
和Graph3dView
的内置过滤机制也参考了以下style
属性，用户可直接改变以下style
达到对单个图元的控制效果：
2d.visible
：默认值为true
，控制图元在GraphView
上是否可见
2d.selectable
：默认值为true
，控制图元在GraphView
上是否可选中
2d.movable
：默认值为true
，控制图元在GraphView
上是否可移动
2d.editable
：默认值为true
，控制图元在GraphView
上是否可编辑
2d.move.mode
：默认值为空，控制图元移动范围，可设置为如下参数：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
：默认值为空，参见键盘操作，控制图元移动范围，可设置为如下参数：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);
}
}
]);
监听动作事件并在页面显示出来
rows = new ht.List();
g3d.mi(function(e){ //mi 增加交互事件监听器是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;
});
鼠标经过图元节点时的明暗度的变化
/*******************鼠标经过时明暗度的变化************************************/
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列表的方法----鼠标经过图元节点时，把图元节点所有的样式以json字符串的形式显示出来
g3d.getToolTip = function(e){
var data = this.getDataAt(e);
if(data){
return '<pre>' + JSON.stringify(data.getStyleMap(), null, 4) + '</pre>';
}
return null;
};
双击图元节点，图元节点吸附的相关交互
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);
};
网友评论