Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
ExpandOcean opened this issue Dec 24, 2024 · 3 comments
Open

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

ExpandOcean opened this issue Dec 24, 2024 · 3 comments

Comments

@ExpandOcean
Copy link

首先感谢作者的辛勤劳动。
我想使用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
Copy link
Author

ExpandOcean commented Dec 24, 2024

    <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)

@leaferjs
Copy link
Owner

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

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

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

1 similar comment
@leaferjs
Copy link
Owner

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

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

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants