90 lines
1.8 KiB
JavaScript
90 lines
1.8 KiB
JavaScript
/**
|
|
* Shopro + qs-canvas 绘制海报
|
|
* @version 1.0.0
|
|
* @author lidongtony
|
|
* @param {Object} options - 海报参数
|
|
* @param {Object} vm - 自定义组件实例
|
|
*/
|
|
|
|
import sheep from '@/sheep';
|
|
import QSCanvas from 'qs-canvas';
|
|
import { getPosterData } from './poster';
|
|
|
|
export default async function useCanvas(options, vm) {
|
|
const width = options.width;
|
|
const qsc = new QSCanvas(
|
|
{
|
|
canvasId: options.canvasId,
|
|
width: options.width,
|
|
height: options.height,
|
|
setCanvasWH: (canvas) => {
|
|
options.height = canvas.height;
|
|
},
|
|
},
|
|
vm,
|
|
);
|
|
|
|
let drawer = getPosterData(options);
|
|
|
|
// 绘制背景图
|
|
const background = await qsc.drawImg({
|
|
type: 'image',
|
|
val: drawer.background,
|
|
x: 0,
|
|
y: 0,
|
|
width,
|
|
mode: 'widthFix',
|
|
zIndex: 0,
|
|
});
|
|
await qsc.updateCanvasWH({
|
|
width: background.width,
|
|
height: background.bottom,
|
|
});
|
|
|
|
let list = drawer.list;
|
|
|
|
for (let i = 0; i < list.length; i++) {
|
|
let item = list[i];
|
|
// 绘制文字
|
|
if (item.type === 'text') {
|
|
await qsc.drawText(item);
|
|
}
|
|
// 绘制图片
|
|
if (item.type === 'image') {
|
|
if (item.d) {
|
|
qsc.setCircle({
|
|
x: item.x,
|
|
y: item.y,
|
|
d: item.d,
|
|
clip: true,
|
|
});
|
|
}
|
|
|
|
if (item.r) {
|
|
qsc.setRect({
|
|
x: item.x,
|
|
y: item.y,
|
|
height: item.height,
|
|
width: item.width,
|
|
r: item.r,
|
|
clip: true,
|
|
});
|
|
}
|
|
await qsc.drawImg(item);
|
|
qsc.restore();
|
|
}
|
|
|
|
// 绘制二维码
|
|
if (item.type === 'qrcode') {
|
|
await qsc.drawQrCode(item);
|
|
}
|
|
}
|
|
|
|
await qsc.draw();
|
|
// 延迟执行, 防止不稳定
|
|
setTimeout(async () => {
|
|
options.src = await qsc.toImage();
|
|
}, 100);
|
|
return options;
|
|
}
|