什么是CodeRider

驭码CodeRider 是极狐GitLab 推出的基于生成式人工智能技术的新一代软件生产工具，为开发者提供自然语言生成代码、代码补全、代码调优纠错、单元测试生成、代码解释以及智能技术问答等功能。CodeRider 与 GitLab 深度融合，为企业提供软件开发全生命周期（SDLC）的支持，涵盖项目快速上手、企业文档库/代码仓智能问答、议题管理、合并请求智能辅助、代码智能评审、安全扫描智能解析、流水线管理等功能。

如和使用CodeRider

如下图所示在 vscode 的扩展中搜索 驭码， 在搜索的结果中找到驭码CodeRider 点击安装

登录驭码流程

1. 侧边栏找到驭码的图标点击
2. 点击个人令牌登录
3. 点击创建按钮
4. 此处如果没有 GitLab 账户需要注册一下， 如果有账户的画， 可以直接进行令牌的创建流程， 添加一个令牌名称， 并且将权限全部勾选点击创建即可
5. 复制创建好的个人令牌，将其粘贴到 步骤3的输入框内
   6.点击登录 ，此时便完成了驭码CodeRider 的登录啦， 详细操作步骤如下图所示

登录完成之后就可以尽情的体验啦~~

快捷键

驭码CodeRider 操作的快捷键总结如下

操作	macOS	Windows
代码补全 - 接受全部建议	Tab	Tab
代码补全 - 逐片段接受建议	⌘ + →	Ctrl + →
代码补全 - 废弃建议	esc	esc
代码补全增强	⌥ + I	Alt + I
"代码补全单行"模式： 多行补全	⌥ + M	Alt + M
唤醒流水线操作	⇧ + ⌘ + P，输入"GitLab: 流水线操作"	Shift + Ctrl + P，输入"GitLab: 流水线操作"
唤醒 GitLab 快捷操作	⇧ + ⌘ + P，输入"GitLab"	Shift + Ctrl + P，输入"GitLab"
唤醒智能问答窗口	⌥ + /	Alt + /
唤醒内联操作窗口	⌥ + K	Alt + K
Loom 切换"计划"/"执行"模式	⌘ + ⇧ + T	Win + Shift + T

支持的IDE

目前驭码CodeRider支持以下IDE：

• Visual Studio Code
• JetBrains IDEs
• Cursor

解决复杂难题

起因

公司大佬使用矩阵写了一个与图形编辑器相关的内容 ， 现在突然增加需求， 要求编辑器的边框颜色 以及手柄的颜色 要与整个编辑器的颜色设置保持一致。

由于涉及我司核心代码，因此不能全部展示， 在此只做简单的说明一下需求

1. 在一个画布编辑器中存在多个元素， 如图片表格等
2. 每个元素均有自己的属性如宽高旋转角度位置信息
3. 通过矩阵的方法将每个元素转换成向量坐标， 从而避免旋转和画布缩放引发的副作用
4. 每个画布编辑器均存在对于元素的颜色设置按钮，通过编辑来设置每个元素的外边框

现在的需求是，对于图片素材的裁剪时其外边框和拖拽手柄没有与编辑器颜色保持一致，需要修改

问题处理

由于该处的代码我是第一次接触， 所以没有时间去详细了解代码，此时我将代码文件在驭码中进行引用并提出问题，如下图所示：

然后通过驭码 给我的讲解来修复代码最终完成，
驭码给出的分析如下

裁剪框实现原理

裁剪框由以下组件构成：

外部遮罩 (_outsideMask)：深色半透明背景
裁剪区域 (_holeMask)：透明区域显示被裁剪的图片
控制点 (_controlPoints)：8个可拖拽点用于调整裁剪框大小
旋转按钮 (_rotationBtn)：用于旋转裁剪框
边框 (_cutBorder)：红色边框显示裁剪区域
2. 关键矩阵变换
_canvasToWorkspaceMatrix：画布到工作区坐标的转换矩阵
_canvasToWorkspaceInverseMatrix：工作区到画布坐标的逆矩阵
_parentWorldInvertMatrix：父元素的世界逆矩阵
3. 裁剪框数据结构
_cutterBox 对象包含裁剪框的核心属性

逻辑添加核心代码

// 在类中添加私有变量存储颜色
private _borderColor: number = 0xff0000; // 默认红色
private _controlPointColor: number = 0xff0000; // 默认红色

// 添加设置颜色的公共方法
public setColors(borderColor: number, controlPointColor: number) {
  this._borderColor = borderColor;
  this._controlPointColor = controlPointColor;
  
  // 更新控制点颜色
  this.updateControlPointsColor();
  
  // 更新边框颜色
  this.updateBorderColor();
  
  // 重绘UI
  this.updateShape();
}

// 更新控制点颜色
private updateControlPointsColor() {
  if (!this._controlPoints) return;
  
  this._controlPoints.forEach(point => {
    point.clear();
    point.beginFill(this._controlPointColor);
    point.drawCircle(0, 0, 8);
    point.endFill();
  });
}

// 更新边框颜色
private updateBorderColor() {
  if (!this._cutBorder) return;
  
  const border = this._cutBorder;
  border.clear();
  border.lineStyle(2, this._borderColor, 1);
  border.beginFill(0x000000, 0);
  border.drawRect(
    -this._cutterBox.width / 2,
    -this._cutterBox.height / 2,
    this._cutterBox.width,
    this._cutterBox.height
  );
  border.endFill();
}

// 在 initOperator 方法中，使用颜色变量
public initOperator() {
  // ... 其他代码不变
  
  // 控制点使用 _controlPointColor
  for (let i = 0; i < CONTROL_POINTS_LIST.length; i++) {
    const point = new PIXI.Graphics();
    point.beginFill(this._controlPointColor); // 使用颜色变量
    point.drawCircle(0, 0, 8);
    point.endFill();
    // ... 其他代码不变
  }
  
  // ... 其他代码不变
}

// 在 updateShape 方法中，使用颜色变量
public updateShape() {
  // ... 其他代码不变
  
  // 使用 _borderColor 变量
  border.lineStyle(2, this._borderColor, 1);
  
  // ... 其他代码不变
}

至此通过 驭码的分析与讲解， 是我在5分钟的时间快速完成需求，将项目顺利的进行部署

总结

现在的ai代码层出不穷，大家对于哪款助手更加的喜欢呢， 给出你的选择投票哦！