如何为jsPDF的AcroFormRadioButton自定义单选按钮选中图标？

jsPDF的AcroFormRadioButton类默认只提供Circle和Cross两种选中样式，要实现对勾样式，需要手动自定义单选按钮的外观字典（AP），直接在PDF的外观对象中绘制对勾路径。

以下是修改后的完整代码，替换你原来的radioGroup.setAppearance部分：

let radioGroup = new doc.AcroFormRadioButton();
let formX = 20, formY = 220, radioSize = 4, radioRadius = 1;
var radioButton1 = radioGroup.createOption("Status1");
// 移除重复创建的radioButton1行
radioButton1.Rect = [formX, formY, radioSize, radioSize];
doc.roundedRect(formX, formY, radioSize, radioSize, radioRadius, radioRadius, "D");
doc.setFont(undefined, "bold").setFontSize(10).setTextColor(110, 117, 124);
doc.text("Completed", formX + 7, formY + 3.5);

// 自定义对勾外观
radioGroup.options.forEach(option => {
  // 初始化外观字典
  option.AP = option.AP || {};
  option.AP.N = option.AP.N || {};

  // 未选中状态：保留空心圆边框
  const normalOff = doc.internal.newObject();
  doc.internal.writeToObject(normalOff, `/Type /XObject /Subtype /Form /BBox [0 0 ${radioSize} ${radioSize}] /Resources <<>>`);
  doc.internal.writeStream(normalOff);
  doc.setCurrentFilePointer(normalOff.offset);
  doc.roundedRect(0, 0, radioSize, radioSize, radioRadius, radioRadius, "D");
  doc.internal.writeEOFB();
  option.AP.N.Off = normalOff;

  // 选中状态：绘制带对勾的圆
  const normalOn = doc.internal.newObject();
  doc.internal.writeToObject(normalOn, `/Type /XObject /Subtype /Form /BBox [0 0 ${radioSize} ${radioSize}] /Resources <<>>`);
  doc.internal.writeStream(normalOn);
  doc.setCurrentFilePointer(normalOn.offset);
  // 先绘制边框
  doc.roundedRect(0, 0, radioSize, radioSize, radioRadius, radioRadius, "D");
  // 绘制对勾：调整参数可改变对勾大小位置
  const tickOffset = radioSize * 0.25;
  const tickLength = radioSize * 0.5;
  doc.moveTo(tickOffset, radioSize / 2);
  doc.lineTo(radioSize / 2, radioSize - tickOffset);
  doc.lineTo(radioSize - tickOffset, tickOffset);
  doc.stroke();
  doc.internal.writeEOFB();
  option.AP.N.Yes = normalOn;
});

// 将单选按钮组添加到文档
doc.addField(radioGroup);

关键说明： #

• 直接操作单选按钮的AP（Appearance）字典，分别定义Off（未选中）和Yes（选中）状态的外观对象
• 对勾的坐标基于单选按钮内部的BBox（0,0到radioSize,radioSize）绘制，通过tickOffset和tickLength可调整对勾的尺寸和位置
• 未选中状态的外观和你手动绘制的roundedRect保持一致，避免视觉差异
• 遍历所有选项设置外观，确保组内每个单选按钮都使用对勾样式

内容的提问来源于stack exchange，提问作者Tuna