R524809
66 lines
1.4 KiB
TypeScript
66 lines
1.4 KiB
TypeScript
/**
|
|
* 绘制工具集合（后续可继续扩展其他通用绘制方法）
|
|
*/
|
|
|
|
export type FourLineGridStyle = {
|
|
/** 顶线/底线颜色 */
|
|
ink?: string;
|
|
/** 中间两条虚线颜色 */
|
|
middleInk?: string;
|
|
/** 线宽 */
|
|
lineWidth?: number;
|
|
/** 虚线样式 */
|
|
dash?: number[];
|
|
};
|
|
|
|
/**
|
|
* 四线三格（通用）
|
|
* - 顶/底：实线
|
|
* - 中间两条：虚线
|
|
*/
|
|
export function drawFourLineGrid(
|
|
ctx: RenderingContext,
|
|
x: number,
|
|
y: number,
|
|
w: number,
|
|
h: number,
|
|
style?: FourLineGridStyle,
|
|
) {
|
|
const ink = style?.ink ?? '#322E25';
|
|
const middleInk = style?.middleInk ?? 'rgba(50, 46, 37, 0.3)';
|
|
const lineWidth = style?.lineWidth ?? 1;
|
|
const dash = style?.dash ?? [4, 4];
|
|
|
|
const yTop = y;
|
|
const y1 = y + h / 3;
|
|
const y2 = y + (h * 2) / 3;
|
|
const yBot = y + h;
|
|
|
|
ctx.strokeStyle = ink;
|
|
ctx.lineWidth = lineWidth;
|
|
ctx.setLineDash([]);
|
|
ctx.beginPath();
|
|
ctx.moveTo(x, yTop);
|
|
ctx.lineTo(x + w, yTop);
|
|
ctx.stroke();
|
|
|
|
ctx.strokeStyle = middleInk;
|
|
ctx.setLineDash(dash);
|
|
ctx.beginPath();
|
|
ctx.moveTo(x, y1);
|
|
ctx.lineTo(x + w, y1);
|
|
ctx.stroke();
|
|
ctx.beginPath();
|
|
ctx.moveTo(x, y2);
|
|
ctx.lineTo(x + w, y2);
|
|
ctx.stroke();
|
|
|
|
ctx.strokeStyle = ink;
|
|
ctx.setLineDash([]);
|
|
ctx.beginPath();
|
|
ctx.moveTo(x, yBot);
|
|
ctx.lineTo(x + w, yBot);
|
|
ctx.stroke();
|
|
}
|
|
|