介绍

大家好！这是一款可以通过JSON配置生成Canvas画报。
有原版本和uniapp版本
现阶段只能生成固定尺寸海报，如果有需求生成不固定商品图海报，等待2.0…

参数说明

参数	类型	是否必填	说明
config	Array	是	配置项

config

参数	类型	是否必填	说明
background	String	否	海报背景色（默认白色）
canvasWidth	String	是	画布宽
canvasHeight	String	是	画布高
images	Array	否	图片或矩形配置项
texts	Array	否	文字配置项

images

参数	类型	是否必填	说明
width	number	是	矩形或者图片宽
height	number	是	矩形或者图片高
url	String	否	图片的Url（1、不填写就是矩形。2、可以填写网络路径可以是本地图。）
borderRadius	number	否	圆角值
top	number	否	相对于画布Y轴值
left	number	否	相对于画布X轴值
zIndex	number	否	层级
config	Array	否	矩形配置

images/config

参数	类型	是否必填	说明
round	Objeck	否	配置哪个方向的角是圆角，默认不传全是圆角
fillColor	String	否	矩形填充颜色
type	String	否	fill / stroke / both,填充/描边/填充和描边
strokeColor	String	否	描边色

images/config/round

参数	类型	是否必填	说明
leftTop	Boolean	是	是否圆角
leftBottom	Boolean	是	是否圆角
rightTop	Boolean	是	是否圆角
rightBottom	Boolean	是	是否圆角

texts

参数	类型	是否必填	说明
fontSize	number	是	字体大小
color	number	否	字体颜色（默认#000）
zIndex	String	是	层级
fontWeight	number	否	字体粗细
content	number	是	文本内容
textAlign	String	是	文字位置 left / center / right
textBaseline	String	否	top、bottom、middle、normal 位置（默认bottom）
top	number	是	相对于画布Y轴值
left	number	是	相对于画布X轴值
maxLength	number	否	文本最大长度（默认20）
line	number	否	可展示几行（默认1）
lineHeight	number	否	行高（默认10）

原生微信小程序使用方法

A.wxml

// An highlighted block<Tool id="Tool" config="{{config}}" bindmyevent="onSuccessDraw"></Tool><view style="display: flex;justify-content: space-between;width: 100%;margin-top: 30px;"><button bindtap="onDrawImage" style="width:30%;background: rgb(0, 122, 0);color: #fff;">生成图片</button><button bindtap="onSaveImage" style="width:30%;background: rgb(0, 110, 161);color: #fff;">保存图片</button></view>

A.js

// An highlighted block
Page({data: {config: {background: 'transparent',canvasWidth: 375,canvasHeight: 667,images: [{width: 64,height: 64,url: '',borderRadius: 32,top: 35,left: 20,zIndex: 2,config: {round: {leftTop: true, leftBottom: true, rightTop: true, rightBottom: true, },fillColor: '#ff0000',type: 'stroke',strokeColor: '#000',}}],texts: [{fontSize: 16,color: '#fff',zIndex: 3,fontWeight: 100,content: '刘威威',textAlign: 'left',middle: '',top: 60,left: 92,maxLength: 9,line: 2}],},// 绘图完成之后的回调函数onSuccessDraw(e) {this.setData({canvasImg: e.detail //生成海报-本地Url})},//点击或者默认执行方法 开始画图ononDrawImage() {let startPainting = this.selectComponent('#Tool')startPainting.onStartPain()},})

uniapp使用方法

程序页面.vue

<template><view class="content"><CanvasToos ref="onToos" v-on:myevent="onSuccessDraw" :config="config"></CanvasToos><image :src="canvasImg" style="width: 375px;height: 667px;"></image><view style="display: flex;justify-content: space-between;width: 100%;margin-top: 30px;"><button @click="onDrawImage" style="width:30%;background: rgb(0, 122, 0);color: #fff;">生成图片</button><button @click="onSaveImage" style="width:30%;background: rgb(0, 110, 161);color: #fff;">保存图片</button></view></view>
</template><script>//Canvas-Toos.vue 是组件的文件名import CanvasToos from '@/components/canvas-toos/Canvas-Toos.vue';export default {components: {CanvasToos},data() {return {canvasImg: '',config: {/**同上**/ },}},onLoad() {},methods: {onDrawImage() {this.$refs.onToos.onStartPain()},//绘图完成回调函数onSuccessDraw(e) {console.log('✅ 绘图完成', e)this.canvasImg = e},}}
</script>

结尾

基本使用方法就这些，如果有不懂的 || 插件获取。联系微信：NovLiu_08

一个可以不用写复杂Canvas逻辑的画报解决方案，傻瓜式开发Canvas海报相关推荐

自己动手写CPU(3)逻辑、移位操作与空指令
自己动手写CPU(3)逻辑.移位操作与空指令指令说明 MIPS32指令集架构中定义的逻辑操作指令有8条: and.andi.or.ori.xor.xori.nor.lui,其中 ori指令已经实现. ...
一个日本人写的插件：Breath Controller
Breath Controller 今天无意发现一个日本人写的呼吸控制器,挺好玩的,可以从他的主页下载源代码. 这个插件目前只支持人形动画,不过只需要简单的几行修改就可以支持 Generic动 ...
使用“不用写代码的IDE”是一种怎样的体验？
不知道大家有没使用过全自动平台这种产品? 可能有些人还不知道我指的是啥,以一款今年比较流行的全自动软件开发平台为例,所谓「全自动」,就是你在开发一个项目时,不需要你写代码,只需要你画好对应的逻辑流程图 ...
flask html 得到文本框 input的内容_flask入门（二）（不用写代码的前端！）
flask入门 (二)(不用写代码的前端!) 前言今天要介绍的依然是 flask 框架,前面介绍的仅仅是 flask 快速搭建最小应用的知识点,既然我们需要自己做网站,那肯定离不开前端页面的制作. ...
弹力细胞，一个由JavaScript写的网页小游戏
弹力细胞 (BounceCell) 一个由JavaScript写的网页小游戏作为大一菜鸟,这是我第一次比较正式的写文章 [害臊] 游戏玩法通过鼠标或触屏控制屏幕底部的滑动弹板将发射的小球反弹出去撞 ...
不用写代码就能学用Pandas，适合新老程序员的神器Bamboolib
作者 | Rahul Agarwal 译者 | 陆离编辑 | Jane 出品 | AI科技大本营(ID:rgznai100) 曾经,你有没有因为学习与使用 Pandas 进行数据检索等操作而感到厌烦 ...
一行代码不用写，就可以训练、测试、使用模型，这个star量1.5k的项目帮你做到...
机器之心报道机器之心编辑部 igel 是 GitHub 上的一个热门工具,基于 scikit-learn 构建,支持 sklearn 的所有机器学习功能,如回归.分类和聚类.用户无需编写一行代码即可 ...
一行代码都不用写，教你如何快速搭建Github博客！！！
关注上方"深度学习技术前沿",选择"星标公众号", 资源干货,第一时间送达! 转载自量子位 GitHub不仅可以传代码,还可以建博客.利用GitHub Page ...
一个LINUX高手写给初学者的话（转）
现在好多的人开始接触电脑的时候,见到的应该是Windows98 说实话,98 已经是一个很人性化,封装的很好的一个系统了一个对电脑一窍不通的人都能很快的使用它.这样很多人对 "电脑& ...

一个可以不用写复杂Canvas逻辑的画报解决方案，傻瓜式开发Canvas海报

一个可以不用写复杂Canvas逻辑的画报解决方案，傻瓜式开发Canvas海报

介绍

参数说明

config

images

images/config

images/config/round

texts

原生微信小程序使用方法

uniapp使用方法

程序页面.vue

结尾

一个可以不用写复杂Canvas逻辑的画报解决方案，傻瓜式开发Canvas海报相关推荐

最新文章

热门文章