Antv-x6 线条绘制、区域绘制（an线条工具快捷键）

该功能支持线条以及区域的绘制，包括线条和区域的编辑、取消当前点的绘制回退至上一个点等等

代码片段：

import '../../../../../flow/comps/style/css/animate.css;//此处 只是个线段的动画样式，可自行编写
import { Registry, BaseEdge, EdgeMetadata } from '../../../../core';
@Registry("custom-line")
export class CustomLine extends BaseEdge{
constructor(metadata?: EdgeMetadata){
super(metadata);
const pathStr: string = this.store.getByPath("path");
const path = pathStr.split(" ");
const pathVertices: any = [];
let allPath: any = [];
let vertices:any = [];//用来存放路径点
path.map((item, index) => {
var Regx = /^[A-Za-z]*$/;
if (Regx.test(item)) {
allPath.push(index)
 }
 })
allPath.map((item,index) => {
pathVertices.push(path.slice(item,allPath[index+1]))
 })
pathVertices.map((item, ind) => {
if (ind == pathVertices.length - 1) return;
vertices.push({
x: parseInt(item[item.length - 2]),
y: parseInt(item[item.length - 1])
 })
 })
this.setProp({
source:{
x: parseInt(path[1]),
y: parseInt(path[2]),
 },
target: {
x: parseInt(path[path.length - 2]),
y: parseInt(path[path.length - 1]),
 },
vertices: vertices,
 });
 }}
CustomLine.config({ attrs:{ line: { stroke: '#F59A23', strokeWidth:4, targetMarker: "classic", strokeDasharray: '5 5', opacity:1, style: { animation: 'ant-line 30s infinite linear', } }, }, connector: { name: 'rounded', args: { radius:1 } },});

代码片段：

import { PenTool, Graph, NodeMetadata, Shape, BaseEdge} from '@modules/graph/core';
import { CustomLine } from '../cells';
export class LineDraw extends PenTool{
  constructor(graph){
    super()
    this.init(graph)
  }

  protected init(graph: Graph){
    this.graph = graph;
    this.pen = this.createPen();
    document.addEventListener('keyup', (e) => {
      if (e.code == 'Escape') {
        graph.ui.uncheckToolBarItem("lineDraw");
        this.pen.clear();
        this.pen.end();
      }
    })

    this.pen.on("end", (path: string[][], pathBox: any) => {
      graph.ui.uncheckToolBarItem("lineDraw");
      path.pop(); ///不形成闭环
      return this.endOfPenLineDrawing(path, pathBox)
    });

    /// 注册到工具栏
    graph.ui
      .addToolBarItem({
        id: "lineDraw",
        icon: "i-dividing-line",
        tooltip: "线条绘制 | W",
        onClick: () => {
          this.pen.start();
          graph.ui.checkedToolBarItem("lineDraw");
        }
      })
      .bindHotkey("w", ()=>{
        this.pen.start();
      });
  }

  protected createPath(options: NodeMetadata){
    return new CustomLine({
      path: options.path
    });
  }
}

代码片段：

 protected endOfPenDrawing(path: string[][], pathBox: any) {
    const origin = this.graph.graphEngine.localToGraph(0, 0);
    const offsetX =  0 - origin.x;
    const offsetY =  0 - origin.y;
    const zoom = this.graph.graphEngine.zoom();
    const node = this.createPath({
      x: (pathBox.x / zoom) + (offsetX / zoom),
      y: (pathBox.y / zoom) + (offsetY / zoom),
      width: pathBox.width / zoom,
      height: pathBox.height / zoom,
      path: path.map(p => p.join(" ")).join(" "),
      attrs:{
        body:{
          strokeWidth: 1,
          stroke: '#F59A23',
          opacity:1
        }
      },
    });
    this.graph.addCell(node);
  }
  protected createPath(options: NodeMetadata): SuperNode | BaseEdge{
    return this.graph.createNode(
      Object.assign({
        shape: "path",
      }, options)
    );
  }