SVG到backgroundImage和overlayImage
SVG到backgroundImage和overlayImage
提问于 2018-06-28 22:28:12
我正在从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处理它的东西。
回答 1
Stack Overflow用户
发布于 2018-07-05 22: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' },
)页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51085421
复制相关文章
相似问题
腾讯云开发者
