如果我想给线添加拖拽该怎么实现

[kangkang721]

大佬，我想给线添加锚点，并且可以进行拖拽进行拉动线，能不能给一个思路?

[guozhaolong]

你参照node的锚点去做事件处理这块，edge有getControlPoint方法用来获取锚点，根据你拖拽的锚点坐标生成连线

[426-330]

目前已经实现了线的重连，需求还要做线中心添加一个控制点，拖拽可以改变线的尺寸、轨迹，这个目前还没有思路，望指点

[guozhaolong]

这里你参照node的锚点去做啊，是一个新的连线锚点item对象，你的edge绘制的时候只需要判断锚点的坐标绘制edge即可，在连线锚点的item对象的dragmove事件中去触发graph.updateItem(edge)不停的重新绘制edge

[426-330]

重连是这样做的，但是线中心添加一个控制点，拖拽可以改变线的尺寸、轨迹还没有想明白

[guozhaolong]

额，线的绘制会触发getControlPoint方法，这个controlPoint就是你的控制点，你只要改变controlPoint的坐标触发edge的重绘就可以

[jaryway]

我也想实现这个功能！

@guozhaolong 你平时开发是怎么调试的？每次写完都 build 一次，然后重启 example ？ 为什么不直接在example 中引 src 的代码，这样不是更方便调试吗？

[guozhaolong]

我也想这样调试，只不过配置不对webpack，我又懒得去学webpack

[jaryway]

昨天捣鼓了一下，可以修改 example 的 config.ts 文件， 可以让 example 引 src 的代码。

// config.ts
import path from 'path';
import { defineConfig } from 'umi';

const srcPath = path.resolve(__dirname, '../../src');
const assetsPath = path.resolve(__dirname, '../../assets');

export default defineConfig({
  base: '/wfd',
  publicPath: '/wfd/',
  alias: {
    // 修正 svg 等资源文件的路径
    '../assets': path.resolve(__dirname, '../../assets'),
  },

  chainWebpack: (config) => {
    // 找不到文件去 src 和 assets 中查找
    config.resolve.modules.add(srcPath).add(assetsPath);
    // 让 umi 识别 src 中文件
    config.module.rule('ts-in-node_modules').include.add(srcPath).add(assetsPath).end();

    return config;
  },
});

但这会有一个问题是 iconfont.css 文件 在build的时候是以 css modules 的方式编译，而 example 中的 umi 配置是当文件以 .module.css 或者 ?modules结尾的时候才会对文件启用 css modules，从而导致 example 启动后图标显示不出来。你要统一一下，两者启用 css modules 的配置！ @guozhaolong

[lily77hj]

请问这个功能实现了吗？