设置小尺寸画布的问题

[marysyy1101]

设置100*100的画布，拖拽圆形到画布中，拖进来的元素宽高都远超出画布，无法适应画布

[Qiu-Jun]

设置100*100的画布，拖拽圆形到画布中，拖进来的元素宽高都远超出画布，无法适应画布

没记错的话添加图形的时候那个宽高写死了，解决办法在添加前获取workspace画布的宽高判断是否小于当前图片的，小于特殊处理下就好。有兴趣的话可以提交个pr

[marysyy1101]

图形

你好，我尝试在dragAddItem方法中添加了判断，当item.width小于workspace的宽度时，给item.width重新赋值，但是结果发现，最终改变的是元素选中框的尺寸，而不是图片，就出现了下面图上的情况，还请大佬指导 改动：

let workspace = this.canvas.getObjects().find((item) => item.id === 'workspace');
if (workspace) {
  const { width, height } = workspace; // 中间画布宽高
  if (item.width > width) {
    item.width = 100;  // 暂时写死100，测试用
    item.height = 100;
  }
}

效果：

[nihaojob]

你好，在第四行中，你的item是哪个元素？从你给的示例上看不出来item具体值什么。

[marysyy1101]

你好，在第四行中，你的item是哪个元素？从你给的示例上看不出来item具体值什么。

拖拽添加SVG：

const dragItem = (event: Event) => {
  const target = event.target as HTMLImageElement;
  const url = target.src;
  // 会有性能开销 dragAddItem复用更简洁
  fabric.loadSVGFromURL(url, (objects) => {
    const item = fabric.util.groupSVGElements(objects, {
      shadow: '',
      fontFamily: 'arial',
      id: uuid(),
      name: 'svg元素',
    });
    canvasEditor.dragAddItem(event, item);
  });
};

添加方法：

  dragAddItem(event: DragEvent, item: fabric.Object) {
    const { left, top } = this.canvas.getSelectionElement().getBoundingClientRect();
    if (event.x < left || event.y < top || item.width === undefined) return;

    const point = {
      x: event.x - left,
      y: event.y - top,
    };
    const pointerVpt = this.canvas.restorePointerVpt(point);
    let workspace = this.canvas.getObjects().find((item) => item.id === 'workspace');
    if (workspace) {
      const { width, height } = workspace; // 中间画布宽高
      if (item.width > width) {
        item.width = 100;
        item.height = 100;
      }
    }
    item.left = pointerVpt.x - item.width / 2;
    item.top = pointerVpt.y;
    this.canvas.add(item);
    this.canvas.requestRenderAll();
  }

[nihaojob]

你好，在第四行中，你的item是哪个元素？从你给的示例上看不出来item具体值什么。

拖拽添加SVG：

const dragItem = (event: Event) => {
  const target = event.target as HTMLImageElement;
  const url = target.src;
  // 会有性能开销 dragAddItem复用更简洁
  fabric.loadSVGFromURL(url, (objects) => {
    const item = fabric.util.groupSVGElements(objects, {
      shadow: '',
      fontFamily: 'arial',
      id: uuid(),
      name: 'svg元素',
    });
    canvasEditor.dragAddItem(event, item);
  });
};

添加方法：

  dragAddItem(event: DragEvent, item: fabric.Object) {
    const { left, top } = this.canvas.getSelectionElement().getBoundingClientRect();
    if (event.x < left || event.y < top || item.width === undefined) return;

    const point = {
      x: event.x - left,
      y: event.y - top,
    };
    const pointerVpt = this.canvas.restorePointerVpt(point);
    let workspace = this.canvas.getObjects().find((item) => item.id === 'workspace');
    if (workspace) {
      const { width, height } = workspace; // 中间画布宽高
      if (item.width > width) {
        item.width = 100;
        item.height = 100;
      }
    }
    item.left = pointerVpt.x - item.width / 2;
    item.top = pointerVpt.y;
    this.canvas.add(item);
    this.canvas.requestRenderAll();
  }

使用item.scaleToWidth(100)，因为是一个SVG元素，直接设置width会有问题，你会提交PR吗？如果大佬有时间可以提交一个PR，没时间的话，我来fix这个问题

[marysyy1101]

拖拽添加SVG：

好的，感谢大佬，我试一下这个方法，我测试过没问题提交一下

[nihaojob]

@marysyy1101 怎么样了？大佬有时间PR上来吗？

[marysyy1101]

@marysyy1101 怎么样了？大佬有时间PR上来吗？

抱歉抱歉，处理其他问题去了，这个可能近期没法处理了，我只测试了svg元素的是OK的，但是其他元素，如：text,textbox等都存在相同的问题，没时间处理了

[nihaojob]

好的

[nihaojob]

https://github.com/nihaojob/vue-fabric-editor/commit/215a07ac2cb002666574c4a076f52ff9b0c51398