鲁达 乐吾乐topology 图形库是一种可扩展、开放性的图形库，可以根据需求任意定制开发。
官方网站： |
其中，图形库支持 Path2D 绘画和 CanvasRenderingContext2D 两种方式：
简单基本图形推荐使用 Path2D，性能略高；
复杂场景适合用 CanvasRenderingContext2D
自定义 Path2D 图形库
// 1. 编写图形绘画函数 // 其中，calcula为canvas的世界坐标。更多信息，参考 “架构” - “概要” 和 Pen 相关文档 export function triangle(pen: Pen, path?: CanvasRenderingContext2D | Path2D) { if (!path) { path = new Path2D(); } (pen.calcula.x + pen.calcula.width / 2, pen.calcula.y); ( pen.calcula.x + pen.calcula.width, pen.calcula.y + pen.calcula.height ); (pen.calcula.x, pen.calcula.y + pen.calcula.height); (pen.calcula.x + pen.calcula.width / 2, pen.calcula.y); (); return path; } // 2. 如果需要，编写锚点函数。通常，可以使用默认锚点，然后通过快捷键动态添加锚点 // 注意，锚点左边为相对宽高的百分比小数（0-1之间的小数） export function triangleAnchors(pen: Pen) { const anchors: Point[] = []; anc({ id: '0', penId: , x: 0.5, y: 0, }); anc({ id: '1', penId: , x: 1, y: 1, }); anc({ id: '2', penId: , x: 0, y: 1, }); = anchors; } // 3. 注册图形 // 参数 {key: fn}。key为图形唯一name，否则覆盖原来图形，fn为相关函数 ({ triangle }); Anchors({ triangle: triangleAnchors }); // 4. 开始使用 const pen = { name: 'triangle', text: '三角形', x: 100, y: 100, width: 100, height: 100, }; (pen); ();自定义 Canvas Context2D 图形库
// 1. 编写图形绘画函数 // 其中，calcula为canvas的世界坐标。更多信息，参考 “架构” - “概要” 和 Pen 相关文档 export function triangle(ctx: CanvasRenderingContext2D, pen: Pen) { c(pen.calcula.x + pen.calcula.width / 2, pen.calcula.y); c( pen.calcula.x + pen.calcula.width, pen.calcula.y + pen.calcula.height ); c(pen.calcula.x, pen.calcula.y + pen.calcula.height); c(pen.calcula.x + pen.calcula.width / 2, pen.calcula.y); c(); } // 2. 如果需要，编写锚点函数。通常，可以使用默认锚点，然后通过快捷键动态添加锚点 // 注意，锚点左边为相对宽高的百分比小数（0-1之间的小数） export function triangleAnchors(pen: Pen) { const anchors: Point[] = []; anc({ id: '0', penId: , x: 0.5, y: 0, }); anc({ id: '1', penId: , x: 1, y: 1, }); anc({ id: '2', penId: , x: 0, y: 1, }); = anchors; } // 3. 注册图形 // 参数 {key: fn}。key为图形唯一name，否则覆盖原来图形，fn为相关函数 CanvasDraw({ triangle }); Anchors({ triangle: triangleAnchors }); // 4. 开始使用 const pen = { name: 'triangle', text: '三角形', x: 100, y: 100, width: 100, height: 100, }; (pen); ();其他
文字、颜色、大小、动画、事件等属性是通用继承的属性，默认不需要单独设置。具体可参考 pen
文档地址（自定义图形库）： |