1. 主题切换

系统自带了两套主题： 明亮（DefaultLight) 和 暗色（DefaultDark)

// 使用样式系统
let styleSystem = stage.styleSystem;

// 切换到 ‘明亮’ 主题（默认生效的主题）
styleSystem.setTheme('DefaultLight');

// 切换到 ‘暗色’ 主题
styleSystem.setTheme('DefaultDark');

2. 定义样式类

styleSystem的 defClass() 方法可以定义样式类, 类似css的样式类，如下：

规则是 "." 开头， 例如: ".active"、".myStyle"。

// 使用样式系统
let styleSystem = stage.styleSystem;

// 定义一个类似‘玻璃’的样式
styleSystem.defClass('.glass', {
    // 边框
    borderColor: '#F0F0F0',
    borderRadius: 5,
    borderWidth: 1,

    // 边框与里面图形的内间距
    padding: 8,

    // 背景颜色
    backgroundColor: 'rgba(128,128,128,0.2)',

    // 图形绘制参数
    lineWidth: 1,
    strokeStyle: 'gray',

    // 字体大小
    fontSize: '12px',
});

// 使用上面定义好的样式
node.addClass('.glass');
link.addClass('.glass');

// 移除
node.removeClass('.glass');

3. css()方法设置样式

使用css()方法， 可以直接修改某个图元的样式：

node.css({
    fillStyle: 'blue',
    lineWidth: 2,
    //...
});

4. 样式优先级

将jtopo的样式系统看做三层堆叠的结构。

优先级从低到为高：1. setTheme() 2. addClass() 3. css()

1. addClass() 里的定义优先级永远高于 setTheme() 主题中的设置。
2. css() 里的定义优先级永远高于 addClass() 的样式设置。
3. 样式发生覆盖时，优先级最高的生效, 与设置的 **先后顺序无关**。

应尽量使用 addClass()的方式，比较灵活。
demo中经常使用css() 是因为代码少且简单，实际生产中应多用 addClass()方式.

4.1. Node对象：

样式大部分属性命名和效果基本上都遵循了 Html5-CSS 和 Cavnas绘图属性定义：

1. 边框和背景的设置遵循 Html5-CSS,例如:

// 节点边框 和 背景
node.css({
    border:'1px solid gray',
    backgroundColor: 'green',
});

1. 内部的线条和图形填充等属性遵循 Canvas绘图定义,例如：

// 节点内部图形的填充 和 线条, setStyles和css功能完全等价，只是语义上做了区分:
node.setStyles({
    strokeStyle: 'red',
    fillStyle:'orange',
    lineWidth: 3
});

4.2. Link对象:

1. 统一遵循Cavnas绘图定义, 例如:

// 线条颜色 和 宽度
link.setStyles({
    strokeStyle: 'red',
    lineWidth: 3,
    lineDash: [5, 2]
});

Link对象没有边框和背景.

5. 更多示例

// 可以用类似css语法设置更多属性, 涉及语法详细可以参考CSS相关教程。
circleNode.css({
    // 边框
    borderWidth: 10,

    // 边框颜色
    borderColor: '#808080',

    // 图形填充颜色
    fillStyle: 'rgba(0,0,255,0.2)',

    // 背景颜色
    backgroundColor: 'rgba(0,128,0,0.5)',

    // 圆角, 流行的浏览器也支持数组: [5, 0, 5, 0], 可以给每一个角设置不同弧度
    borderRadius: 5,

    // 字体样式 字体大小 字体名称
    font: 'bold 11px sans-serif',

    // 文字颜色
    color: 'gray',

    // 文字在节点上的位置
    textPosition: 'center',

    // 文字左右对齐方式（水平方向）
    textAlign: 'center',    // 左右居中

    // 文字基线（垂直方向）
    textBaseline: 'middle'
});

6. 节点样式图解：

---

可以将图片单独打开放大查看.

7. 自定义主题

最低要求: 2.4.0 版本

// 基于默认主题('DefaultLight')，定义一个新的主题名字叫： MyTheme
let myTheme = stage.styleSystem.defTheme('DefaultLight', 'MyTheme');

// 查看定义
console.log(myTheme.getStyle('Layer'));
console.log(myTheme.getStyle('Node'));

// 自定义背景颜色 替换掉默认的背景网格
myTheme.setStyle('Layer', {
    background: '#efefef'
});
// 修改部分定义
myTheme.setStyle('Node', {
    borderColor: 'gray',
    borderWidth: 9,
    borderRadius: 3,
    backgroundColor: 'black',
    color: 'white',
    textPosition: 'center',
    textBaseline: 'middle',
});
myTheme.setStyle('Link', {
    strokeStyle: 'black',
    lineWidth: 3,
});

// Link上的标签
myTheme.setStyle('LinkLabel', {
    fontSize: '12px',
    fontWeight: 'bold italic',
    color: 'brown',
});

// Link上的箭头
myTheme.setStyle('LinkArrow', {
    fontSize: '12px',
    fontWeight: 'bold italic',
    color: 'brown',
});



// 应用
stage.styleSystem.setTheme('MyTheme');