antv x6基类cell第六讲-通过控制面板修改属性

最新推荐文章于 2024-05-09 08:50:28 发布
最新推荐文章于 2024-05-09 08:50:28 发布
阅读量4.6k 收藏 11
点赞数 3
分类专栏： antV-X6 文章标签： javascript 前端 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44213308/article/details/124086289
版权

1、效果

 

2、实现

<template>
  <a-row :gutter="[8,8]">
    <a-button @click="addCustomNode">自定义节点</a-button>
    <a-button @click="addNodeAndEdge">构造函数来创建节点/边</a-button>
    <a-button @click="test01">test01：react内置节点+selector选择器</a-button>
    <a-button @click="test02">test02：Node.Metadata+标签+selector选择器</a-button>
    <a-button @click="test03">test03：Node.Metadata+标签+selector选择器+群组选择器</a-button>
    <a-button @click="test04">test04：Node.Metadata例子</a-button>
    <a-button @click="test05">test05：使用 CSS 来定制样式</a-button>
    <a-button @click="test06">test06：鼠标点击修改内容</a-button>
    <a-button @click="test07">test07：通过控制面板修改属性</a-button>
    <a-button @click="test08">test08：toJSON</a-button>

  </a-row>

  <a-row :gutter="[16,8]" style="padding-top: 10px">
    <a-col :span="20">
     <div id="container"></div>
    </a-col>
    <!--1、右侧工具栏 start-->
    <a-col :span="4">
      <a-form :model="formState">
        <a-form-item label="标题" v-show="formState.labelText !== null">
          <a-input v-model:value="formState.labelText" @change="onNameChange"/>
        </a-form-item>

        <a-form-item label="用户" v-show="formState.userId !== null">
          <a-select v-model:value="formState.userId" placeholder="请选择用户" @change="onUserIdChange">
            <a-select-option :value = 1 >张三</a-select-option>
            <a-select-option :value = 2 >李四 </a-select-option>
          </a-select>
        </a-form-item>

        <a-form-item label="角色" v-show="formState.roleId !== null">
          <a-select v-model:value="formState.roleId" placeholder="请选择角色" @change="onRoleIdChange">
            <a-select-option :value = 1 > 管理员1 </a-select-option>
            <a-select-option :value = 2 > 管理员2 </a-select-option>
          </a-select>
        </a-form-item>
      </a-form>
    </a-col>
    <!--1、右侧工具栏 end-->
  </a-row>
</template>

<script lang="ts">
import {defineComponent, onMounted, reactive, UnwrapRef, nextTick} from "vue";
import {Graph, Shape, Node, Cell} from '@antv/x6';

// formState 定义
interface FormState {
  labelText: any;
  userId: any;
  roleId: any;
}

export default defineComponent({
  setup() {
    let graph: Graph;
    let curCel: Cell | null;

    // 2、formState 定义
    const formState: UnwrapRef<FormState> = reactive({
      labelText: null,
      userId: null,
      roleId: null
    });


    onMounted(() => {
      graph = new Graph({
        container: document.getElementById('container') as HTMLElement,
        height: 600,
        background: {
          color: '#fffbe6', // 设置画布背景颜色
        },
        grid: {
          size: 10,      // 网格大小 10px
          visible: true, // 渲染网格背景
        },
      });

    })

    // 3、节点点击事件，需保证页面渲染完成
    nextTick(()=>{
      graph.on('cell:click', ({cell}) => {
        console.log(cell.getAttrs())
        // 将之前被选中的节点样式清除
        curCel?.attr('body/stroke', null)
        // 新的节点赋值
        curCel = cell
        // 新的节点边框样式设置为红色
        curCel?.attr('body/stroke', "red")
        // 将labelText进行赋值（labelText有可能在text/text中，也有可能在label/text中）
        let labelText = null;
        if (cell.getAttrs()?.text?.text) labelText = cell.getAttrs()?.text?.text
        if (cell.getAttrs()?.label?.text) labelText = cell.getAttrs()?.label?.text
        formState.labelText = labelText;
        // 将cell data中userId进行赋值
        formState.userId = cell.getData()?.userId
        // 将cell data中roleId进行赋值
        formState.roleId = cell.getData()?.roleId
      });
    })

    // label/text设置
    const onNameChange = () => {
      // cell中的attr参数赋值
      curCel?.attr('label/text', formState.labelText)

      // rect.attr('label/text', 'hello');
      // // 等同于
      // rect.attr('label', {
      //   text: 'hello'
      // });
      // // 等同于
      // rect.attr({
      //   label: {
      //     text: 'hello'
      //   }
      // });
      // // 当传入的属性值为 null 时可以移除该属性。
      // rect.attr('label/text', null);
    }

    // data中的userId设置
    const onUserIdChange = () =>{
      curCel?.setData({
        userId: formState.userId
      })
    }
    // data中的roleId设置
    const onRoleIdChange = () =>{
      curCel?.setData({
        roleId: formState.roleId
      })
    }

    const addCustomNode = () =>{
      const customNode: Node = new Node({
        id: "customNodeId",
        shape: "customNode",
        x: 400,
        y: 350,
        width: 200,
        height: 60,
        markup: [
          {
            tagName: 'rect',
            selector: 'body',
          },
          {
            tagName: 'text',
            selector: 'label',
          },
        ],
        attrs: {
          text: {
            // fill: '#000',
            fontSize: 14,
            textAnchor: 'middle',
            textVerticalAnchor: 'middle',
          },
          rect: {
            ref: 'label',
            stroke: '#000',
            fill: '#fff',
            rx: 3,
            ry: 3,
            refWidth: 100,
            refHeight: 100,
            refX: -50,
            refY: -50,
          },
          label: {
            text: "自定义node", // 文字
          },
        },
      });
      graph.addNode(customNode);
    }

    const addNodeAndEdge = ()=>{
      const rect = new Shape.Rect({
        id: 'node1',
        x: 10,
        y: 40,
        width: 100,
        height: 40,
        label: 'rect',
        zIndex: 2,
        attrs: {
          // 指定 rect 元素的样式
          body: {
            stroke: '#000', // 边框颜色
            fill: '#fff',   // 填充颜色
          },
          // 指定 text 元素的样式
          label: {
            text: 'rect', // 文字
            fill: '#333', // 文字颜色
          },
        },
      });
      const circle = new Shape.Circle({
        id: 'node2',
        x: 200,
        y: 30,
        width: 60,
        height: 60,
        label: 'circle',
        zIndex: 2,
      });
      const edge = new Shape.Edge({
        id: 'edge1',
        source: rect,
        target: circle,
        zIndex: 1,
      });
      graph.addNode(rect);
      graph.addNode(circle);
      graph.addEdge(edge);
    }

    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',   // 填充颜色
            refWidth: '100%',
            refHeight: '100%',
          },
          // 指定 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);

    }

    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.addNode(metadata);
    }

    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',
          },
          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);
    }

    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);
    }

    const test06 = () =>{
      const textBlock = new Shape.TextBlock({
        shape: 'text-block', // 使用 text-block 渲染 https://x6.antv.vision/zh/examples/node/native-node#text-block
        text: `There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.`,
        attrs: {
          label:{
            contenteditable: "true",
          },
          body: {
            fill: '#efdbff',
            stroke: '#9254de',
            rx: 4,
            ry: 4,
          },
        },
        x: 300,      // Number，必选，节点位置的 x 值
        y: 40,      // Number，必选，节点位置的 y 值
        width: 360,   // Number，可选，节点大小的 width 值
        height: 120,  // Number，可选，节点大小的 height 值
      });

      graph.addNode(textBlock);

      // (graph as Graph).on('node:contextmenu', ({ cell, view }) => {
      //   console.log(view.container);
      //   const elem = view.container.querySelector('label') as unknown as HTMLElement
      //   if (elem) {
      //     elem.focus()
      //   }
      //   const onBlur = () => {
      //     console.log(elem.innerText)
      //     // cell.attr('text/text', elem.innerText)
      //     cell.attr('label/text', elem.innerText)
      //   }
      //   elem.addEventListener('blur', () => {
      //     onBlur()
      //     elem.removeEventListener('blur', onBlur)
      //   })
      // })
    }

    const test07 = () =>{
      const metadata: Node.Metadata  = {
        x: 300,
        y: 200,
        width: 200,
        height: 60,
        attrs: {
          // 指定 text 元素的样式
          label: {
            text: "rect", // 文字
            fill: 'blue', // 文字颜色
          },
        },
        data: {
          userId: 1,
          roleId: 1,
        }
      };
      graph.addNode(metadata);
    }

    const test08 = () => {
      console.log(graph.toJSON())
    }

    return {
      formState,
      onNameChange,
      onUserIdChange,
      onRoleIdChange,

      addCustomNode,
      addNodeAndEdge,
      test01,
      test02,
      test03,
      test04,
      test05,
      test06,

      test07,
      test08,
    }
  }
})
</script>

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

<每天一点>
关注
  • 3
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 5
    评论
专栏目录
使用antv/X6实现流程图（包括线条动画流动，路径标签，悬浮窗口等）快速搭建流程图，DAG图等初始实践记录
南七小僧的学海无涯
05-28 2508
可能悬浮窗的位置会有问题，我这里以节点的位置设定悬浮窗的位置，但节点位置因为缩放等原因已经发生改变，我们就需要获取对应的真实节点位置，这个antv/X6有教程细节，这里不在赘述，[画布位置变化]，(https://x6.antv.vision/zh/docs/api/graph/coordinate#graphtolocal)"我热爱我的祖国我热爱我的祖国我热爱我的祖国我热爱我的祖国我热爱我的祖国我热爱我的祖国我热爱我的祖国我热爱我的祖国我热爱我的祖国我热爱我的祖国"
antV-X6-demo-master.zip
04-16
6. **Vue集成**：这个示例集还展示了如何将AntV X6与Vue.js框架完美结合，利用Vue的数据驱动特性，实现图形与数据的实时同步。 7. **图表组合**：如何将X6与其他AntV图表库（如G2Plot、G6）结合，构建更复杂的可视...
antv/x6 实现框组功能
bighead的博客
05-19 3394
if (!return;x: x0,y: y0,},attrs: {text: {},},},data: {..., // 用户自定义数据},});cells});});上述代码定义了一个 group 函数，用于创建一个组节点。函数的主要逻辑如下：获取当前选中的 cells，如果没有选中任何cell，则直接返回。使用 graph.batchUpdate 方法批量更新图形，在更新过程中禁用自动刷新。
antV X6的简要使用教程
最新发布
爱蹦跶的全栈大A阿
05-09 1511
在我们的日常开发工作中，我们经常需要构建复杂的交互式图表。这是一项挑战，因为我们需要处理大量的数据，同时还要保证图表的可读性和用户体验。幸运的是，有一些强大的工具可以帮助我们完成这项任务，antv x6就是其中之一。在这篇博客中，我将向你介绍如何使用antv x6构建交互式图表，并提供一些代码示例。​antv x6还允许我们创建自定义的节点。
“Error: Ensure the container of the graph is specified and valid“：antv-x6报错
weixin_44213308的博客
12-16 5775
antv-X6快速上手报错： 发现原因是因为： 正确的代码如下： <template> <div id="container"> </div> </template> <script> import { Graph } from '@antv/x6'; const data = { // 节点 nodes: [ { id: 'node1', // String，可选，节点的唯一标识
antv-x6
a1770029的博客
09-17 5790
AntV X6（流程图的制作dome） JQuery/js Bootstrap HTML/CSS 通过拖拽图形到画布，并且可以删除和修改图形标签，并且加入了导入和导出功能。 图片展示： 代码： HTML部分： <!-- HTML 部分 --> <div class="app-btns"> <div> <div id="head"> <div data-type=
Antv X6-初次使用（安装&引入、简单配置）
m0_50911095的博客
06-28 7137
Vue2+Antv X6
Antv X6 动态连线
hongtoushan的博客
07-23 1万+
antv x6的使用
antv-x6-master.zip
05-17
【标题】"antv-x6-master.zip" 是一个包含antv-x6库示例代码的压缩包，适用于Vue2框架。这个压缩包主要是为了展示如何在Vue2项目中集成和使用AntV X6，它是一个强大的JavaScript图形编辑器库，用于构建可交互的数据...
antv/x6封装vue2.0源码
05-13
AntV X6 提供了丰富的 API 和事件系统来实现连线的动态创建、修改和删除。Vue 可以管理这些操作的状态，如拖动过程中预览连线、释放鼠标时确认创建或取消等。 4. **拖拽生成功能：** 拖拽生成是指用户可以通过拖动...
Vue+Antv X6绘制流程图demo
07-05
在Vue项目中使用AntV X6组件库绘制流程图，需要实现以下需求： 需求1：左侧菜单中的模块可以拖拽进入画布中生成对应的流程图模块 需求2：流程图中的节点之间可以进行连线交互 需求3：点击对应的节点后可以进行操作...
vue3+vite+ts+antv/x6搭建的流程图编辑页面
03-26
这个编辑页面中，可以根据自己的需求，轻松创建和编辑各种形状的节点，包括矩形、圆形、菱形等，甚至还可以自定义节点的样式和属性。同时，还提供了一个拖拽组件栏，用户只需简单拖拽，即可将所需的组件添加到流程图...
AntV X6的安装与搭建
笑到世界都狼狈的博客
04-18 5383
Antv X6的安装与搭建
了解AntV/x6
热门推荐
weixin_73416102的博客
03-26 1万+
X6 是基于 HTML 和 SVG 的图编辑引擎，提供低成本的定制能力和开箱即用的内置扩展，方便我们快速搭建 DAG 图、ER 图、流程图、血缘图等应用。
初识antvX6
qq_52965813的博客
12-08 2789
X6 是基于 HTML 和 SVG 的图编辑引擎，提供低成本的定制能力和开箱即用的内置扩展，方便我们快速搭建 DAG 图、ER 图、流程图、血缘图等应用。
AntV X6制作画板工具（图形，线段，图片上传）
qq_38980678的博客
07-31 1798
使用upload上传组件时，需要在接口调用成功之后的函数中进行图片展示，action调用接口，formatter配合拿取后端接口返回的图片数据2.upload内部只可包含一个标签元素否则会失效3.保存画布元素之后，可能会出现img的url丢失的情况，请提前做好存值准备4.使用input进行图片文件上传，需要将文件进行base64格式转换之后才可以在页面上成功展示（使用upload组件可忽略此条）...
AntV X6流程图绘制程序（官方示例纯javascript+html+css）
yao136的专栏
08-09 6434
纯javascript+html+css绘制流程图，使用antv x6
antvx6基础学习
qq_52685664的博客
05-04 735
【代码】antvx6基础学习。
antv x6怎么修改node
05-24
要修改AntV X6中的节点，您可以使用以下步骤： 1. 获取要修改的节点对象。您可以使用以下代码从画布中获取指定的节点对象： ```javascript const node = graph.getNodeById('nodeId'); ``` 其中，'nodeId'是节点的唯一标识符。 2. 修改节点的属性。例如，如果要修改节点的文本标签，可以使用以下代码： ```javascript node.prop('label/text', 'New Label'); ``` 您可以根据需要修改节点的其他属性，例如位置、大小、颜色等。 3. 更新节点。完成修改后，您需要调用以下代码来更新节点： ```javascript graph.updateNode(node); ``` 这将在画布上显示更新后的节点。 请注意，如果您想要自定义节点的样式和外观，您可以使用AntV X6的模板功能。模板允许您使用自定义的HTML和CSS来渲染节点。您可以查看AntV X6的文档以了解更多信息。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

<每天一点>

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值