814 lines
19 KiB
TypeScript
814 lines
19 KiB
TypeScript
import { getDevicePixelRatio, isEmpty } from "@/cool";
|
||
import { getCurrentInstance } from "vue";
|
||
import type {
|
||
CropImageResult,
|
||
DivRenderOptions,
|
||
ImageRenderOptions,
|
||
TextRenderOptions,
|
||
TransformOptions
|
||
} from "../types";
|
||
|
||
/**
|
||
* Canvas 绘图类，封装了常用的绘图操作
|
||
*/
|
||
export class Canvas {
|
||
// uni-app CanvasContext 对象
|
||
context: CanvasContext | null = null;
|
||
// 2D 渲染上下文
|
||
ctx: CanvasRenderingContext2D | null = null;
|
||
// 组件作用域（用于小程序等环境）
|
||
scope: ComponentPublicInstance | null = null;
|
||
// 画布ID
|
||
canvasId: string | null = null;
|
||
// 渲染队列，存储所有待渲染的异步操作
|
||
renderQuene: (() => Promise<void>)[] = [];
|
||
// 图片渲染队列，存储所有待处理的图片参数
|
||
imageQueue: ImageRenderOptions[] = [];
|
||
|
||
/**
|
||
* 构造函数
|
||
* @param canvasId 画布ID
|
||
*/
|
||
constructor(canvasId: string) {
|
||
const { proxy } = getCurrentInstance()!;
|
||
|
||
// 当前页面作用域
|
||
this.scope = proxy;
|
||
|
||
// 画布ID
|
||
this.canvasId = canvasId;
|
||
}
|
||
|
||
/**
|
||
* 创建画布上下文
|
||
* @returns Promise<void>
|
||
*/
|
||
async create(): Promise<void> {
|
||
const dpr = getDevicePixelRatio(); // 获取设备像素比
|
||
|
||
return new Promise((resolve) => {
|
||
uni.createCanvasContextAsync({
|
||
id: this.canvasId!,
|
||
component: this.scope,
|
||
success: (context: CanvasContext) => {
|
||
this.context = context;
|
||
this.ctx = context.getContext("2d")!;
|
||
this.ctx.scale(dpr, dpr); // 按照 dpr 缩放，保证高清
|
||
|
||
resolve();
|
||
}
|
||
});
|
||
});
|
||
}
|
||
|
||
/**
|
||
* 设置画布高度
|
||
* @param value 高度
|
||
* @returns Canvas
|
||
*/
|
||
height(value: number): Canvas {
|
||
this.ctx!.canvas.height = value;
|
||
return this;
|
||
}
|
||
|
||
/**
|
||
* 设置画布宽度
|
||
* @param value 宽度
|
||
* @returns Canvas
|
||
*/
|
||
width(value: number): Canvas {
|
||
this.ctx!.canvas.width = value;
|
||
return this;
|
||
}
|
||
|
||
/**
|
||
* 添加块（矩形/圆角矩形）渲染到队列
|
||
* @param options DivRenderOptions
|
||
* @returns Canvas
|
||
*/
|
||
div(options: DivRenderOptions): Canvas {
|
||
const render = async () => {
|
||
this.divRender(options);
|
||
};
|
||
this.renderQuene.push(render);
|
||
return this;
|
||
}
|
||
|
||
/**
|
||
* 添加文本渲染到队列
|
||
* @param options TextRenderOptions
|
||
* @returns Canvas
|
||
*/
|
||
text(options: TextRenderOptions): Canvas {
|
||
const render = async () => {
|
||
this.textRender(options);
|
||
};
|
||
this.renderQuene.push(render);
|
||
return this;
|
||
}
|
||
|
||
/**
|
||
* 添加图片渲染到队列
|
||
* @param options ImageRenderOptions
|
||
* @returns Canvas
|
||
*/
|
||
image(options: ImageRenderOptions): Canvas {
|
||
const render = async () => {
|
||
await this.imageRender(options);
|
||
};
|
||
this.imageQueue.push(options);
|
||
this.renderQuene.push(render);
|
||
return this;
|
||
}
|
||
|
||
/**
|
||
* 执行绘制流程（预加载图片后依次渲染队列）
|
||
*/
|
||
async draw(): Promise<void> {
|
||
// 如果有图片，先预加载
|
||
if (!isEmpty(this.imageQueue)) {
|
||
await this.preloadImage();
|
||
}
|
||
|
||
this.render();
|
||
}
|
||
|
||
/**
|
||
* 下载图片（获取本地路径，兼容APP等平台）
|
||
* @param item ImageRenderOptions
|
||
* @returns Promise<void>
|
||
*/
|
||
downloadImage(item: ImageRenderOptions): Promise<void> {
|
||
return new Promise((resolve, reject) => {
|
||
uni.getImageInfo({
|
||
src: item.url,
|
||
success: (res) => {
|
||
// #ifdef APP
|
||
item.url = res.path; // APP端需用本地路径
|
||
// #endif
|
||
resolve();
|
||
},
|
||
fail: (err) => {
|
||
console.error(err);
|
||
reject(err);
|
||
}
|
||
});
|
||
});
|
||
}
|
||
|
||
/**
|
||
* 预加载所有图片，确保图片可用
|
||
*/
|
||
async preloadImage(): Promise<void> {
|
||
await Promise.all(
|
||
this.imageQueue.map((e) => {
|
||
return this.downloadImage(e);
|
||
})
|
||
);
|
||
}
|
||
|
||
/**
|
||
* 设置背景颜色
|
||
* @param color 颜色字符串
|
||
*/
|
||
private setBackground(color: string) {
|
||
this.ctx!.fillStyle = color;
|
||
}
|
||
|
||
/**
|
||
* 设置边框（支持圆角）
|
||
* @param options DivRenderOptions
|
||
*/
|
||
private setBorder(options: DivRenderOptions) {
|
||
const { x, y, width: w = 0, height: h = 0, borderWidth, borderColor, radius: r } = options;
|
||
|
||
if (borderWidth == null || borderColor == null) return;
|
||
|
||
this.ctx!.lineWidth = borderWidth;
|
||
this.ctx!.strokeStyle = borderColor;
|
||
|
||
// 偏移距离，保证边框居中
|
||
let p = borderWidth / 2;
|
||
|
||
// 是否有圆角
|
||
if (r != null) {
|
||
this.drawRadius(x - p, y - p, w + 2 * p, h + 2 * p, r + p);
|
||
this.ctx!.stroke();
|
||
} else {
|
||
this.ctx!.strokeRect(x - p, y - p, w + 2 * p, h + 2 * p);
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 设置变换（缩放、旋转、平移）
|
||
* @param options TransformOptions
|
||
*/
|
||
private setTransform(options: TransformOptions) {
|
||
const ctx = this.ctx!;
|
||
|
||
// 平移
|
||
if (options.translateX != null || options.translateY != null) {
|
||
ctx.translate(options.translateX ?? 0, options.translateY ?? 0);
|
||
}
|
||
|
||
// 旋转（角度转弧度）
|
||
if (options.rotate != null) {
|
||
ctx.rotate((options.rotate * Math.PI) / 180);
|
||
}
|
||
|
||
// 缩放
|
||
if (options.scale != null) {
|
||
// 统一缩放
|
||
ctx.scale(options.scale, options.scale);
|
||
} else if (options.scaleX != null || options.scaleY != null) {
|
||
// 分别缩放
|
||
ctx.scale(options.scaleX ?? 1, options.scaleY ?? 1);
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 绘制带圆角的路径
|
||
* @param x 左上角x
|
||
* @param y 左上角y
|
||
* @param w 宽度
|
||
* @param h 高度
|
||
* @param r 圆角半径
|
||
*/
|
||
private drawRadius(x: number, y: number, w: number, h: number, r: number) {
|
||
// 圆角半径不能超过宽高一半
|
||
const maxRadius = Math.min(w / 2, h / 2);
|
||
const radius = Math.min(r, maxRadius);
|
||
|
||
this.ctx!.beginPath();
|
||
// 从左上角圆弧的结束点开始
|
||
this.ctx!.moveTo(x + radius, y);
|
||
// 顶边
|
||
this.ctx!.lineTo(x + w - radius, y);
|
||
// 右上角圆弧
|
||
this.ctx!.arc(x + w - radius, y + radius, radius, -Math.PI / 2, 0);
|
||
// 右边
|
||
this.ctx!.lineTo(x + w, y + h - radius);
|
||
// 右下角圆弧
|
||
this.ctx!.arc(x + w - radius, y + h - radius, radius, 0, Math.PI / 2);
|
||
// 底边
|
||
this.ctx!.lineTo(x + radius, y + h);
|
||
// 左下角圆弧
|
||
this.ctx!.arc(x + radius, y + h - radius, radius, Math.PI / 2, Math.PI);
|
||
// 左边
|
||
this.ctx!.lineTo(x, y + radius);
|
||
// 左上角圆弧
|
||
this.ctx!.arc(x + radius, y + radius, radius, Math.PI, -Math.PI / 2);
|
||
this.ctx!.closePath();
|
||
}
|
||
|
||
/**
|
||
* 裁剪图片，支持多种裁剪模式
|
||
* @param mode 裁剪模式
|
||
* @param canvasWidth 目标区域宽度
|
||
* @param canvasHeight 目标区域高度
|
||
* @param imageWidth 原图宽度
|
||
* @param imageHeight 原图高度
|
||
* @param drawX 绘制起点X
|
||
* @param drawY 绘制起点Y
|
||
* @returns CropImageResult
|
||
*/
|
||
private cropImage(
|
||
mode:
|
||
| "scaleToFill"
|
||
| "aspectFit"
|
||
| "aspectFill"
|
||
| "center"
|
||
| "top"
|
||
| "bottom"
|
||
| "left"
|
||
| "right"
|
||
| "topLeft"
|
||
| "topRight"
|
||
| "bottomLeft"
|
||
| "bottomRight",
|
||
canvasWidth: number,
|
||
canvasHeight: number,
|
||
imageWidth: number,
|
||
imageHeight: number,
|
||
drawX: number,
|
||
drawY: number
|
||
): CropImageResult {
|
||
// sx, sy, sw, sh: 原图裁剪区域
|
||
// dx, dy, dw, dh: 画布绘制区域
|
||
let sx = 0,
|
||
sy = 0,
|
||
sw = imageWidth,
|
||
sh = imageHeight;
|
||
let dx = drawX,
|
||
dy = drawY,
|
||
dw = canvasWidth,
|
||
dh = canvasHeight;
|
||
|
||
// 计算宽高比
|
||
const imageRatio = imageWidth / imageHeight;
|
||
const canvasRatio = canvasWidth / canvasHeight;
|
||
|
||
switch (mode) {
|
||
case "scaleToFill":
|
||
// 拉伸填充整个区域，可能变形
|
||
break;
|
||
|
||
case "aspectFit":
|
||
// 保持比例完整显示，可能有留白
|
||
if (imageRatio > canvasRatio) {
|
||
// 图片更宽，以宽度为准
|
||
dw = canvasWidth;
|
||
dh = canvasWidth / imageRatio;
|
||
dx = drawX;
|
||
dy = drawY + (canvasHeight - dh) / 2;
|
||
} else {
|
||
// 图片更高，以高度为准
|
||
dw = canvasHeight * imageRatio;
|
||
dh = canvasHeight;
|
||
dx = drawX + (canvasWidth - dw) / 2;
|
||
dy = drawY;
|
||
}
|
||
break;
|
||
|
||
case "aspectFill":
|
||
// 保持比例填充，可能裁剪
|
||
if (imageRatio > canvasRatio) {
|
||
// 图片更宽，裁剪左右
|
||
const scaledWidth = imageHeight * canvasRatio;
|
||
sx = (imageWidth - scaledWidth) / 2;
|
||
sw = scaledWidth;
|
||
} else {
|
||
// 图片更高，裁剪上下
|
||
const scaledHeight = imageWidth / canvasRatio;
|
||
sy = (imageHeight - scaledHeight) / 2;
|
||
sh = scaledHeight;
|
||
}
|
||
break;
|
||
|
||
case "center":
|
||
// 居中显示，不缩放，超出裁剪
|
||
sx = Math.max(0, (imageWidth - canvasWidth) / 2);
|
||
sy = Math.max(0, (imageHeight - canvasHeight) / 2);
|
||
sw = Math.min(imageWidth, canvasWidth);
|
||
sh = Math.min(imageHeight, canvasHeight);
|
||
dx = drawX + Math.max(0, (canvasWidth - imageWidth) / 2);
|
||
dy = drawY + Math.max(0, (canvasHeight - imageHeight) / 2);
|
||
dw = sw;
|
||
dh = sh;
|
||
break;
|
||
|
||
case "top":
|
||
// 顶部对齐，水平居中
|
||
sx = Math.max(0, (imageWidth - canvasWidth) / 2);
|
||
sy = 0;
|
||
sw = Math.min(imageWidth, canvasWidth);
|
||
sh = Math.min(imageHeight, canvasHeight);
|
||
dx = drawX + Math.max(0, (canvasWidth - imageWidth) / 2);
|
||
dy = drawY;
|
||
dw = sw;
|
||
dh = sh;
|
||
break;
|
||
|
||
case "bottom":
|
||
// 底部对齐，水平居中
|
||
sx = Math.max(0, (imageWidth - canvasWidth) / 2);
|
||
sy = Math.max(0, imageHeight - canvasHeight);
|
||
sw = Math.min(imageWidth, canvasWidth);
|
||
sh = Math.min(imageHeight, canvasHeight);
|
||
dx = drawX + Math.max(0, (canvasWidth - imageWidth) / 2);
|
||
dy = drawY + Math.max(0, canvasHeight - imageHeight);
|
||
dw = sw;
|
||
dh = sh;
|
||
break;
|
||
|
||
case "left":
|
||
// 左对齐，垂直居中
|
||
sx = 0;
|
||
sy = Math.max(0, (imageHeight - canvasHeight) / 2);
|
||
sw = Math.min(imageWidth, canvasWidth);
|
||
sh = Math.min(imageHeight, canvasHeight);
|
||
dx = drawX;
|
||
dy = drawY + Math.max(0, (canvasHeight - imageHeight) / 2);
|
||
dw = sw;
|
||
dh = sh;
|
||
break;
|
||
|
||
case "right":
|
||
// 右对齐，垂直居中
|
||
sx = Math.max(0, imageWidth - canvasWidth);
|
||
sy = Math.max(0, (imageHeight - canvasHeight) / 2);
|
||
sw = Math.min(imageWidth, canvasWidth);
|
||
sh = Math.min(imageHeight, canvasHeight);
|
||
dx = drawX + Math.max(0, canvasWidth - imageWidth);
|
||
dy = drawY + Math.max(0, (canvasHeight - imageHeight) / 2);
|
||
dw = sw;
|
||
dh = sh;
|
||
break;
|
||
|
||
case "topLeft":
|
||
// 左上角对齐
|
||
sx = 0;
|
||
sy = 0;
|
||
sw = Math.min(imageWidth, canvasWidth);
|
||
sh = Math.min(imageHeight, canvasHeight);
|
||
dx = drawX;
|
||
dy = drawY;
|
||
dw = sw;
|
||
dh = sh;
|
||
break;
|
||
|
||
case "topRight":
|
||
// 右上角对齐
|
||
sx = Math.max(0, imageWidth - canvasWidth);
|
||
sy = 0;
|
||
sw = Math.min(imageWidth, canvasWidth);
|
||
sh = Math.min(imageHeight, canvasHeight);
|
||
dx = drawX + Math.max(0, canvasWidth - imageWidth);
|
||
dy = drawY;
|
||
dw = sw;
|
||
dh = sh;
|
||
break;
|
||
|
||
case "bottomLeft":
|
||
// 左下角对齐
|
||
sx = 0;
|
||
sy = Math.max(0, imageHeight - canvasHeight);
|
||
sw = Math.min(imageWidth, canvasWidth);
|
||
sh = Math.min(imageHeight, canvasHeight);
|
||
dx = drawX;
|
||
dy = drawY + Math.max(0, canvasHeight - imageHeight);
|
||
dw = sw;
|
||
dh = sh;
|
||
break;
|
||
|
||
case "bottomRight":
|
||
// 右下角对齐
|
||
sx = Math.max(0, imageWidth - canvasWidth);
|
||
sy = Math.max(0, imageHeight - canvasHeight);
|
||
sw = Math.min(imageWidth, canvasWidth);
|
||
sh = Math.min(imageHeight, canvasHeight);
|
||
dx = drawX + Math.max(0, canvasWidth - imageWidth);
|
||
dy = drawY + Math.max(0, canvasHeight - imageHeight);
|
||
dw = sw;
|
||
dh = sh;
|
||
break;
|
||
}
|
||
|
||
return {
|
||
// 源图片裁剪区域
|
||
sx,
|
||
sy,
|
||
sw,
|
||
sh,
|
||
// 目标绘制区域
|
||
dx,
|
||
dy,
|
||
dw,
|
||
dh
|
||
} as CropImageResult;
|
||
}
|
||
|
||
/**
|
||
* 获取文本每行内容（自动换行、支持省略号）
|
||
* @param options TextRenderOptions
|
||
* @returns string[] 每行内容
|
||
*/
|
||
private getTextRows({
|
||
content,
|
||
fontSize = 14,
|
||
width = 100,
|
||
lineClamp = 1,
|
||
overflow,
|
||
letterSpace = 0,
|
||
fontFamily = "sans-serif",
|
||
fontWeight = "normal"
|
||
}: TextRenderOptions) {
|
||
// 临时设置字体以便准确测量
|
||
this.ctx!.save();
|
||
this.ctx!.font = `${fontWeight} ${fontSize}px ${fontFamily}`;
|
||
|
||
let arr: string[] = [""];
|
||
let currentLineWidth = 0;
|
||
|
||
for (let i = 0; i < content.length; i++) {
|
||
const char = content.charAt(i);
|
||
const charWidth = this.ctx!.measureText(char).width;
|
||
|
||
// 计算当前字符加上字符间距后的总宽度
|
||
const needSpace = arr[arr.length - 1].length > 0 && letterSpace > 0;
|
||
const totalWidth = charWidth + (needSpace ? letterSpace : 0);
|
||
|
||
if (currentLineWidth + totalWidth > width) {
|
||
// 换行：新行的第一个字符不需要字符间距
|
||
currentLineWidth = charWidth;
|
||
arr.push(char);
|
||
} else {
|
||
// 最后一行且设置超出省略号
|
||
if (overflow == "ellipsis" && arr.length == lineClamp) {
|
||
const ellipsisWidth = this.ctx!.measureText("...").width;
|
||
const ellipsisSpaceWidth = needSpace ? letterSpace : 0;
|
||
|
||
if (
|
||
currentLineWidth + totalWidth + ellipsisSpaceWidth + ellipsisWidth >
|
||
width
|
||
) {
|
||
arr[arr.length - 1] += "...";
|
||
break;
|
||
}
|
||
}
|
||
|
||
currentLineWidth += totalWidth;
|
||
arr[arr.length - 1] += char;
|
||
}
|
||
}
|
||
|
||
this.ctx!.restore();
|
||
return arr;
|
||
}
|
||
|
||
/**
|
||
* 渲染块（矩形/圆角矩形）
|
||
* @param options DivRenderOptions
|
||
*/
|
||
private divRender(options: DivRenderOptions) {
|
||
const {
|
||
x,
|
||
y,
|
||
width = 0,
|
||
height = 0,
|
||
radius,
|
||
backgroundColor = "#fff",
|
||
opacity = 1,
|
||
scale,
|
||
scaleX,
|
||
scaleY,
|
||
rotate,
|
||
translateX,
|
||
translateY
|
||
} = options;
|
||
|
||
this.ctx!.save();
|
||
|
||
// 设置透明度
|
||
this.ctx!.globalAlpha = opacity;
|
||
|
||
// 设置背景色
|
||
this.setBackground(backgroundColor);
|
||
// 设置边框
|
||
this.setBorder(options);
|
||
// 设置变换
|
||
this.setTransform({
|
||
scale,
|
||
scaleX,
|
||
scaleY,
|
||
rotate,
|
||
translateX,
|
||
translateY
|
||
});
|
||
|
||
// 判断是否有圆角
|
||
if (radius != null) {
|
||
// 绘制圆角路径
|
||
this.drawRadius(x, y, width, height, radius);
|
||
// 填充
|
||
this.ctx!.fill();
|
||
} else {
|
||
// 普通矩形
|
||
this.ctx!.fillRect(x, y, width, height);
|
||
}
|
||
this.ctx!.restore();
|
||
}
|
||
|
||
/**
|
||
* 渲染文本
|
||
* @param options TextRenderOptions
|
||
*/
|
||
private textRender(options: TextRenderOptions) {
|
||
let {
|
||
fontSize = 14,
|
||
textAlign,
|
||
width,
|
||
color = "#000000",
|
||
x,
|
||
y,
|
||
letterSpace,
|
||
lineHeight,
|
||
fontFamily = "sans-serif",
|
||
fontWeight = "normal",
|
||
opacity = 1,
|
||
scale,
|
||
scaleX,
|
||
scaleY,
|
||
rotate,
|
||
translateX,
|
||
translateY
|
||
} = options;
|
||
|
||
// 如果行高为空，则设置为字体大小的1.4倍
|
||
if (lineHeight == null) {
|
||
lineHeight = fontSize * 1.4;
|
||
}
|
||
|
||
this.ctx!.save();
|
||
|
||
// 应用变换
|
||
this.setTransform({
|
||
scale,
|
||
scaleX,
|
||
scaleY,
|
||
rotate,
|
||
translateX,
|
||
translateY
|
||
});
|
||
|
||
// 设置字体样式
|
||
this.ctx!.font = `${fontWeight} ${fontSize}px ${fontFamily}`;
|
||
|
||
// 设置透明度
|
||
this.ctx!.globalAlpha = opacity;
|
||
|
||
// 设置字体颜色
|
||
this.ctx!.fillStyle = color;
|
||
|
||
// 获取每行文本内容
|
||
const rows = this.getTextRows(options);
|
||
|
||
// 左偏移量
|
||
let offsetLeft = 0;
|
||
|
||
// 字体对齐（无字符间距时使用Canvas的textAlign）
|
||
if (textAlign != null && width != null && (letterSpace == null || letterSpace <= 0)) {
|
||
this.ctx!.textAlign = textAlign;
|
||
|
||
switch (textAlign) {
|
||
case "left":
|
||
break;
|
||
case "center":
|
||
offsetLeft = width / 2;
|
||
break;
|
||
case "right":
|
||
offsetLeft = width;
|
||
break;
|
||
}
|
||
} else {
|
||
// 有字符间距时，使用左对齐，手动控制位置
|
||
this.ctx!.textAlign = "left";
|
||
}
|
||
|
||
// 计算行间距
|
||
const lineGap = lineHeight - fontSize;
|
||
|
||
// 逐行渲染
|
||
for (let i = 0; i < rows.length; i++) {
|
||
const currentRow = rows[i];
|
||
const yPos = (i + 1) * fontSize + y + lineGap * i;
|
||
|
||
if (letterSpace != null && letterSpace > 0) {
|
||
// 逐字符计算宽度，确保字符间距准确
|
||
let lineWidth = 0;
|
||
for (let j = 0; j < currentRow.length; j++) {
|
||
lineWidth += this.ctx!.measureText(currentRow.charAt(j)).width;
|
||
if (j < currentRow.length - 1) {
|
||
lineWidth += letterSpace;
|
||
}
|
||
}
|
||
|
||
// 计算起始位置（考虑 textAlign）
|
||
let startX = x;
|
||
if (textAlign == "center" && width != null) {
|
||
startX = x + (width - lineWidth) / 2;
|
||
} else if (textAlign == "right" && width != null) {
|
||
startX = x + width - lineWidth;
|
||
}
|
||
|
||
// 逐字符渲染
|
||
let charX = startX;
|
||
for (let j = 0; j < currentRow.length; j++) {
|
||
const char = currentRow.charAt(j);
|
||
this.ctx!.fillText(char, charX, yPos);
|
||
|
||
// 移动到下一个字符位置
|
||
charX += this.ctx!.measureText(char).width;
|
||
if (j < currentRow.length - 1) {
|
||
charX += letterSpace;
|
||
}
|
||
}
|
||
} else {
|
||
// 普通渲染（无字符间距）
|
||
this.ctx!.fillText(currentRow, x + offsetLeft, yPos);
|
||
}
|
||
}
|
||
|
||
this.ctx!.restore();
|
||
}
|
||
|
||
/**
|
||
* 渲染图片
|
||
* @param options ImageRenderOptions
|
||
*/
|
||
private async imageRender(options: ImageRenderOptions): Promise<void> {
|
||
return new Promise((resolve) => {
|
||
this.ctx!.save();
|
||
|
||
// 设置透明度
|
||
this.ctx!.globalAlpha = options.opacity ?? 1;
|
||
|
||
// 应用变换
|
||
this.setTransform({
|
||
scale: options.scale,
|
||
scaleX: options.scaleX,
|
||
scaleY: options.scaleY,
|
||
rotate: options.rotate,
|
||
translateX: options.translateX,
|
||
translateY: options.translateY
|
||
});
|
||
|
||
// 如果有圆角，先绘制路径并裁剪
|
||
if (options.radius != null) {
|
||
this.drawRadius(
|
||
options.x,
|
||
options.y,
|
||
options.width,
|
||
options.height,
|
||
options.radius
|
||
);
|
||
this.ctx!.clip();
|
||
}
|
||
|
||
const temp = this.imageQueue[0];
|
||
|
||
let img: Image;
|
||
|
||
// 微信小程序/鸿蒙环境创建图片
|
||
// #ifdef MP-WEIXIN || APP-HARMONY
|
||
img = this.context!.createImage();
|
||
// #endif
|
||
|
||
// 其他环境创建图片
|
||
// #ifndef MP-WEIXIN || APP-HARMONY
|
||
img = new Image();
|
||
// #endif
|
||
|
||
img.src = temp.url;
|
||
|
||
img.onload = () => {
|
||
if (options.mode != null) {
|
||
let h: number;
|
||
let w: number;
|
||
|
||
// #ifdef H5
|
||
h = img["height"];
|
||
w = img["width"];
|
||
// #endif
|
||
|
||
// #ifndef H5
|
||
h = img.height;
|
||
w = img.width;
|
||
// #endif
|
||
|
||
// 按模式裁剪并绘制
|
||
const { sx, sy, sw, sh, dx, dy, dw, dh } = this.cropImage(
|
||
options.mode,
|
||
temp.width, // 目标绘制区域宽度
|
||
temp.height, // 目标绘制区域高度
|
||
w, // 原图片宽度
|
||
h, // 原图片高度
|
||
temp.x, // 绘制X坐标
|
||
temp.y // 绘制Y坐标
|
||
);
|
||
|
||
// 使用 drawImage 的完整参数形式进行精确裁剪和绘制
|
||
this.ctx!.drawImage(img, sx, sy, sw, sh, dx, dy, dw, dh);
|
||
} else {
|
||
// 不指定模式时，直接绘制整个图片
|
||
this.ctx!.drawImage(img, temp.x, temp.y, temp.width, temp.height);
|
||
}
|
||
|
||
this.ctx!.restore();
|
||
this.imageQueue.shift(); // 移除已渲染图片
|
||
|
||
resolve();
|
||
};
|
||
});
|
||
}
|
||
|
||
/**
|
||
* 依次执行渲染队列中的所有操作
|
||
*/
|
||
async render() {
|
||
for (let i = 0; i < this.renderQuene.length; i++) {
|
||
const r = this.renderQuene[i];
|
||
await r();
|
||
}
|
||
}
|
||
}
|
||
|
||
/**
|
||
* useCanvas 钩子函数，返回 Canvas 实例
|
||
* @param canvasId 画布ID
|
||
* @returns Canvas
|
||
*/
|
||
export const useCanvas = (canvasId: string) => {
|
||
return new Canvas(canvasId);
|
||
};
|