交互状态样式

本文档是对图元交互状态样式的统一介绍, 交互状态包括

• 选中状态(select)
• 悬停状态(hover)

图元交互样式一般在GView上进行全局设置, 也可以在图元上分别设置, 全局属性名和图元的属性名一致

选中状态

• select_stylestring | object图元选中状态的渲染方式, 默认为border

  有以下可选项:

  • border使用边框标示图元选中状态
    • 节点的选中边框显示为一个矩形
    • 链路的选中边框显示为宽度*2的路径
  • shadow使用阴影标示图元选中状态
  • 渲染属性对象object渲染属性可包括 shadowBlur / shadowColor / shadowOffsetX / shadowOffsetY等

                      
                          node.set("select_style","border");
                          link.set("select_style","shadow");
  
                          gView.set("select_style","shadow");     //全局设置
                          gView.set("select_style",{              //自定义渲染属性
                              shadowColor: "#ccc",
                              shadowBlur: 6
                          });
                      
                  

• select_border_paddingnumber选中边框的内边距, 默认为2

                      
                          node.set("select_border_padding",3);
  
                          gView.set("select_border_padding",3);   //全局设置
                      
                  

• select_border_strokestring选中边框的画笔样式, 默认为#0EB29A

  更多画笔样式, 请参考填充和画笔样式#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");   //全局设置
                      
                  

• select_border_stroke_gradient_directionstring选中边框画笔渐变绘制的颜色渐变方向

  渐变颜色由百分比位置(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"); //全局设置
                      
                  

• select_border_stroke_gradient_colorsstring选中边框画笔渐变样式的梯度颜色对象

  渐变颜色由百分比位置(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
                          });
                      
                  

• select_border_stroke_line_widthnumber选中边框画笔的线宽, 默认为1

  请参考填充和画笔样式#stroke_line_width

                      
                          node.set("select_border_stroke_line_width", 2);
  
                          gView.set("select_border_stroke_line_width", 2); //全局设置
                      
                  

• select_border_stroke_line_dasharray选中边框画笔的虚线模式参数,使用一组值来指定描述模式的线和间隙的交替长度, 默认为null

  请参考填充和画笔样式#stroke_line_dash

                      
                          node.set("select_border_stroke_line_dash", [6, 3]);
  
                          gView.set("select_border_stroke_line_dash", [6, 3]); //全局设置
                      
                  

• select_border_stroke_line_dash_offsetnumber选中边框画笔虚线的偏移, 默认为0

  请参考填充和画笔样式#stroke_line_dash_offset

                      
                          node.set("select_border_stroke_line_dash_offset", 2);
  
                          gView.set("select_border_stroke_line_dash_offset", 2); //全局设置
                      
                  

• select_shadow_blurstring选中阴影的模糊效果程度, 默认为6

                      
                          node.set("select_shadow_blur", 6);
  
                          gView.set("select_shadow_blur", 10); //全局设置
                      
                  

• select_shadow_colorstring选中阴影的颜色, 默认为#0EB29A

                      
                          node.set("select_shadow_color", "orange");
  
                          gView.set("select_shadow_color", "#008080"); //全局设置
                      
                  

• select_shadow_offsetobject选中阴影的偏移, 由x(横向)和y(纵向)属性组成, 默认为{x: 0, y: 0}

                      
                          node.set("select_shadow_offset", {x: 0, y: 0});
  
                          gView.set("select_shadow_offset", {x: 1, y: 2}); //全局设置
                      
                  

悬停状态

• hover_styleobject图元悬停状态的渲染属性对象, 默认为{shadowColor: "#888", shadowBlur: 6}

  相比于选中状态渲染样式, 悬停状态渲染样式仅支持渲染属性对象, 渲染属性可包括 shadowBlur / shadowColor / shadowOffsetX / shadowOffsetY等

                      
                          gView.set("hover_style", {
                              shadowColor: "#ccc",
                              shadowBlur: 6
                          })