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

How to render on offscreen-canvas #46

Open
sheepbox8646 opened this issue Oct 1, 2024 · 1 comment
Open

How to render on offscreen-canvas #46

sheepbox8646 opened this issue Oct 1, 2024 · 1 comment
Labels
help wanted Extra attention is needed question Further information is requested

Comments

@sheepbox8646
Copy link

首先,我很开心能找到这个项目

Remotion有一个包基于react-native-skia封装了一些做视频用的组件:

https://www.remotion.dev/docs/skia/skia-canvas

而我们团队正在开发一个叫VueMotion(https://github.com/Bug-Duck/vuemotion)的动画引擎,准备集成入Skia, 最初方案是CanvasKit-WASM, 但是如果封装下去工程量会非常大,所以我无意间搜索到了vue-skia

但是我研究了一下发现无法渲染到离屏画布上, 请问有什么解决方案?如果没有的话,我觉得可以封装类似于以下的API:

<script setup>
// ...
const ele = ref(null)
const { surface }  = useOffscreenCanvas(ele) 
// ...
</script>
<template>
<template>
  <v-surface ref="ele">
    ...
  </v-surface>
</template>
</template>

最终的需求是获取到图片的Blob对象。

如果看到了麻烦看一眼,谢谢!!!!!!!!!qwq

@meloalright
Copy link
Member

感谢关注!

这是一个很有酷的问题🤔
确实 vue-skia 没有很关注渲染到离屏画布的问题 不过如果只是想得到图片的位图 理论上是可以通过 soft-skia-wasm 进行组合的

vue-skia 的 WASM FFI 层是通过 soft-skia-wasm 进行桥接的 (文件路径: https://github.com/rustq/vue-skia/tree/main/soft-skia-wasm)

不过我最近正在休假 我最近想一想这个问题 争取早些回复~

@meloalright meloalright added help wanted Extra attention is needed question Further information is requested labels Oct 2, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
help wanted Extra attention is needed question Further information is requested
Projects
None yet
Development

No branches or pull requests

2 participants