fabric.js 中 loadSVGFromString 加载 SVG 导致子元素left和top值不对
问题:通过 loadSVGFromString
加载 SVG
,渲染完成之后回导致 里面的子模块 left
和 top
的值不正确
原因:这个是因为,通过 loadSVGFromString
加载的 SVG
回被组成一个组合,组合里面的子元素按照组合的基点来算 left
和 top
值,而组合的基点所在位置是中心点,不是我们通常的canvas的顶点位置
所以可以先进行组合、在进行组合拆分
const card = new fabric.Canvas('my_canvas')
fabric.loadSVGFromString(svgContext, (objects) => {
// 先进行 组合成组
const group1 = new fabric.Group(objects)
// 把组合 add 进 card
card.add(group1)
// 把组合设置为选中
card.setActiveObject(group1)
// 把选中的组合 进行拆分组
card.getActiveObject().toActiveSelection();
// 把拆分开的每一个模块进行取消选中状态
card.discardActiveObject()
// 重新渲染
card.renderAll()
})