本文档是对图元交互状态样式的统一介绍, 交互状态包括
图元交互样式一般在GView上进行全局设置, 也可以在图元上分别设置, 全局属性名和图元的属性名一致
有以下可选项:
node.set("select_style","border");
link.set("select_style","shadow");
gView.set("select_style","shadow"); //全局设置
gView.set("select_style",{ //自定义渲染属性
shadowColor: "#ccc",
shadowBlur: 6
});
node.set("select_border_padding",3);
gView.set("select_border_padding",3); //全局设置
更多画笔样式, 请参考填充和画笔样式#stroke(通常设置为颜色)
node.set("select_border_stroke","LightSkyBlue"); //颜色
node.set("select_border_stroke", "linear_gradient"); //渐变类型
node.set("select_border_stroke_gradient_direction", "lt_to_rb"); //渐变方向
node.set("select_border_stroke_gradient_colors", { //渐变颜色
0: "black", //起始颜色为black
0.5: "red", //中间50%位置的颜色为red
1: "white" //结束颜色为white
});
gView.set("select_border_stroke","LightSkyBlue"); //全局设置
渐变颜色由百分比位置(0-1)和颜色组成,请参考填充和画笔样式#stroke_gradient_direction
node.set("select_border_stroke_gradient_direction", "lt_to_rb");
gView.set("select_border_stroke_gradient_direction", "lt_to_rb"); //全局设置
渐变颜色由百分比位置(0-1)和颜色组成,请参考填充和画笔样式#stroke_gradient_colors
node.set("select_border_stroke_gradient_colors", {
0: "black", //起始颜色为black
0.5: "red", //中间50%位置的颜色为red
1: "white" //结束颜色为white
});
gView.set("select_border_stroke_gradient_colors", { //全局设置
0: "black", //起始颜色为black
0.5: "red", //中间50%位置的颜色为red
1: "white" //结束颜色为white
});
node.set("select_border_stroke_line_width", 2);
gView.set("select_border_stroke_line_width", 2); //全局设置
node.set("select_border_stroke_line_dash", [6, 3]);
gView.set("select_border_stroke_line_dash", [6, 3]); //全局设置
请参考填充和画笔样式#stroke_line_dash_offset
node.set("select_border_stroke_line_dash_offset", 2);
gView.set("select_border_stroke_line_dash_offset", 2); //全局设置
node.set("select_shadow_blur", 6);
gView.set("select_shadow_blur", 10); //全局设置
node.set("select_shadow_color", "orange");
gView.set("select_shadow_color", "#008080"); //全局设置
node.set("select_shadow_offset", {x: 0, y: 0});
gView.set("select_shadow_offset", {x: 1, y: 2}); //全局设置
相比于选中状态渲染样式, 悬停状态渲染样式仅支持渲染属性对象, 渲染属性可包括 shadowBlur / shadowColor / shadowOffsetX / shadowOffsetY等
gView.set("hover_style", {
shadowColor: "#ccc",
shadowBlur: 6
})