uniapp开发app,使用fabricjs,做一个自定义可拖拽、缩放、编辑、删除内容的海报

能在安卓app上使用动态添加文字、并且文字能够拖拽、编辑、删除、缩放、设置颜色、字体大小、文字排列方式,还有可以插入图片、并且图片也能缩放、删除。

假设场景:用户在后台页面上配置自定义海报,需要将数据传到app并展示。

我使用的是fabricjs。官网:http://fabricjs.com/

实现的原理就是使用webview间接实现,我在网上找了很久也没有找到比较快的方法实现,其实有一种,那就是使用canvas去实现,但是canvas的绘制很复杂、麻烦。大佬可以试试emmm

直接上代码了emmm,做个笔记。

index.vue的代码如下:
使用的插件image-tools:https://ext.dcloud.net.cn/plugin?id=123





/hybrid/html/promotionPosterEdit/index.html的代码如下:
使用的插件html2canvas 1.4.1 https://html2canvas.hertzen.com
fabricjs5.3.0



    
        
        
        网络网页
        
    
    
        
back
宣传海报编辑
wechat
微信
friends
朋友圈
取消
文字样式设置
bold
italic
amplify
reduce
delete
拖到此处删除
deleteactive
松手即可删除

效果图:
uniapp开发app,使用fabricjs,做一个自定义可拖拽、缩放、编辑、删除内容的海报_第1张图片
uniapp开发app,使用fabricjs,做一个自定义可拖拽、缩放、编辑、删除内容的海报_第2张图片
uniapp开发app,使用fabricjs,做一个自定义可拖拽、缩放、编辑、删除内容的海报_第3张图片

你可能感兴趣的:(uniapp开发app,使用fabricjs,做一个自定义可拖拽、缩放、编辑、删除内容的海报)