把下面的代码改成 vue3 ,const dragGraph = function({ x = 30, y = 30, w, h, type, text, fontSize = 20, fontFamily = null, activeFont = null, color = '#000000', colorName = '黑色', url = null, rotate = 0, sourceId = null, selected = true }, canvas, factor) { console.log('加载配置', canvas); if (type === 'text') { canvas.setFontSize(fontSize); canvas.font = `${fontSize}px ${fontFamily || 'sans-serif'}`; const textWidth = canvas.measureText(text).width; const textHeight = fontSize + 10; proxy.centerX = x + textWidth / 2; proxy.centerY = y + textHeight / 2; proxy.w = textWidth; proxy.h = textHeight; } else { proxy.centerX = x + w / 2; proxy.centerY = y + h / 2; proxy.w = w; proxy.h = h; } proxy.x = x; proxy.y = y; // 4个顶点坐标 proxy.square = [ [proxy.x, proxy.y], [proxy.x + proxy.w, proxy.y], [proxy.x + proxy.w, proxy.y + proxy.h], [proxy.x, proxy.y + proxy.h] ]; proxy.fileUrl = url; const fileUrl = url; proxy.text = text; proxy.fontSize = fontSize; proxy.fontFamily = fontFamily; proxy.color = color; proxy.ctx = canvas; proxy.rotate = rotate; proxy.type = type; proxy.selected = selected; proxy.factor = factor; proxy.sourceId = sourceId; proxy.MIN_WIDTH = 20; proxy.MIN_FONTSIZE = 10; };

由于Vue 3使用了Composition API而不是Options API，需要将该函数改写成一个JS模块并导出。代码如下：

export const dragGraph = ({ 
  x = 30, 
  y = 30, 
  w, 
  h, 
  type, 
  text, 
  fontSize = 20, 
  fontFamily = null, 
  activeFont = null, 
  color = '#000000', 
  colorName = '黑色', 
  url = null, 
  rotate = 0, 
  sourceId = null, 
  selected = true 
}, canvas, factor) => {
  console.log('加载配置', canvas);
  
  const proxy = {
    x,
    y,
    w: 0,
    h: 0,
    centerX: 0,
    centerY: 0,
    square: [],
    fileUrl: '',
    text,
    fontSize,
    fontFamily,
    color,
    ctx: canvas,
    rotate,
    type,
    selected,
    factor,
    sourceId,
    MIN_WIDTH: 20,
    MIN_FONTSIZE: 10
  };

  if (type === 'text') {
    canvas.setFontSize(fontSize);
    canvas.font = `${fontSize}px ${fontFamily || 'sans-serif'}`;
    const textWidth = canvas.measureText(text).width;
    const textHeight = fontSize + 10;
    proxy.centerX = x + textWidth / 2;
    proxy.centerY = y + textHeight / 2;
    proxy.w = textWidth;
    proxy.h = textHeight;
  } else {
    proxy.centerX = x + w / 2;
    proxy.centerY = y + h / 2;
    proxy.w = w;
    proxy.h = h;
  }

  // 4个顶点坐标
  proxy.square = [ 
    [proxy.x, proxy.y], 
    [proxy.x + proxy.w, proxy.y], 
    [proxy.x + proxy.w, proxy.y + proxy.h], 
    [proxy.x, proxy.y + proxy.h] 
  ];

  proxy.fileUrl = url;

  return proxy;
};

之后在Vue组件中导入该模块即可。