小程序初始提交
This commit is contained in:
813
cool-unix/uni_modules/cool-canvas/hooks/index.ts
Normal file
813
cool-unix/uni_modules/cool-canvas/hooks/index.ts
Normal file
@@ -0,0 +1,813 @@
|
||||
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);
|
||||
};
|
||||
Reference in New Issue
Block a user