antv3 x6 基本语法-边、节点、图片处理（七）

示例：

 

 

 

节点属性vue页面

<el-drawer :title="title" :visible.sync="drawer">
      <!-- {{ cellType }} -->
      <el-form
        :model="form"
        ref="form"
        label-width="90px"
        label-position="left"
        style="margin-left: 20px"
      >
        <template v-if="cellType === 'node'">
          <el-form-item label="节点文本">
            <el-input
              v-model="form.text"
              @input="changeNode('labelText', form.text)"
            ></el-input>
          </el-form-item>
          <el-form-item label="字体颜色">
            <el-color-picker
              v-model="form.color"
              @change="changeNode('fontFill', form.color)"
            ></el-color-picker>
          </el-form-item>
          <el-form-item label="字体大小">
            <el-input-number
              v-model="form.fontSize"
              :min="10"
              :max="30"
              @input="changeNode('fontSize', form.fontSize)"
            ></el-input-number>
            </el-form-item>
          <el-form-item label="节点背景">
            <el-color-picker
              v-model="form.bgcolor"
              @change="changeNode('fill', form.bgcolor)"
            ></el-color-picker>
          </el-form-item>
          <el-form-item label="边框颜色">
            <el-color-picker
              v-model="form.stroke"
              @change="changeNode('stroke', form.stroke)"
            ></el-color-picker>
          </el-form-item>
          <el-form-item label="边框宽">
            <el-input-number
              v-model="form.strokeWidth"
              :min="1"
              :max="10"
              @input="changeNode('strokeWidth', form.strokeWidth)"
            ></el-input-number>
          </el-form-item>
        </template>

        <template v-if="cellType === 'edge'">
          <el-form-item label="边颜色">
            <el-color-picker
              v-model="form.lineStroke"
              @change="changeNode('lineStroke', form.lineStroke)"
            ></el-color-picker>
          </el-form-item>
        </template>
        <template v-if="cellType ==='image'">
          <el-form-item label="图片地址">
             <el-input
              v-model="form.imgUrl"
              @input="changeNode('imgUrl', form.imgUrl)"
            ></el-input>
          </el-form-item>
          <el-form-item label="文字描述">
             <el-input
              v-model="form.imageText"
              @input="changeNode('imageText', form.imageText)"
            ></el-input>
          </el-form-item>
        </template>
      </el-form>
    </el-drawer>

 

 

 点击节点处理【node,edge,image】

// 元素设置
      this.graph.on("cell:dblclick", ({ x, y, node, cell }) => {
        this.currentCell = cell;
        console.log("cell", cell);
        this.cellType = "";

        this.drawer = true;
        const isImageNode = cell.isNode() && cell.shape === "custom-image";
        if (isImageNode) {
           this.title = "图片节点设置";
          this.cellType = "image";
          this.form.imgUrl = cell.attr("image/href");
          this.form.imageText = cell.attr("label/text");

        } else if (cell.isNode()) {
          this.title = "节点设置";
          this.cellType = "node";
          console.log("node", node);
          this.form.text = cell.attr("label/text");
          this.form.color = cell.attr("text/fill");
          this.form.bgcolor = cell.attr("body/fill");
          this.form.stroke = cell.attr("body/stroke");
          this.form.strokeWidth = cell.attr("body/strokeWidth");
           this.form.fontSize = cell.attr("label/fontSize");

          // this.form.bgcolor = node.attr('text/')

          // 这可以写一些点击节点时和右侧表单交互的效果
        } else if (cell.isEdge()) {
          this.title = "边设置";
          this.cellType = "edge";
          this.form.lineStroke = cell.attr("line/stroke");
        }

 

点击节点处理

// 元素设置
      this.graph.on("cell:dblclick", ({ x, y, node, cell }) => {
        this.currentCell = cell;
        console.log("cell", cell);
        this.cellType = "";

        this.drawer = true;
        const isImageNode = cell.isNode() && cell.shape === "custom-image";
        if (isImageNode) {
           this.title = "图片节点设置";
          this.cellType = "image";
          this.form.imgUrl = cell.attr("image/href");
          this.form.imageText = cell.attr("label/text");

        } else if (cell.isNode()) {
          this.title = "节点设置";
          this.cellType = "node";
          console.log("node", node);
          this.form.text = cell.attr("label/text");
          this.form.color = cell.attr("text/fill");
          this.form.bgcolor = cell.attr("body/fill");
          this.form.stroke = cell.attr("body/stroke");
          this.form.strokeWidth = cell.attr("body/strokeWidth");
           this.form.fontSize = cell.attr("label/fontSize");

          // this.form.bgcolor = node.attr('text/')

          // 这可以写一些点击节点时和右侧表单交互的效果
        } else if (cell.isEdge()) {
          this.title = "边设置";
          this.cellType = "edge";
          this.form.lineStroke = cell.attr("line/stroke");
        }

 

节点属性更改attr

changeNode(type, value) {
      console.log(value);
      switch (type) {
        case "labelText":
          this.currentCell.attr("label/text", value);
          break;
        case "fontSize":
          this.currentCell.attr("label/fontSize", value);
          break;
        case "fontFill":
          this.currentCell.attr("label/fill", value);
          break;
        case "fill":
          this.currentCell.attr("body/fill", value);
          break;
        case "stroke":
          this.currentCell.attr("body/stroke", value);
          break;
        case "strokeWidth":
          this.currentCell.attr("body/strokeWidth", value);
          break;
        case "lineStroke":
          this.currentCell.attr("line/stroke", value);
          break;
        case "imgUrl":
          this.currentCell.attr("image/href", value);
          break;
        case "imageText":
          this.currentCell.attr("label/text", value);
          break;
      }