fabric.js 中 loadSVGFromString 加载 SVG 导致位置不对

fabric.js 中 loadSVGFromString 加载 SVG 导致子元素left和top值不对

问题:通过 loadSVGFromString 加载 SVG ,渲染完成之后回导致 里面的子模块 lefttop 的值不正确

原因:这个是因为,通过 loadSVGFromString 加载的 SVG 回被组成一个组合,组合里面的子元素按照组合的基点来算 lefttop 值,而组合的基点所在位置是中心点,不是我们通常的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()
})
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

gqkmiss

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值