antv x6基类cell第四讲-矩形自定义与css定制样式

1、效果

2、自定义矩形实例

const test04 = () =>{
      const metadata: Node.Metadata  = {
        x: 10,
        y: 300,
        width: 200,
        height: 60,
        markup: [
          {
            tagName: 'rect',// 矩形
            selector: 'body',
          },
          {
            tagName: 'image',// 图片
            selector: 'image',
          },
          {
            tagName: 'text', // 文本
            selector: 'label',
          },
          {
            tagName: 'text',
            selector: 'text',
          },
        ],
        attrs: {
          body: {
            stroke: '#5F95FF',
            strokeWidth: 1,
            fill: 'rgba(95,149,255,0.05)',
          },
          image: {
            'xlink:href':
                'https://gw.alipayobjects.com/zos/antfincdn/FLrTNDvlna/antv.png',
            width: 16,
            height: 16,
            x: 12,
            y: 12,
          },
          label: {
            text: 'Node',
            refX: 40,
            refY: 14,
            fill: 'rgba(0,0,0,0.85)',
            fontSize: 12,
            'text-anchor': 'start',//start middle end
          },
          text: {
            text: 'this is content text',
            refX: 40,
            refY: 38,
            fontSize: 12,
            fill: 'rgba(0,0,0,0.6)',
            'text-anchor': 'start',
          },
        },
      };
      graph.addNode(metadata);
    }

3、使用 CSS 来定制样式

<div id="container"></div>

const test05 = () =>{
      const metadata: Node.Metadata  = {
        x: 10,
        y: 370,
        width: 200,
        height: 60,
        markup: [
          {
            tagName: 'rect',
            selector: 'body',
          },
          {
            tagName: 'text',
            selector: 'label',
          },
        ],
        attrs: {
          text: {
            fill: '#000',
            // text: 'rect',
            fontSize: 14,
            textAnchor: 'middle',
            textVerticalAnchor: 'middle',
            pointerEvents: 'auto',
            // class: 'x6-edit-text',
          },
          rect: {
            class: 'markupTest05Rect',
            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);
    }

/*.x6-node rect*/
#container >>> .markupTest05Rect{
  fill: #2ECC71;
  /*stroke: #000;*/
}

antv x6基类cell第四讲-矩形自定义与css定制样式_哔哩哔哩_bilibiliantv x6基类cell第四讲-矩形自定义与css定制样式https://www.bilibili.com/video/BV1VY411E7ec?share_source=copy_web