1.0.8 • Published 1 year ago
uni-mp-canvas-tool v1.0.8
一个uniapp mp-weixin的canvas工具
前言
这是一个uniapp
转mp-weixin
的canvas
工具
- 由于
api
的异步问题,这里做了几次尝试,最开始init
放构造函数,然后function
是执行队列异步执行,但是很丑,代码先保留了, - 现在是把
init
暴露了出去,让开发者去注意生成实例后务必await instance.init(id, vm);
- 另外需要注意
drawimage
/带有image
节点的drawNodeList
的异步问题,如果你有需要拿到最后的tempPath并return 给别的方法,(比如是转发图片自定义这种) - 那你就得注意
drawImage
/带有image
节点的drawNodeList
的异步问题,推荐加个await 在前面。 - 如果只是渲染,就不用在意。
- 或者你可以在生成实例后直接调用
render
方法,但如果你有需要用到其它数据,请确保获取的时机是正确的。 - 这里提一下设备像素相关的,由于设计稿是根据
iphone678
的机型去设计的,然后一般给出的是750rpx
宽,所以转换过来 - 就是
375px
,dpr
即像素比是1:2
。但是在一些其他手机上就不是这个比例了,比如我的蛇皮小米8是393px
的。。。 - 你的设计稿已
375
为倍速,如果你init传入的比例不是这个建议设计稿转成成比例的。这里默认是750
scaleRate
公式:(设计稿宽 / 375) / (设备宽 / 375) 即:设计稿宽 / 设备宽。- 为什么要这样做?是为了让你开发的时候不用自己去换算,这个工具里大部分情况会帮你去算,
- 所以开发直接传入设计稿给出的宽高即可。
- 不过关于文本的你需要多注意下,因为比例挺恶心不一定是整数
api
init
: 调用官方API
初始化canvas
实例canvasId
: 你的canvas dom
的id
vm
: 你的canvas dom
所在的组件/页面的this
designWidth
: 你的设计稿宽度,这里默认750rpx,对标iphone678
roundRect
: 绘制区域,尽量不要单独调用这个方法,由于该方法较为底层,所以没有进行像素比适配,如果确实有必要自行调用,请引入toFit
方法执行获取scaleRate
box
:{ w: width, h: height, x: startX, y: startY }
drawView
: 绘制一个区域box
: 同上style
:{ borderRadius = 0, borderWidth = 0, borderColor, color = '#000', backgroundColor = 'transparent' }
drawImage
: 绘制图片,允许使用线上图片和本地图片。如果单独使用请记得加上await
防止最终拿到的临时图片路径里没有绘制到图片box
: 同上style
:{ borderRadius = 0 }
drawText
: 绘制文本,会根据当前给出的w
和h
来判断是否需要换行,最后一行如果依旧超出则自动打点。由于拿到的像素比不一定是整数,所以文本宽高尽量给多些。box
: 同上style
:{ color = '#000', lineHeight = '1.4em', fontSize = 14, textAlign = 'left', verticalAlign = 'top', backgroundColor = 'transparent' }
canvasToTempFilePath
: 获取渲染区域的绘制内容图片路径args
:{ fileType = 'png', quality = 1 }
drawNodeList
: 根据内容绘制renderQueue
: 绘制的列表,其中每一项的type
可为:view、image、text、custom
, 其中image
需要传入img
图片链接,text
需要传入text
文本内容,而custom
代表需要自定义渲染,需要传入customFunc
回调,参数为实例对象。
render
:整合init
、drawNodeList
和canvasToTempFilePath
三步,返回绘制内容临时路径。options
:{ id, vm, renderQueue, tempFilePathArgs = {}, designWidth = 750, }
例子
import { CanvasTool } from 'uni-mp-canvas-tool';
const canvas = new CanvasTool({});
const renderQueue = [{
type: 'view',
box: { w: 750, h: 550, x: 0, y: 0 },
style: {
borderRadius: 16,
backgroundColor: '#fff'
}
},{
type: 'image',
img: 'https:xxx',
box: { w: 740, h: 540, x: 10, y: 10 },
style: { borderRadius: 10 }
}, {
type: 'text',
text: '123',
box: { w: 740, h: 540, x: 10, y: 10 },
style: {
fontSize: 28
}
}, {
type: 'custom',
customFunc: (canvas) => {
const { ctx, scaleRate } = canvas;
console.log(ctx, scaleRate)
}
}]
return await canvas.render({
id: 'canvas',
vm: this,
tempFilePathArgs: {},
designWidth: 750,
})
最后
另外有问题请自行修改,本人没啥空维护,也不对任何损失问题负责