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

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

分类:uni-app

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

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

一铭

同问????

wangdao

wangdao

同问!

l***@qq.com

l***@qq.com

同问

b***@163.com

b***@163.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

x***@163.com

x***@163.com

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

要回复问题请先登录注册