注册登录

2***@qq.com

发布：2020-01-02 11:05
更新：2023-10-30 16:53
阅读：6120

如何在uni-app里面使用fabric.js

分类：uni-app

如题，如何在uni-app里面使用fabric.js

2020-01-02 11:05 负责人:无分享

13 个回复

一铭

同问？？？？

wangdao

同问！

l***@qq.com

同问

x***@foxmail.com

后来你那解决了吗

2021-05-12 09:38

存在的主义

也问
uni-app的

        <canvas canvas-id="firstCanvas" id="firstCanvas"></canvas>

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标签

fabric-test.zip

夜空上亮星星

总算解决了。直接动态生成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);

  this.$nextTick(function(){  
    this.createFabric()  
  })

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
4***@qq.com

回复 1***@qq.com: 我是用的vue2，换到低版本的fabric4.6就可以了，应该是新版的和我用的router版本不兼容。如果要用最新版本的fabric，也可以尝试升级router

2024-11-16 12:52
4***@qq.com

回复 4***@qq.com: 另外我在main.js中引入会报 jsdom.JSDOM is not a constructor问题，在需要使用fabric的页面引入import {fabric} from 'fabric'目前安卓可以显示

2024-11-16 14:58