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);
|
|||
|
|
};
|