leafer-ui icon indicating copy to clipboard operation
leafer-ui copied to clipboard

是否可以使用svgcanvas导出为SVG?

Open ExpandOcean opened this issue 1 year ago • 3 comments

首先感谢作者的辛勤劳动。 我想使用leafer导出SVG,但是看到相关部分还没有完成。经过搜索资料,我找到一个konva结合svgcanvas实现的案例 https://github.com/dendrofen/react-konva-to-svg/blob/15cd8a5437c591749ce1b5d55806dffb349662c7/react-konva-to-svg/index.js 但是我尝试在export('canvas')回调函数中直接替换leafer的context,并没有得到预想中的结果。请问如果可能的话,需要怎么操作呢? 谢谢!

ExpandOcean avatar Dec 24 '24 02:12 ExpandOcean

    <Leafer ref="layerRef">
      <Text
        text="Hello Leafer Vue"
        fill="#66A659"
        font-weight="black"
        :italic="true"
        :x="100"
        :y="100"
        :font-size="60"
      />
    </Leafer>
  const context = leafer.canvas.context
  const c2s=leafer.canvas.context = new Context({
    height: 672,
    width: 340,
    ctx: context
  });
  console.log(layerRef.value)
  leafer.forceUpdate()
  const out = c2s.getSerializedSvg();
  console.log(out)

得到的svg不是vector而是png image

(konva使用svgcanvas导出的svg是vector)

ExpandOcean avatar Dec 24 '24 03:12 ExpandOcean

这块比较复杂,直接导估计是导不了的,里面有很多离屏canvas优化操作。

svg导出的功能我们已经做了一部分了,需要花比较多的时间,后面会继续完善,最近先提升一下文档和网站的易用性体验。

也有可能社区会先出 leafer和 svg 互转的功能。

leaferjs avatar Dec 25 '24 01:12 leaferjs

这块比较复杂,直接导估计是导不了的,里面有很多离屏canvas优化操作。

svg导出的功能我们已经做了一部分了,需要花比较多的时间,后面会继续完善,最近先提升一下文档和网站的易用性体验。

也有可能社区会先出 leafer和 svg 互转的功能。

leaferjs avatar Dec 25 '24 01:12 leaferjs

is there any progress on the SVG export function?

rakibatomnixima avatar Jun 18 '25 04:06 rakibatomnixima