前端图形学【免费下载链接】fabric.jsJavascript Canvas Library, SVG-to-Canvas ( canvas-to-SVG) Parser项目地址https://gitcode.com/gh_mirrors/fa/fabric.js点击查看免费下载导读fabricjs/aligning-guidelines是 Fabric.js 官方扩展包中用于提供对齐参考线能力的独立包当你在画布上拖动、缩放或拉伸一个对象时它会自动计算出该对象与画布上其他对象的对齐关系实时绘制出水平/垂直参考线并自动吸附snap到精确位置让对象排版对齐变得像 PS/PPT 一样直观。本文以 packages/aligning-guidelines/README.md 与 packages/aligning-guidelines/src/README.MD 为骨架结合仓库源码讲解接入方式、全部配置项、吸附原理以及自定义对齐对象、自定义对齐点、自定义控制点和自定义绘制样式等进阶玩法读完即可在项目里落地一套可定制的智能对齐辅助工具。注本文所述版本、API 与实现细节均以当前仓库fabric.js v7.4.0 时代代码为准包版本见 packages/aligning-guidelines/package.json。一、快速接入三步启用对齐参考线该扩展以AligningGuidelines类为核心依赖fabricjs/core见 package.json 的dependencies与engines.node 20。它并不内置在 fabric 主包中而是通过官方扩展聚合入口fabric/extensions统一导出import { AligningGuidelines } from fabric/extensions;从源码看extensions/index.ts 直接export * from fabricjs/aligning-guidelines所以也可以按包名单独导入。接入只需三步// 1. 创建配置对象全部可选 const options { /** At what distance from the shape does alignment begin? 距形状多近开始触发对齐 */ margin: 4, /** Aligning line dimensions 参考线宽度像素 */ width: 1, /** Aligning line color 参考线颜色 */ color: rgba(255,0,0,0.9), /** Close Vertical line, default false. 关闭垂直参考线 */ closeVLine: false, /** Close horizontal line, default false. 关闭水平参考线 */ closeHLine: false, }; // 2. 实例化并绑定到画布 const aligningGuidelines new AligningGuidelines(myCanvas, options); // 3. 需要禁用时调用 dispose // aligningGuidelines.dispose();AligningGuidelines构造函数会把options通过Object.assign合并到实例上见 packages/aligning-guidelines/src/index.ts随后调用initBehavior()自动注册监听事件this.canvas.on(mouse:up, this.mouseUp); this.canvas.on(object:resizing, this.scalingOrResizing); this.canvas.on(object:scaling, this.scalingOrResizing); this.canvas.on(object:moving, this.moving); this.canvas.on(before:render, this.beforeRender); this.canvas.on(after:render, this.afterRender);拖动对象时触发object:moving收集并吸附参考线缩放/拉伸时触发object:scaling/object:resizing按控制点corner计算吸附before:render清空顶层画布上下文after:render负责把参考线绘制到顶层上下文contextTopmouse:up时清空verticalLines、horizontalLines与cacheMap并请求重绘结束本次对齐。对应的解除绑定逻辑在dispose()中packages/aligning-guidelines/src/index.ts一一off掉上述事件即可彻底关闭。二、配置项全览参数语义与源码映射AligningLineConfig类型定义在 packages/aligning-guidelines/src/typedefs.ts所有配置项在AligningGuidelines类实例上都有默认值packages/aligning-guidelines/src/index.ts配置项默认值类型作用margin4number距对象多近像素时开始触发对齐吸附width1number参考线宽度像素colorrgba(255,0,0,0.9)string参考线颜色xSize2.4number参考线端点 X 标记的半尺寸lineDashundefinednumber[]虚线样式如[2, 2]closeVLinefalseboolean是否关闭垂直参考线绘制closeHLinefalseboolean是否关闭水平参考线绘制getObjectsByTarget默认实现函数返回参与对齐计算的对象集合getPointMap默认实现函数返回当前对象的操作点映射如tl/tr/br/bl/mt...getContraryMap默认实现函数返回与各操作点对角对应的定位点映射contraryOriginMap内置映射OriginMap每个控制点对应的[originX, originY]缩放时据此定位drawLine默认实现函数自定义参考线段绘制drawX默认实现函数自定义参考线端点标记绘制getCaCheMapValue默认实现函数自定义其他对象坐标点的缓存方式其中margin与缩放相关源码中两次出现this.margin / this.canvas.getZoom()collect-line.ts 与 collect-point.ts说明阈值会随画布缩放等比换算保证不同 zoom 下吸附手感一致。xSize、lineDash等绘制参数同样除以 zoom保证线宽和端点标记在缩放后视觉尺寸稳定见 draw.ts。三、吸附与绘制原理从事件到参考线的完整链路3.1 拖动时的吸附object:movingmoving()处理流程packages/aligning-guidelines/src/index.tstarget.setCoords()实时刷新对象坐标通过getObjectsByTarget(target)取参与对齐的候选对象对每个候选对象调用getCaCheMapValue得到其 4 个角点 中心点源码在 index.tsgetCoords()后push(getCenterPoint())以calcTransformMatrix()widthheight为 key 缓存到cacheMapcollectLine(target, points)在 collect-line.ts 中完成核心计算把当前对象 4 角 中心点与所有候选点按 x垂直参考线和 y水平参考线分别用getDistanceList求最近距离若最小距离 ≤margin/zoom则生成参考线并通过target.setXY(list[i], ...originArr[i])直接把对象吸附过去再setCoords()刷新参考线以JSON.stringify字符串存入verticalLines/horizontalLines两个Set去重源码注释明确说明对象不能直接去重、需转字符串。originArr[[left,top],[right,top],[right,bottom],[left,bottom],[center,center]]正是对齐时使用的 5 个参考原点与getPointMap的tl/tr/br/bl/center一一对应。吸附后还会把偏移量回写list与setCoords从而保证垂直、水平两组吸附不会互相覆盖。3.2 缩放/拉伸时的吸附object:scaling / object:resizingscalingOrResizing()处理流程packages/aligning-guidelines/src/index.tstarget.setCoords()实时刷新依据e.transform.action是否以scale开头判断是缩放还是改尺寸isScale翻转修正当对象被flipX/flipY时getCoords()返回的角点语义会互换tl↔tr、bl↔br、mb↔mt、ml↔mr源码通过替换corner字符串中的l/r、t/b进行纠偏getPointMap(target)取得当前操作角点坐标pointgetContraryMap(target)取得对角定位点diagonalPoint若按住中心键默认altKey即originX/originY均为center的isCenter场景对角点取两者中点diagonalPoint.add(p).scalarDivide(2)onlyDrawPoint当操作的是中心类控制点mt/mr/mb/mlcorner 含m时只绘制目标点、不绘制线段且此时若对象总旋转角不是 90° 的整数倍则直接返回旋转状态下中心点吸附无意义统一缩放判定uniformScaling与uniScaleKey默认 alt组合决定isUniform但中心点操作时强制isUniformfalse中心缩放本质是 skew无需等比分别在 collect-point.ts 的collectVerticalPoint/collectHorizontalPoint中按margin/zoom阈值找到最近 x/y计算缩放系数sx (v scaleWidth) / scaleWidthscaleWidth scaleX * width (strokeUniform ? 0 : strokeWidth)即含描边宽度的实际尺寸据此更新scaleX/scaleY或width/height再用setRelativeXY(diagonalPoint, ...contraryOriginMap[corner])固定对角点位置——这正是拖 tl 时以 br 为锚点的机理与contraryOriginMap中tl: [right,bottom]等映射完全对应见 index.ts。3.3 渲染把参考线画到顶层beforeRender调用canvas.clearContext(canvas.contextTop)清场afterRender决定画什么index.tsonlyDrawPoint为 truedrawPointList()只画端点标记不画线段否则drawVerticalLine()drawHorizontalLine()。绘制实现在 draw.tsdrawVerticalLine把{origin, target}组合成水平对齐的垂直线段o new Point(target.x, origin.y)drawHorizontalLine反之o new Point(origin.x, target.y)然后调用drawLine画线、drawX在两端画 X 标记线宽、虚线、端点尺寸均除以zoom以适配视口变换且绘制前应用ctx.transform(...viewportTransform)。参考线画在contextTop因此不会污染主画布内容。四、按需关闭与轻量定制几个最常用的配置组合4.1 只保留水平/垂直对齐new AligningGuidelines(myCanvas, { closeVLine: true, // 不画垂直参考线但仍做垂直吸附 closeHLine: true, // 不画水平参考线 });注意closeVLine/closeHLine只影响绘制不影响吸附计算对应 draw.ts 中的提前return。4.2 虚线样式 放大端点标记new AligningGuidelines(myCanvas, { lineDash: [2, 2], // 虚线 xSize: 10, // 端点 X 更大 });4.3 彻底关闭等价于不启用new AligningGuidelines(myCanvas, { closeVLine: true, closeHLine: true, getPointMap: function (_) { return {}; // 没有可对齐的点吸附与绘制都不会发生 }, });五、自定义参与对齐的对象只和同类元素比对默认实现getObjectsByTarget在 get-objects-by-target.ts 中遍历画布所有对象跳过不可见与不在屏isOnScreen对象对Group递归收集其子元素ActiveSelection则取其getObjects()作为自身并从候选中剔除。默认把所有对象含 Group 子元素作为对齐候选。如果需要只和兄弟元素比可覆写import { AligningGuidelines } from fabric/extensions; import { FabricObject } from fabric; new AligningGuidelines(myCanvas, { getObjectsByTarget: function (target) { const set new SetFabricObject(); const p target.parent ?? target.canvas; // 父级 Group 或画布 p?.getObjects().forEach((o) { set.add(o); }); // 请务必排除自己否则永远在和自己对齐 set.delete(target); return set; }, });返回值类型为SetFabricObject见 typedefs.ts后续collectLine/collectVerticalPoint都会遍历该集合取点。六、自定义对齐点只对齐指定控制点默认getPointMapbasic.ts返回 8 个操作点tl/tr/br/bl四个角mt/mr/mb/ml四边中点由相邻角点add(...).scalarDivide(2)得到。若只想用某个点对齐比如只对齐 tl 控制点import { AligningGuidelines } from fabric/extensions; new AligningGuidelines(myCanvas, { getPointMap: function (target) { const tl target.getCoords().tl; return { tl }; }, });返回的PointMap以控制点名称为 key、坐标为 valuescalingOrResizing里会校验corner in pointMap不在映射中的角点直接跳过对齐逻辑。七、自定义控制点自定义控制器完整接入三件套当给对象挂了自定义控制器例如名为abc的Control时要让对齐参考线认识新控制点需要同时提供getPointMap、getContraryMap和contraryOriginMapimport { AligningGuidelines } from fabric/extensions; import { InteractiveFabricObject, Control } from fabric; // 先接管控制器的创建避免默认控制点干扰 InteractiveFabricObject.createControls function () { return {}; }; // 自定义控制器 InteractiveFabricObject.ownDefaults.controls { abc: new Control({}), }; new AligningGuidelines(myCanvas, { // 操作点abc 控制点对应的实时坐标 getPointMap: function (target) { const abc target.getCoords().tl; return { abc }; }, // 对角定位点拉伸时固定不动的锚点 getContraryMap: function (target) { const abc target.aCoords.br; return { abc }; }, // 原点映射abc 是左上点则定位原点在右下 contraryOriginMap: { abc: [right, bottom], }, });三者配合的机理缩放/拉伸时collectPoint用getPointMap拿到实时操作点做距离匹配吸附成功后用setRelativeXY(diagonalPoint, ...contraryOriginMap[corner])固定对角锚点。默认实现可对照 basic.tsgetContraryMap使用aCoords而非旋转后的coords因为对角锚点始终以对象自身轴向为准。该映射关系同样被单元测试覆盖basic.spec.ts 验证了getPointMap的四角与四中点坐标、getContraryMap的角点对角关系tl→br、tr→bl、br→tl、bl→tr等。八、自定义绘制把直线参考线换成贝塞尔曲线8.1 自定义线段drawLine默认drawLine绘制直线并在两端画 X。如果想画贝塞尔曲线覆写即可注意this指向AligningGuidelines实例可直接访问canvas/width/lineDash/color/xSizeimport { AligningGuidelines } from fabric/extensions; new AligningGuidelines(myCanvas, { drawLine(origin, target) { const ctx this.canvas.getTopContext(); const viewportTransform this.canvas.viewportTransform; const zoom this.canvas.getZoom(); ctx.save(); ctx.transform(...viewportTransform); ctx.lineWidth this.width / zoom; if (this.lineDash) ctx.setLineDash(this.lineDash); ctx.strokeStyle this.color; ctx.beginPath(); ctx.moveTo(origin.x, origin.y); const controlPoint1 { x: (origin.x target.x) / 3, y: origin.y - 50 }; const controlPoint2 { x: (origin.x target.x) / 3, y: target.y 50 }; ctx.bezierCurveTo( controlPoint1.x, controlPoint1.y, controlPoint2.x, controlPoint2.y, target.x, target.y, ); ctx.stroke(); if (this.lineDash) ctx.setLineDash([]); this.drawX(origin, -1); // 起点标记 this.drawX(target, 1); // 终点标记 ctx.restore(); }, });默认实现细节可对照 draw.ts同样处理了viewportTransform、width/zoom与lineDash的保存/恢复收尾调用drawX(origin, -1)与drawX(target, 1)。8.2 自定义端点drawX默认端点是 X 交叉线draw.ts。想要实心圆起点、空心圆终点import { AligningGuidelines } from fabric/extensions; import { Point } from fabric; new AligningGuidelines(myCanvas, { drawX(point: Point, dir: number) { const ctx this.canvas.getTopContext(); const zoom this.canvas.getZoom(); const size this.xSize / zoom; ctx.save(); ctx.translate(point.x, point.y); ctx.beginPath(); ctx.arc(0, 0, size, 0, Math.PI * 2); if (dir -1) { ctx.fillStyle this.color; ctx.fill(); // 起点实心圆 } else { ctx.stroke(); // 终点空心圆 } ctx.restore(); }, });dir参数约定-1表示线段起点1表示终点0用于仅画点模式drawPointList调用见 draw.ts。九、性能与生命周期要点坐标缓存拖动过程中其他对象的角点/中心点坐标通过cacheMap缓存key 由calcTransformMatrix().toString() width height组成index.tsmouse:up时统一clear()避免每次 move 都重复计算全部坐标参考线去重verticalLines/horizontalLines用字符串化JSON.stringify的{origin, target}去重防止多个候选点产生重复线段index.ts只读画布参考线画在contextTop顶层上下文before:render清场、after:render重绘不侵入主画布渲染释放页面销毁画布前调用dispose()解绑全部监听避免内存泄漏与重复渲染。十、结语与进一步阅读对齐参考线看似简单落地时却涉及事件编排、坐标系变换翻转/旋转/缩放/描边、吸附阈值换算与顶层渲染等细节。AligningGuidelines把这一切封装为配置优先 钩子可覆写的结构日常使用只需传入margin/width/color等外观参数需要深度定制时getObjectsByTarget、getPointMap、getContraryMap、contraryOriginMap、drawLine、drawX六个钩子足以覆盖对齐谁、对齐哪个点、用什么锚点、画成什么样的全部诉求。想进一步深入推荐按以下路径阅读源码扩展入口与聚合导出packages/aligning-guidelines/src/index.ts、extensions/index.ts类型定义与默认值packages/aligning-guidelines/src/typedefs.ts吸附核心算法collect-line.ts、collect-point.ts绘制实现draw.ts默认候选对象收集get-objects-by-target.ts单测覆盖验证点映射与距离计算basic.spec.ts仓库内还提供了一组基于本扩展的端到端可视化测试packages/e2e/tests/guidelines/align-between-objects/含操作前后截图快照可作为接入后的行为验收基准。赞分享前端图形学【免费下载链接】fabric.jsJavascript Canvas Library, SVG-to-Canvas ( canvas-to-SVG) Parser项目地址https://gitcode.com/gh_mirrors/fa/fabric.js点击查看免费下载相关推荐比原版 Chromium 更快更顺手三步上手优化浏览器 Thorium比原版 Chromium 更快更顺手三步上手优化浏览器 Thorium 打开二十多个标签页普通 Chromium 开始卡顿升级到 M124 之后新界面又桌面应用跨平台react-diagrams 自定义指南从扩展模型到自绘组件掌握节点、端口与连线的完整定制模式react diagrams 自定义指南从扩展模型到自绘组件掌握节点、端口与连线的完整定制模式 react diagrams 中几乎所有的组件都是可定制的。UI组件前端LogicFlow 吸附对齐线Snapline完整指南节点对齐辅助原理与样式定制LogicFlow 吸附对齐线Snapline完整指南节点对齐辅助原理与样式定制 吸附对齐线Snapline是流程图编辑器中提升排版效率的关键交互能力前端低代码流程编排上一篇GetQzonehistory一键找回QQ空间消失的青春记忆完整导出历史说说实践指南下一篇3分钟快速备份GetQzonehistory帮你完整保存QQ空间青春记忆创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
Fabric.js 对齐参考线（Aligning Guidelines）扩展包实战指南：从快速接入到自定义控制点与绘制样式
前端图形学【免费下载链接】fabric.jsJavascript Canvas Library, SVG-to-Canvas ( canvas-to-SVG) Parser项目地址https://gitcode.com/gh_mirrors/fa/fabric.js点击查看免费下载导读fabricjs/aligning-guidelines是 Fabric.js 官方扩展包中用于提供对齐参考线能力的独立包当你在画布上拖动、缩放或拉伸一个对象时它会自动计算出该对象与画布上其他对象的对齐关系实时绘制出水平/垂直参考线并自动吸附snap到精确位置让对象排版对齐变得像 PS/PPT 一样直观。本文以 packages/aligning-guidelines/README.md 与 packages/aligning-guidelines/src/README.MD 为骨架结合仓库源码讲解接入方式、全部配置项、吸附原理以及自定义对齐对象、自定义对齐点、自定义控制点和自定义绘制样式等进阶玩法读完即可在项目里落地一套可定制的智能对齐辅助工具。注本文所述版本、API 与实现细节均以当前仓库fabric.js v7.4.0 时代代码为准包版本见 packages/aligning-guidelines/package.json。一、快速接入三步启用对齐参考线该扩展以AligningGuidelines类为核心依赖fabricjs/core见 package.json 的dependencies与engines.node 20。它并不内置在 fabric 主包中而是通过官方扩展聚合入口fabric/extensions统一导出import { AligningGuidelines } from fabric/extensions;从源码看extensions/index.ts 直接export * from fabricjs/aligning-guidelines所以也可以按包名单独导入。接入只需三步// 1. 创建配置对象全部可选 const options { /** At what distance from the shape does alignment begin? 距形状多近开始触发对齐 */ margin: 4, /** Aligning line dimensions 参考线宽度像素 */ width: 1, /** Aligning line color 参考线颜色 */ color: rgba(255,0,0,0.9), /** Close Vertical line, default false. 关闭垂直参考线 */ closeVLine: false, /** Close horizontal line, default false. 关闭水平参考线 */ closeHLine: false, }; // 2. 实例化并绑定到画布 const aligningGuidelines new AligningGuidelines(myCanvas, options); // 3. 需要禁用时调用 dispose // aligningGuidelines.dispose();AligningGuidelines构造函数会把options通过Object.assign合并到实例上见 packages/aligning-guidelines/src/index.ts随后调用initBehavior()自动注册监听事件this.canvas.on(mouse:up, this.mouseUp); this.canvas.on(object:resizing, this.scalingOrResizing); this.canvas.on(object:scaling, this.scalingOrResizing); this.canvas.on(object:moving, this.moving); this.canvas.on(before:render, this.beforeRender); this.canvas.on(after:render, this.afterRender);拖动对象时触发object:moving收集并吸附参考线缩放/拉伸时触发object:scaling/object:resizing按控制点corner计算吸附before:render清空顶层画布上下文after:render负责把参考线绘制到顶层上下文contextTopmouse:up时清空verticalLines、horizontalLines与cacheMap并请求重绘结束本次对齐。对应的解除绑定逻辑在dispose()中packages/aligning-guidelines/src/index.ts一一off掉上述事件即可彻底关闭。二、配置项全览参数语义与源码映射AligningLineConfig类型定义在 packages/aligning-guidelines/src/typedefs.ts所有配置项在AligningGuidelines类实例上都有默认值packages/aligning-guidelines/src/index.ts配置项默认值类型作用margin4number距对象多近像素时开始触发对齐吸附width1number参考线宽度像素colorrgba(255,0,0,0.9)string参考线颜色xSize2.4number参考线端点 X 标记的半尺寸lineDashundefinednumber[]虚线样式如[2, 2]closeVLinefalseboolean是否关闭垂直参考线绘制closeHLinefalseboolean是否关闭水平参考线绘制getObjectsByTarget默认实现函数返回参与对齐计算的对象集合getPointMap默认实现函数返回当前对象的操作点映射如tl/tr/br/bl/mt...getContraryMap默认实现函数返回与各操作点对角对应的定位点映射contraryOriginMap内置映射OriginMap每个控制点对应的[originX, originY]缩放时据此定位drawLine默认实现函数自定义参考线段绘制drawX默认实现函数自定义参考线端点标记绘制getCaCheMapValue默认实现函数自定义其他对象坐标点的缓存方式其中margin与缩放相关源码中两次出现this.margin / this.canvas.getZoom()collect-line.ts 与 collect-point.ts说明阈值会随画布缩放等比换算保证不同 zoom 下吸附手感一致。xSize、lineDash等绘制参数同样除以 zoom保证线宽和端点标记在缩放后视觉尺寸稳定见 draw.ts。三、吸附与绘制原理从事件到参考线的完整链路3.1 拖动时的吸附object:movingmoving()处理流程packages/aligning-guidelines/src/index.tstarget.setCoords()实时刷新对象坐标通过getObjectsByTarget(target)取参与对齐的候选对象对每个候选对象调用getCaCheMapValue得到其 4 个角点 中心点源码在 index.tsgetCoords()后push(getCenterPoint())以calcTransformMatrix()widthheight为 key 缓存到cacheMapcollectLine(target, points)在 collect-line.ts 中完成核心计算把当前对象 4 角 中心点与所有候选点按 x垂直参考线和 y水平参考线分别用getDistanceList求最近距离若最小距离 ≤margin/zoom则生成参考线并通过target.setXY(list[i], ...originArr[i])直接把对象吸附过去再setCoords()刷新参考线以JSON.stringify字符串存入verticalLines/horizontalLines两个Set去重源码注释明确说明对象不能直接去重、需转字符串。originArr[[left,top],[right,top],[right,bottom],[left,bottom],[center,center]]正是对齐时使用的 5 个参考原点与getPointMap的tl/tr/br/bl/center一一对应。吸附后还会把偏移量回写list与setCoords从而保证垂直、水平两组吸附不会互相覆盖。3.2 缩放/拉伸时的吸附object:scaling / object:resizingscalingOrResizing()处理流程packages/aligning-guidelines/src/index.tstarget.setCoords()实时刷新依据e.transform.action是否以scale开头判断是缩放还是改尺寸isScale翻转修正当对象被flipX/flipY时getCoords()返回的角点语义会互换tl↔tr、bl↔br、mb↔mt、ml↔mr源码通过替换corner字符串中的l/r、t/b进行纠偏getPointMap(target)取得当前操作角点坐标pointgetContraryMap(target)取得对角定位点diagonalPoint若按住中心键默认altKey即originX/originY均为center的isCenter场景对角点取两者中点diagonalPoint.add(p).scalarDivide(2)onlyDrawPoint当操作的是中心类控制点mt/mr/mb/mlcorner 含m时只绘制目标点、不绘制线段且此时若对象总旋转角不是 90° 的整数倍则直接返回旋转状态下中心点吸附无意义统一缩放判定uniformScaling与uniScaleKey默认 alt组合决定isUniform但中心点操作时强制isUniformfalse中心缩放本质是 skew无需等比分别在 collect-point.ts 的collectVerticalPoint/collectHorizontalPoint中按margin/zoom阈值找到最近 x/y计算缩放系数sx (v scaleWidth) / scaleWidthscaleWidth scaleX * width (strokeUniform ? 0 : strokeWidth)即含描边宽度的实际尺寸据此更新scaleX/scaleY或width/height再用setRelativeXY(diagonalPoint, ...contraryOriginMap[corner])固定对角点位置——这正是拖 tl 时以 br 为锚点的机理与contraryOriginMap中tl: [right,bottom]等映射完全对应见 index.ts。3.3 渲染把参考线画到顶层beforeRender调用canvas.clearContext(canvas.contextTop)清场afterRender决定画什么index.tsonlyDrawPoint为 truedrawPointList()只画端点标记不画线段否则drawVerticalLine()drawHorizontalLine()。绘制实现在 draw.tsdrawVerticalLine把{origin, target}组合成水平对齐的垂直线段o new Point(target.x, origin.y)drawHorizontalLine反之o new Point(origin.x, target.y)然后调用drawLine画线、drawX在两端画 X 标记线宽、虚线、端点尺寸均除以zoom以适配视口变换且绘制前应用ctx.transform(...viewportTransform)。参考线画在contextTop因此不会污染主画布内容。四、按需关闭与轻量定制几个最常用的配置组合4.1 只保留水平/垂直对齐new AligningGuidelines(myCanvas, { closeVLine: true, // 不画垂直参考线但仍做垂直吸附 closeHLine: true, // 不画水平参考线 });注意closeVLine/closeHLine只影响绘制不影响吸附计算对应 draw.ts 中的提前return。4.2 虚线样式 放大端点标记new AligningGuidelines(myCanvas, { lineDash: [2, 2], // 虚线 xSize: 10, // 端点 X 更大 });4.3 彻底关闭等价于不启用new AligningGuidelines(myCanvas, { closeVLine: true, closeHLine: true, getPointMap: function (_) { return {}; // 没有可对齐的点吸附与绘制都不会发生 }, });五、自定义参与对齐的对象只和同类元素比对默认实现getObjectsByTarget在 get-objects-by-target.ts 中遍历画布所有对象跳过不可见与不在屏isOnScreen对象对Group递归收集其子元素ActiveSelection则取其getObjects()作为自身并从候选中剔除。默认把所有对象含 Group 子元素作为对齐候选。如果需要只和兄弟元素比可覆写import { AligningGuidelines } from fabric/extensions; import { FabricObject } from fabric; new AligningGuidelines(myCanvas, { getObjectsByTarget: function (target) { const set new SetFabricObject(); const p target.parent ?? target.canvas; // 父级 Group 或画布 p?.getObjects().forEach((o) { set.add(o); }); // 请务必排除自己否则永远在和自己对齐 set.delete(target); return set; }, });返回值类型为SetFabricObject见 typedefs.ts后续collectLine/collectVerticalPoint都会遍历该集合取点。六、自定义对齐点只对齐指定控制点默认getPointMapbasic.ts返回 8 个操作点tl/tr/br/bl四个角mt/mr/mb/ml四边中点由相邻角点add(...).scalarDivide(2)得到。若只想用某个点对齐比如只对齐 tl 控制点import { AligningGuidelines } from fabric/extensions; new AligningGuidelines(myCanvas, { getPointMap: function (target) { const tl target.getCoords().tl; return { tl }; }, });返回的PointMap以控制点名称为 key、坐标为 valuescalingOrResizing里会校验corner in pointMap不在映射中的角点直接跳过对齐逻辑。七、自定义控制点自定义控制器完整接入三件套当给对象挂了自定义控制器例如名为abc的Control时要让对齐参考线认识新控制点需要同时提供getPointMap、getContraryMap和contraryOriginMapimport { AligningGuidelines } from fabric/extensions; import { InteractiveFabricObject, Control } from fabric; // 先接管控制器的创建避免默认控制点干扰 InteractiveFabricObject.createControls function () { return {}; }; // 自定义控制器 InteractiveFabricObject.ownDefaults.controls { abc: new Control({}), }; new AligningGuidelines(myCanvas, { // 操作点abc 控制点对应的实时坐标 getPointMap: function (target) { const abc target.getCoords().tl; return { abc }; }, // 对角定位点拉伸时固定不动的锚点 getContraryMap: function (target) { const abc target.aCoords.br; return { abc }; }, // 原点映射abc 是左上点则定位原点在右下 contraryOriginMap: { abc: [right, bottom], }, });三者配合的机理缩放/拉伸时collectPoint用getPointMap拿到实时操作点做距离匹配吸附成功后用setRelativeXY(diagonalPoint, ...contraryOriginMap[corner])固定对角锚点。默认实现可对照 basic.tsgetContraryMap使用aCoords而非旋转后的coords因为对角锚点始终以对象自身轴向为准。该映射关系同样被单元测试覆盖basic.spec.ts 验证了getPointMap的四角与四中点坐标、getContraryMap的角点对角关系tl→br、tr→bl、br→tl、bl→tr等。八、自定义绘制把直线参考线换成贝塞尔曲线8.1 自定义线段drawLine默认drawLine绘制直线并在两端画 X。如果想画贝塞尔曲线覆写即可注意this指向AligningGuidelines实例可直接访问canvas/width/lineDash/color/xSizeimport { AligningGuidelines } from fabric/extensions; new AligningGuidelines(myCanvas, { drawLine(origin, target) { const ctx this.canvas.getTopContext(); const viewportTransform this.canvas.viewportTransform; const zoom this.canvas.getZoom(); ctx.save(); ctx.transform(...viewportTransform); ctx.lineWidth this.width / zoom; if (this.lineDash) ctx.setLineDash(this.lineDash); ctx.strokeStyle this.color; ctx.beginPath(); ctx.moveTo(origin.x, origin.y); const controlPoint1 { x: (origin.x target.x) / 3, y: origin.y - 50 }; const controlPoint2 { x: (origin.x target.x) / 3, y: target.y 50 }; ctx.bezierCurveTo( controlPoint1.x, controlPoint1.y, controlPoint2.x, controlPoint2.y, target.x, target.y, ); ctx.stroke(); if (this.lineDash) ctx.setLineDash([]); this.drawX(origin, -1); // 起点标记 this.drawX(target, 1); // 终点标记 ctx.restore(); }, });默认实现细节可对照 draw.ts同样处理了viewportTransform、width/zoom与lineDash的保存/恢复收尾调用drawX(origin, -1)与drawX(target, 1)。8.2 自定义端点drawX默认端点是 X 交叉线draw.ts。想要实心圆起点、空心圆终点import { AligningGuidelines } from fabric/extensions; import { Point } from fabric; new AligningGuidelines(myCanvas, { drawX(point: Point, dir: number) { const ctx this.canvas.getTopContext(); const zoom this.canvas.getZoom(); const size this.xSize / zoom; ctx.save(); ctx.translate(point.x, point.y); ctx.beginPath(); ctx.arc(0, 0, size, 0, Math.PI * 2); if (dir -1) { ctx.fillStyle this.color; ctx.fill(); // 起点实心圆 } else { ctx.stroke(); // 终点空心圆 } ctx.restore(); }, });dir参数约定-1表示线段起点1表示终点0用于仅画点模式drawPointList调用见 draw.ts。九、性能与生命周期要点坐标缓存拖动过程中其他对象的角点/中心点坐标通过cacheMap缓存key 由calcTransformMatrix().toString() width height组成index.tsmouse:up时统一clear()避免每次 move 都重复计算全部坐标参考线去重verticalLines/horizontalLines用字符串化JSON.stringify的{origin, target}去重防止多个候选点产生重复线段index.ts只读画布参考线画在contextTop顶层上下文before:render清场、after:render重绘不侵入主画布渲染释放页面销毁画布前调用dispose()解绑全部监听避免内存泄漏与重复渲染。十、结语与进一步阅读对齐参考线看似简单落地时却涉及事件编排、坐标系变换翻转/旋转/缩放/描边、吸附阈值换算与顶层渲染等细节。AligningGuidelines把这一切封装为配置优先 钩子可覆写的结构日常使用只需传入margin/width/color等外观参数需要深度定制时getObjectsByTarget、getPointMap、getContraryMap、contraryOriginMap、drawLine、drawX六个钩子足以覆盖对齐谁、对齐哪个点、用什么锚点、画成什么样的全部诉求。想进一步深入推荐按以下路径阅读源码扩展入口与聚合导出packages/aligning-guidelines/src/index.ts、extensions/index.ts类型定义与默认值packages/aligning-guidelines/src/typedefs.ts吸附核心算法collect-line.ts、collect-point.ts绘制实现draw.ts默认候选对象收集get-objects-by-target.ts单测覆盖验证点映射与距离计算basic.spec.ts仓库内还提供了一组基于本扩展的端到端可视化测试packages/e2e/tests/guidelines/align-between-objects/含操作前后截图快照可作为接入后的行为验收基准。赞分享前端图形学【免费下载链接】fabric.jsJavascript Canvas Library, SVG-to-Canvas ( canvas-to-SVG) Parser项目地址https://gitcode.com/gh_mirrors/fa/fabric.js点击查看免费下载相关推荐比原版 Chromium 更快更顺手三步上手优化浏览器 Thorium比原版 Chromium 更快更顺手三步上手优化浏览器 Thorium 打开二十多个标签页普通 Chromium 开始卡顿升级到 M124 之后新界面又桌面应用跨平台react-diagrams 自定义指南从扩展模型到自绘组件掌握节点、端口与连线的完整定制模式react diagrams 自定义指南从扩展模型到自绘组件掌握节点、端口与连线的完整定制模式 react diagrams 中几乎所有的组件都是可定制的。UI组件前端LogicFlow 吸附对齐线Snapline完整指南节点对齐辅助原理与样式定制LogicFlow 吸附对齐线Snapline完整指南节点对齐辅助原理与样式定制 吸附对齐线Snapline是流程图编辑器中提升排版效率的关键交互能力前端低代码流程编排上一篇GetQzonehistory一键找回QQ空间消失的青春记忆完整导出历史说说实践指南下一篇3分钟快速备份GetQzonehistory帮你完整保存QQ空间青春记忆创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
