2***@qq.com
2***@qq.com
  • 发布:2020-01-02 11:05
  • 更新:2023-10-30 16:53
  • 阅读:6210

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

分类:uni-app

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

2020-01-02 11:05 负责人:无 分享
已邀请:
一铭

一铭

同问????

wangdao

wangdao

同问!

l***@qq.com

l***@qq.com

同问

存在的主义

存在的主义

也问
uni-app的

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

canvas标签中,canvas在一个uni-canvas标签中,导致fabric.js并不能用id拿到canvas。

夜空上亮星星

夜空上亮星星

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 版本的问题

夜空上亮星星

夜空上亮星星

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

  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

3***@qq.com

xyf-zhangboda@foxmail.com
你那解决了吗

c***@126.com

c***@126.com

H5版用konvajs替代,konvajs有vue模式,完美兼容uniapp

2***@qq.com

2***@qq.com

解决了嘛

1***@qq.com

1***@qq.com

解决了吗?

f***@126.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

枭云

枭云

终于解决了,也实现了动态填充数据,确实麻烦

  • 小刘童鞋

    So, the answer is?

    2023-11-03 10:58

  • 枭云

    参考上面评论发的代码

    2023-11-14 14:49

要回复问题请先登录注册