如题,如何在uni-app里面使用fabric.js
2***@qq.com
- 发布:2020-01-02 11:05
- 更新:2023-10-30 16:53
- 阅读:5983
如何在uni-app里面使用fabric.js
分类:uni-app
13 个回复
一铭
同问????
wangdao
同问!
l***@qq.com
同问
x***@foxmail.com
后来你那解决了吗
2021-05-12 09:38
存在的主义
也问
uni-app的
canvas标签中,canvas在一个uni-canvas标签中,导致fabric.js并不能用id拿到canvas。
x***@foxmail.com
你那解决了吗
2021-05-12 09:37
1***@qq.com
解决了吗?
2023-05-12 11:31
夜空上亮星星
const elCanvas = this.$refs.canvas.$el.firstChild;
const myCanvas = this.canvas = new fabric.Canvas(elCanvas, {
preserveObjectStacking: true,
width:300,
height:550,
这样可以实例化 fabric对象。但是好像fabric兼容不了uni-app。不知道是canvas标签被uni-app强制设置了什么配置,还是fabric 4.3.1 版本的问题
1***@qq.com
那你解决了吗
2023-05-12 11:32
夜空上亮星星
先 npm install fabric --save
附件是HBuild建的测试项目,测试发现确实用不了。但是vue脚手架生成的vue项目就是可以。区别就是canva标签被识别为uni-canvas了。这个不知道如何解决,能从uni-app框架上剔除 内置的canvas 组件吗,保留原生的canvas标签
夜空上亮星星
总算解决了。直接动态生成canva元素,不在template 写代码渲染。 唯一不好的地方是,好像只能输出H5,app 打包运行直接白屏。(经调试,是通过npm 引入js导致app调试白屏,看来第三方js不兼容 app端,H5端是没问题的)
var cardContent = document.getElementById('card-canvas-content');
var cardCanvas = document.createElement('canvas');
cardCanvas.setAttribute("id","card-canvas")
cardContent.appendChild(cardCanvas);
x***@foxmail.com
你好 麻烦问下 你的fabric咋引入进去的?我的得引入编译就报错,能给个运行好的完整demo吗
2021-05-10 16:23
x***@foxmail.com
我的是编译微信小程序报错的,用了你上面的压缩包,也是报一样错:jsdom.JSDOM is not a constructor
at Object.<anonymous>
2021-05-10 16:34
1***@qq.com
回复 x***@foxmail.com: 报错 jsdom.JSDOM is not a constructor 是没引用jsdom,import jsdom from ‘jsdom’ 就可以了,不过微信小程序上会提示 Cannot read property 'FormData' of undefined,这个我暂时也不知道是什么原因
2021-07-21 09:30
3***@qq.com
xyf-zhangboda@foxmail.com
你那解决了吗
c***@126.com
H5版用konvajs替代,konvajs有vue模式,完美兼容uniapp
2***@qq.com
解决了嘛
1***@qq.com
解决了吗?
f***@126.com - KingLee
动态创建canvas原生标签;
z***@qq.com
你这样写也只是H5上能运行 app还是不得行
2023-12-23 15:12
3***@qq.com
回复 z***@qq.com: 真能行...你别把数据绑定在export default里面就行...
2024-04-08 14:22
1***@qq.com
npm install fabric --save
// main.js
import fabric from "fabric"
Vue.use(fabric)
然后报错Uncaught TypeError: Cannot read properties of undefined (reading 'install')
2024-09-21 11:40
x***@163.com
终于解决了,也实现了动态填充数据,确实麻烦
小刘童鞋
So, the answer is?
2023-11-03 10:58
x***@163.com
参考上面评论发的代码
2023-11-14 14:49