antv x6基类cell第三讲—重写rect样式及样式优先级

1、react样式重写两种方式

const test01 = () => {
      const rect = new Shape.Rect({
        x: 10,
        y: 100,
        width: 100,
        height: 40,
        markup:[
          {
            tagName: 'rect',
            selector: 'body',
          },
          {
            tagName: 'text',
            selector: 'label',
          },
        ],
        attrs: {
          // 指定 rect 元素的样式
          body: {
            stroke: '#000', // 边框颜色
            fill: '#fff',   // 填充颜色
          },
          // 指定 text 元素的样式
          label: {
            text: 'rect', // 文字
            fill: 'blue', // 文字颜色
          },
        },
      });
      graph.addNode(rect);
    }

const test02 = () =>{
      const metadata: Node.Metadata  = {
        x: 10,
        y: 150,
        width: 200,
        height: 60,
        markup: [
          {
            tagName: 'rect',
            selector: 'body',
          },
          {
            tagName: 'text',
            selector: 'label',
          },
        ],
        attrs: {
          text: {
            fill: '#000',
            fontSize: 14,
            textAnchor: 'middle',
            textVerticalAnchor: 'middle',
            pointerEvents: 'none',
          },

          rect: {
            fill: '#fff',
            rx: 3,
            ry: 3,
            refWidth: 1,
            refHeight: 1,
            refX: 0,
            refY: 0,
          },
          // 指定 rect 元素的样式
          body: {
            stroke: '#000', // 边框颜色
            fill: '#fff',   // 填充颜色
            refWidth: '100%',
            refHeight: '100%',
          },
          // 指定 text 元素的样式
          label: {
            text: 'rect', // 文字
            fill: 'blue', // 文字颜色
          },

        },
      };
      graph.addNode(metadata);
    }

2、样式优先级：selector > groupSelector > tagName

const test03 = () =>{
      const metadata: Node.Metadata  = {
        x: 10,
        y: 220,
        width: 200,
        height: 60,
        markup: [
          {
            tagName: 'rect',
            selector: 'body',
          },
          {
            tagName: 'text',
            selector: 'label',
            groupSelector: 'textGroup',
          },
          {
            tagName: 'text',
            selector: 'content',
            groupSelector: 'textGroup',
          },
        ],
        attrs: {
          body: {
            stroke: '#5F95FF',
            strokeWidth: 1,
            fill: 'rgba(95,149,255,0.05)',
          },
          label: {
            text: 'Node',
            refX: 40,
            refY: 14,
            // fill: 'rgba(0,0,0,0.85)',
            fontSize: 12,
            'text-anchor': 'start',
          },
          // 优先级最大
          content: {
            text: 'this is content text',
            refX: 40,
            refY: 38,
            fontSize: 12,
            // fill: 'red',
            'text-anchor': 'start',
          },
          // 优先级次之
          textGroup: {
            fill: 'rgba(0,0,0,0.6)',
          },
          // 标签 优先级最小
          // text:{
          //   text: 'this is content text',
          //   fill: '#5F95FF',
          // },
        },
      };

      (graph as Graph).addNode(metadata);
    }

antv x6基类cell第三讲_哔哩哔哩_bilibiliantv x6基类cell第三讲https://www.bilibili.com/video/BV1qr4y1p7p2?share_source=copy_web