问SVG到backgroundImage和overlayImage
EN

Stack Overflow用户

提问于 2018-06-28 14:28:12

回答 1查看 676关注 0票数 0

我正在从fabric canvas中的URL加载SVG。我过滤我的SVG对象，将它们分成两组:第一组用作背景图像，另一组用作叠加图像。

代码如下：

fabric.loadSVGFromURL(
  site_url,
  (objects,options) => {
    const background = fabric.util.groupSVGElements(objects.filter(i => i.id.includes('background')), options)
    const overlay = fabric.util.groupSVGElements(objects.filter(i => i.id.includes('overlay')), options)
    background.scaleToWidth(canvas.getWidth())
    canvas.setBackgroundImage(background, () => canvas.renderAll())
    overlay.scaleToWidth(canvas.getWidth())
    canvas.setOverlayImage(overlay, () => canvas.renderAll())

  }, null, { crossOrigin: 'anonymous' },
)

以下是预期的结果：

这不管用。实际上，只有当background和overlay中的所有对象共享相同的大小时，这才能起作用。但由于他们没有这样做，这实际上导致了这种情况：

现在，如果我把代码改成这样：

fabric.loadSVGFromURL(
  site_url,
  (objects,options) => {
    const background = fabric.util.groupSVGElements(objects, options)
    background.scaleToWidth(canvas.getWidth())
    canvas.setBackgroundImage(background, () => canvas.renderAll())

  }, null, { crossOrigin: 'anonymous' },
)

一切都很好，它将产生y第一个图像。我非常确定这是因为scaleToWidth被使用了两次，因此产生了不同大小的backgroundImage和overlayImage，但是我不知道如何在同时扩展overlayImage和backgroundImage的同时维护我的SVG，我也不认为我在文档中看到过任何关于loadSVGfromURL处理它的东西。

fabricjs

媒体处理1元起

智能、强大、全面的多媒体数据处理服务，助您提升媒体质量、降低成本，媒体处理套餐低至1元

回答 1

Stack Overflow用户

发布于 2018-07-05 14:39:38

好吧，如果有人挣扎，你必须确保用于背景和覆盖的对象共享相同的大小。如果没有，您将不得不自己设置它们的比例：

fabric.loadSVGFromURL(
  svg_url,
  (objects, options) => {
    const loadedBackObjects = fabric.util.groupSVGElements(objects.filter(o => o.id.split(' ').includes('back')), options)

    const ratio1 = this.props.size / options.width
    canvas.setBackgroundImage(
      loadedBackObjects,
      () => {
        canvas.selection = true
        const loadedFrontObjects = fabric.util.groupSVGElements(objects.filter(o => o.id.split(' ').includes('front')), options)
        const ratio2 = this.props.size / loadedFrontObjects.width
        canvas.setOverlayImage(loadedFrontObjects, () => {
          if (canvas.overlayImage._objects) {
            canvas.overlayImage._objects.filter(i => i.id.split(' ').includes('Heather')).map((i) => {
              i.set({ opacity: this.props.variation.heather ? 1 : 0 })
            })
          }
        }, {
          scaleX: ratio2,
          scaleY: ratio2,
          top: loadedFrontObjects.top * ratio1,
          left: loadedFrontObjects.left * ratio1,
        })
        canvas.renderAll.bind(canvas)
      }, {
        scaleX: ratio1,
        scaleY: ratio1,
        top: loadedBackObjects.top * ratio1,
        left: loadedBackObjects.left * ratio1,
      },
    )
    canvas.renderAll()
  }, null, { crossOrigin: 'anonymous' },
)