react.js - fabricjs中每次移动一下object都刷新出两倍的数据，并且图形的渲染会加宽？

Question

复现链接

画布上有3个矩形，监听object:modified事件，拖拽移动物体，此时getObject事件获取到的数据会变成原来的2倍，明明画布上只有3个矩形但是却获取到6个，还有个奇怪的点，每次触发了object:modified事件，重绘后矩形都会变大一点，感觉是在原来的点上加上了2px的strokeWidth，怎么才能让这个绘制能正常呢，既不重复也不变大？

Answer 1

重复添加对象，加新的要先清一下画布

const objectModified = (e: fabric.IEvent<MouseEvent>, c: fabric.Canvas) => {    let rects = c.getObjects() as fabric.Rect[];    let result = rects.map((item) => {      let coords = JSON.parse(JSON.stringify(item.aCoords));      return {        x1: coords.tl.x / scale.current.x,        y1: coords.tl.y / scale.current.y,        x2: coords.br.x / scale.current.x,        y2: coords.br.y / scale.current.y      };    });    console.log("objectModified---result", result);    onChange?.(result);};const createRect = (    c: fabric.Canvas,    down_Point?: { x: number; y: number } | undefined,    up_Point?: { x: number; y: number } | undefined): any => {    // ... 其他代码 ...    const rect = new fabric.Rect({        top,        left,        width,        height,        fill: "transparent",        stroke: "#ffff01",        strokeWidth: 2,        strokeUniform: true  // 加这一行    });    c.add(rect);    downPoint = undefined;    upPoint = undefined;    return rect;};