文本样式

文本主要指的是Label标签和 Info提示, 文本一般由文字和文字边框组成

Label标签
- label_fill*Label标签文字填充样式
- label_stroke*Label标签文字画笔样式
- label_box_fill*Label标签文本框填充样式
- label_box_stroke*Label标签文本框画笔样式
Info提示
- info_fill*Info提示文字填充样式
- info_stroke*Info提示文字画笔样式
- info_box_fill*Info提示文本框填充样式
- info_box_stroke*Info提示文本框画笔样式

文本样式一般在GView上进行全局设置, 也可以在节点或链路上分别设置, 全局属性名和节点/链路的属性名一致

Label标签

label_positionstringLabel标签相对于节点body的位置, 默认为bottom
有如下可选项:
- centerLabel标签位于节点body矩形的中心
- topLabel标签位于节点body矩形的上侧
- bottomLabel标签位于节点body矩形的下侧
- leftLabel标签位于节点body矩形的左侧
- rightLabel标签位于节点body矩形的右侧
```
                    
                        node.set("label_position", "center");

                        gView.set("label_position", "bottom");
                    
                
```
仅对节点有效
label_directionstringLabel标签相对于position位置点的方向, 默认为null
有如下可选项
- centerLabel标签位于位置点的中心
- topLabel标签位于位置点的上侧
- bottomLabel标签位于位置点的下侧
- leftLabel标签位于位置点的左侧
- rightLabel标签位于位置点的右侧
- left_topLabel标签位于位置点的左上
- left_bottomLabel标签位于位置点的左下
- right_topLabel标签位于位置点的右上
- right_bottomLabel标签位于位置点的右下
如果没有指定label_direction, 会根据label_position自动设置label_direction方向
- label_position = centerlabel_direction默认为center
- label_position = toplabel_direction默认为top
- label_position = bottomlabel_direction默认为bottom
- label_position = leftlabel_direction默认为left
- label_position = rightlabel_direction默认为right
```
                    
                        node.set("label_direction", "left");

                        gView.set("label_direction", "right");
                    
                
```
仅对节点有效

label_gapnumberLabel标签跟节点body矩形的间距, 默认为3

                    
                        node.set("label_gap", 6);

                        gView.set("label_gap", 20); //全局设置

仅对节点有效

label_rotationnumber ｜ booleanLabel标签旋转

属性在节点和链路使用上有所差异

节点表示Label标签旋转的角度(number), GView全局属性是node_label_rotation, 默认为0
链路表示Label标签是否沿着路径旋转(true/false), GView全局属性是link_label_rotation, 默认为true(旋转)

                    
                        node.set("label_rotation", "60");
                        link.set("label_direction", false);

                        gView.set("node_label_rotation", "60"); //全局设置
                        gView.set("link_label_direction", false); //全局设置

label_fontstringLabel标签的字体, 默认为浏览器默认字体

请参考CanvasRenderingContext2D.font

                    
                        node.set("label_font", "italic 600 24px sans-serif");

                        gView.set("label_font", "12px Arial, sans-serif"); //全局设置

label_offsetobjectLabel标签的偏移量

                    
                        node.set("label_offset", {x:10, y:20}});
                        gView.set("label_offset", 20); //全局设置

label_offset等价于label_offset_x+label_offset_y，不过label_offset的优先级高，会优先使用

label_offset_xnumberLabel标签相对于默认位置沿x轴的横向偏移量

                    
                        node.set("label_offset_x", 10);

                        gView.set("label_offset_x", 20); //全局设置

label_offset_ynumberLabel标签相对于默认位置在y轴的纵向偏移量

                    
                        node.set("label_offset_y", 10);

                        gView.set("label_offset_y", 20); //全局设置

label_alignstringLabel标签多行文字的对齐方式, 默认为center

有如下可选项

center居中对齐
left左对齐
right右对齐

默认换行符为"\n", 可以通过设置CANVAS_2D_TEXT_NEWLINE默认属性来修改默认值

                    
                        node.set("label_align", "left");

                        gView.set("label_align", "right"); //全局设置
                        z.setDefault("CANVAS_2D_TEXT_NEWLINE","\n\r"); //修改换行符

label_styleobjectLabel标签渲染样式(自定义), 默认为null

请参考, CanvasRenderingContext2D

                    
                        node.set("label_style",  {
                            shadowColor: "red",
                            shadowBlur: 10,
                            shadowOffsetX: 5,
                            shadowOffsetY: 5
                        });
                        gView.set("label_style", {shadowColor: "red"}); //全局设置

label_box_paddingnumberLabel标签文本框的内边距, 默认为0

                    
                        node.set("label_box_padding", 2);

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

文字填充样式

label_fillstringLabel标签文字的填充样式

填充样式可以是颜色、渐变色和图片纹理, 请参考填充和画笔样式#fill

                    
                        node.set("label_fill", "linear_gradient");                //渐变类型
                        node.set("label_fill_gradient_direction", "lt_to_rb");    //渐变类型
                        node.set("label_fill_gradient_colors", {                  //渐变颜色
                            0: "black",     //起始颜色为black
                            1: "red"        //结束颜色为red
                        });

label_fill_gradient_directionstringLabel标签文字渐变填充的颜色渐变方向

请参考填充和画笔样式#fill-gradient-direction

                    
                        node.set("fill_gradient_direction", "lt_to_rb");

label_fill_gradient_colorsobjectLabel标签文字渐变填充的梯度颜色对象

渐变颜色由百分比位置(0-1)和颜色组成, 请参考填充和画笔样式#fill-gradient-colors

                    
                       node.set("label_fill_gradient_colors", {
                            0: "black",     //起始颜色为black
                            1: "red"        //结束颜色为red
                        });

label_fill_pattern_imagestring|imgLabel标签文字纹理填充的图片,

属性值可以是注册的图片, 也可以是img对象, 请参考填充和画笔样式#fill-pattern-image

                    
                        node.set("label_fill_pattern_image", "windmill");

文字画笔样式

label_strokestringLabel标签文字的画笔样式

画笔样式可以是颜色、渐变色和图片纹理, 请参考填充和画笔样式#stroke

                    
                        node.set("label_stroke", "LightSkyBlue");               //颜色

                        node.set("label_stroke", "linear_gradient");            //渐变类型
                        node.set("label_fill_gradient_direction", "lt_to_rb");  //渐变方向
                        node.set("label_fill_gradient_colors", {                //渐变颜色
                            0: "black",     //起始颜色为black
                            1: "red"        //结束颜色为red
                        });

label_stroke_gradient_directionstringLabel标签文字渐变绘制的颜色渐变方向

请参考填充和画笔样式#stroke-gradient-direction

                    
                        node.set("label_stroke_gradient_direction","lt_to_rb");

label_stroke_gradient_colorsobjectLabel标签文字画笔渐变样式的梯度颜色对象,

渐变颜色由百分比位置(0-1)和颜色组成, 请参考填充和画笔样式#stroke-gradient-colors

                    
                       node.set("label_stroke_gradient_colors", {
                            0: "black",     //起始颜色为black
                            0.5: "red",     //中间50%位置的颜色为red
                            1: "white"      //结束颜色为white
                        });

label_stroke_line_widthnumberLabel标签文字画笔的线宽

请参考填充和画笔样式#stroke-stroke-line-width

                    
                       node.set("label_stroke_line_width", 2);

label_stroke_line_dasharrayLabel标签文字画笔的虚线模式参数

使用一组值来指定描述模式的线和间隙的交替长度, 请参考填充和画笔样式#stroke-stroke-line-dash

                    
                       node.set("label_stroke_line_dash", [6, 3]);

label_stroke_line_dash_offsetnumberLabel标签文字画笔虚线的偏移量

可以通过设置offset实现动画效果, 请参考填充和画笔样式#stroke-stroke-line-dash-offset

                    
                       node.set("label_stroke_line_dash_offset", 2);

文本框填充样式

label_box_fillstringLabel标签文本框的填充样式

填充样式可以是颜色、渐变色和图片纹理, 请参考填充和画笔样式#fill

                    
                        node.set("label_box_fill", "linear_gradient");                //渐变类型
                        node.set("label_box_fill_gradient_direction", "lt_to_rb");    //渐变类型
                        node.set("label_box_fill_gradient_colors", {                  //渐变颜色
                            0: "black",     //起始颜色为black
                            1: "red"        //结束颜色为red
                        });

label_box_fill_gradient_directionstringLabel标签文本框渐变填充的颜色渐变方向

请参考填充和画笔样式#fill-gradient-direction

                    
                        node.set("fill_gradient_direction", "lt_to_rb");

label_box_fill_gradient_colorsobjectLabel标签文本框渐变填充的梯度颜色对象

渐变颜色由百分比位置(0-1)和颜色组成, 请参考填充和画笔样式#fill-gradient-colors

                    
                       node.set("label_box_fill_gradient_colors", {
                            0: "black",     //起始颜色为black
                            1: "red"        //结束颜色为red
                        });

label_box_fill_pattern_imagestring|imgLabel标签文本框纹理填充的图片,

属性值可以是注册的图片, 也可以是img对象, 请参考填充和画笔样式#fill-pattern-image

                    
                        node.set("fill_pattern_image", "windmill");

文本框画笔样式

label_box_strokestringLabel标签文本框的画笔样式

画笔样式可以是颜色、渐变色和图片纹理, 请参考填充和画笔样式#stroke

                    
                        node.set("label_box_stroke", "LightSkyBlue");               //颜色

                        node.set("label_box_stroke", "linear_gradient");            //渐变类型
                        node.set("label_box_fill_gradient_direction", "lt_to_rb");  //渐变方向
                        node.set("label_box_fill_gradient_colors", {                //渐变颜色
                            0: "black",     //起始颜色为black
                            1: "red"        //结束颜色为red
                        });

label_box_stroke_gradient_directionstringLabel标签文本框渐变绘制的颜色渐变方向

请参考填充和画笔样式#stroke-gradient-direction

                    
                        node.set("label_box_stroke_gradient_direction","lt_to_rb");

label_box_stroke_gradient_colorsobjectLabel标签文本框画笔渐变样式的梯度颜色对象,

渐变颜色由百分比位置(0-1)和颜色组成, 请参考填充和画笔样式#stroke-gradient-colors

                    
                       node.set("label_box_stroke_gradient_colors", {
                            0: "black",     //起始颜色为black
                            0.5: "red",     //中间50%位置的颜色为red
                            1: "white"      //结束颜色为white
                        });

label_box_stroke_line_widthnumberLabel标签文本框画笔的线宽

请参考填充和画笔样式#stroke-stroke-line-width

                    
                       node.set("label_box_stroke_line_width", 2);

label_box_stroke_line_dasharrayLabel标签文本框画笔的虚线模式参数

使用一组值来指定描述模式的线和间隙的交替长度, 请参考填充和画笔样式#stroke-stroke-line-dash

                    
                       node.set("label_box_stroke_line_dash", [6, 3]);

label_box_stroke_line_dash_offsetnumberLabel标签文本框画笔虚线的偏移量

可以通过设置offset实现动画效果, 请参考填充和画笔样式#stroke-stroke-line-dash-offset

                    
                       node.set("label_box_stroke_line_dash_offset", 2);

Info提示

info_fontstringInfo提示的字体, 默认为浏览器默认字体

请参考CanvasRenderingContext2D.font

                    
                        node.set("info_font", "italic 600 24px sans-serif");

                        gView.set("info_font", "12px Arial, sans-serif"); //全局设置

info_offsetobjectInfo提示的偏移量

                    
                        node.set("info_offset", {x:10, y:20}});
                        gView.set("info_offset", 20); //全局设置

info_offset等价于info_offset_x+info_offset_y，不过info_offset的优先级较高，会优先使用

info_offset_xnumberInfo提示相对于默认位置沿x轴的横向偏移量

                    
                        node.set("info_offset_x", 10);

                        gView.set("info_offset_x", 20); //全局设置

info_offset_ynumberInfo提示相对于默认位置在y轴的纵向偏移量

                    
                        node.set("info_offset_y", 10);

                        gView.set("info_offset_y", 20); //全局设置

info_alignstringInfo提示多行文字的对齐方式, 默认为center

有如下可选项

center居中对齐
left左对齐
right右对齐

默认换行符为"\n", 可以通过设置CANVAS_2D_TEXT_NEWLINE默认属性来修改默认值

                    
                        node.set("info_align", "left");

                        gView.set("info_align", "right"); //全局设置
                        z.setDefault("CANVAS_2D_TEXT_NEWLINE","\n\r"); //修改换行符

info_styleobjectInfo提示的渲染样式(自定义), 默认为null

请参考CanvasRenderingContext2D

                    
                        node.set("info_style",  {
                            shadowColor: "red",
                            shadowBlur: 10,
                            shadowOffsetX: 5,
                            shadowOffsetY: 5
                        });
                        gView.set("info_style", {shadowColor: "red"}); //全局设置

info_box_paddingnumberInfo提示文本框的内边距, 默认为0

                    
                        node.set("info_box_padding", 2);

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

文字填充样式

info_fillstringInfo提示文字的填充样式

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

                    
                        node.set("info_fill", "linear_gradient");                //渐变类型
                        node.set("info_fill_gradient_direction", "lt_to_rb");    //渐变类型
                        node.set("info_fill_gradient_colors", {                  //渐变颜色
                            0: "black",     //起始颜色为black
                            1: "red"        //结束颜色为red
                        });

info_fill_gradient_directionstringInfo提示文字渐变填充的颜色渐变方向

请参考填充和画笔样式#fill-gradient-direction

                    
                        node.set("fill_gradient_direction", "lt_to_rb");

info_fill_gradient_colorsobjectInfo提示文字渐变填充的梯度颜色对象

渐变颜色由百分比位置(0-1)和颜色组成, 请参考填充和画笔样式#fill-gradient-colors

                    
                       node.set("info_fill_gradient_colors", {
                            0: "black",     //起始颜色为black
                            1: "red"        //结束颜色为red
                        });

info_fill_pattern_imagestring|imgInfo提示文字纹理填充的图片,

属性值可以是注册的图片, 也可以是img对象, 请参考填充和画笔样式#fill-pattern-image

                    
                        node.set("info_fill_pattern_image", "windmill");

文字画笔样式

info_strokestringInfo提示文字的画笔样式

画笔样式可以是颜色、渐变色和图片纹理, 请参考填充和画笔样式#stroke

                    
                        node.set("info_stroke", "LightSkyBlue");               //颜色

                        node.set("info_stroke", "linear_gradient");            //渐变类型
                        node.set("info_fill_gradient_direction", "lt_to_rb");  //渐变方向
                        node.set("info_fill_gradient_colors", {                //渐变颜色
                            0: "black",     //起始颜色为black
                            1: "red"        //结束颜色为red
                        });

info_stroke_gradient_directionstringInfo提示文字渐变绘制的颜色渐变方向

请参考填充和画笔样式#stroke-gradient-direction

                    
                        node.set("info_stroke_gradient_direction","lt_to_rb");

info_stroke_gradient_colorsobjectInfo提示文字画笔渐变样式的梯度颜色对象,

渐变颜色由百分比位置(0-1)和颜色组成, 请参考填充和画笔样式#stroke-gradient-colors

                    
                       node.set("info_stroke_gradient_colors", {
                            0: "black",     //起始颜色为black
                            0.5: "red",     //中间50%位置的颜色为red
                            1: "white"      //结束颜色为white
                        });

info_stroke_line_widthnumberInfo提示文字画笔的线宽

请参考填充和画笔样式#stroke-stroke-line-width

                    
                       node.set("info_stroke_line_width", 2);

info_stroke_line_dasharrayInfo提示文字画笔的虚线模式参数

使用一组值来指定描述模式的线和间隙的交替长度, 请参考填充和画笔样式#stroke-stroke-line-dash

                    
                       node.set("info_stroke_line_dash", [6, 3]);

info_stroke_line_dash_offsetnumberInfo提示文字画笔虚线的偏移量

可以通过设置offset实现动画效果, 请参考填充和画笔样式#stroke-stroke-line-dash-offset

                    
                       node.set("info_stroke_line_dash_offset", 2);

文本框填充样式

info_box_fillstringInfo提示文本框的填充样式

填充样式可以是颜色、渐变色和图片纹理, 请参考填充和画笔样式#fill

                    
                        node.set("info_box_fill", "linear_gradient");                //渐变类型
                        node.set("info_box_fill_gradient_direction", "lt_to_rb");    //渐变类型
                        node.set("info_box_fill_gradient_colors", {                  //渐变颜色
                            0: "black",     //起始颜色为black
                            1: "red"        //结束颜色为red
                        });

info_box_fill_gradient_directionstringInfo提示文本框渐变填充的颜色渐变方向

请参考填充和画笔样式#fill-gradient-direction

                    
                        node.set("fill_gradient_direction", "lt_to_rb");

info_box_fill_gradient_colorsobjectInfo提示文本框渐变填充的梯度颜色对象

渐变颜色由百分比位置(0-1)和颜色组成, 请参考填充和画笔样式#fill-gradient-colors

                    
                       node.set("info_box_fill_gradient_colors", {
                            0: "black",     //起始颜色为black
                            1: "red"        //结束颜色为red
                        });

info_box_fill_pattern_imagestring|imgInfo提示文本框纹理填充的图片,

属性值可以是注册的图片, 也可以是img对象, 请参考填充和画笔样式#fill-pattern-image

                    
                        node.set("fill_pattern_image", "windmill");

文本框画笔样式

info_box_strokestringInfo提示文本框的画笔样式

画笔样式可以是颜色、渐变色和图片纹理, 请参考填充和画笔样式#stroke

                    
                        node.set("info_box_stroke", "LightSkyBlue");               //颜色

                        node.set("info_box_stroke", "linear_gradient");            //渐变类型
                        node.set("info_box_fill_gradient_direction", "lt_to_rb");  //渐变方向
                        node.set("info_box_fill_gradient_colors", {                //渐变颜色
                            0: "black",     //起始颜色为black
                            1: "red"        //结束颜色为red
                        });

info_box_stroke_gradient_directionstringInfo提示文本框渐变绘制的颜色渐变方向

请参考填充和画笔样式#stroke-gradient-direction

                    
                        node.set("info_box_stroke_gradient_direction","lt_to_rb");

info_box_stroke_gradient_colorsobjectInfo提示文本框画笔渐变样式的梯度颜色对象,

渐变颜色由百分比位置(0-1)和颜色组成, 请参考填充和画笔样式#stroke-gradient-colors

                    
                       node.set("info_box_stroke_gradient_colors", {
                            0: "black",     //起始颜色为black
                            0.5: "red",     //中间50%位置的颜色为red
                            1: "white"      //结束颜色为white
                        });

info_box_stroke_line_widthnumberInfo提示文本框画笔的线宽

请参考填充和画笔样式#stroke-stroke-line-width

                    
                       node.set("info_box_stroke_line_width", 2);

info_box_stroke_line_dasharrayInfo提示文本框画笔的虚线模式参数

使用一组值来指定描述模式的线和间隙的交替长度, 请参考填充和画笔样式#stroke-stroke-line-dash

                    
                       node.set("info_box_stroke_line_dash", [6, 3]);

info_box_stroke_line_dash_offsetnumberInfo提示文本框画笔虚线的偏移量

可以通过设置offset实现动画效果, 请参考填充和画笔样式#stroke-stroke-line-dash-offset

                    
                       node.set("info_box_stroke_line_dash_offset", 2);