Delphi Canvas.Pie绘制60度扇形技术求助

参数解析 #

对于canvas.pie(x1,y1,x2,y2,x3,y3,x4,y4)：

• x1, y1：扇形所在外接矩形的左上角坐标
• x2, y2：外接矩形的右下角坐标，由此可计算出扇形对应圆形的圆心为((x1+x2)/2, (y1+y2)/2)，半径为Math.min((x2-x1)/2, (y2-y1)/2)（若要绘制正圆扇形，需保证x2-x1 = y2-y1，即外接矩形为正方形）
• x3, y3：扇形起始边的端点坐标，该点必须落在上述圆形的圆周上
• x4, y4：扇形终止边的端点坐标，同样需落在圆形的圆周上

角度转换与坐标计算 #

你提到的方位角（0度指向正北，顺时针递增）和Canvas默认的角度体系（0度指向右方，逆时针递增）存在差异，需先做转换：

1. 将方位角转换为Canvas角度：canvasAngle = 90 - 方位角（转换后加360取模，保证数值在0-360范围内）
2. 将角度转换为弧度：radian = canvasAngle * Math.PI / 180
3. 根据圆心和半径计算圆周上的点坐标：
   • x = 圆心x + 半径 * Math.cos(radian)
   • y = 圆心y + 半径 * Math.sin(radian)

目标扇形示例代码 #

以下是绘制你需要的起始方位角300度、终止方位角30度、实心绿色扇形的完整代码：

// 获取canvas元素与绘图上下文
const canvas = document.getElementById('yourCanvasId');
const ctx = canvas.getContext('2d');

// 定义外接矩形参数（正方形，保证正圆扇形）
const x1 = 50;
const y1 = 50;
const x2 = 250;
const y2 = 250;

// 计算圆心与半径
const centerX = (x1 + x2) / 2;
const centerY = (y1 + y2) / 2;
const radius = (x2 - x1) / 2;

// 方位角转Canvas角度并计算弧度
// 起始方位角300度
let startAzimuth = 300;
let startCanvasAngle = (90 - startAzimuth + 360) % 360;
let startRadian = startCanvasAngle * Math.PI / 180;
// 终止方位角30度
let endAzimuth = 30;
let endCanvasAngle = (90 - endAzimuth + 360) % 360;
let endRadian = endCanvasAngle * Math.PI / 180;

// 计算起始点(x3,y3)和终止点(x4,y4)
const x3 = centerX + radius * Math.cos(startRadian);
const y3 = centerY + radius * Math.sin(startRadian);
const x4 = centerX + radius * Math.cos(endRadian);
const y4 = centerY + radius * Math.sin(endRadian);

// 原生Canvas绘制实心扇形
ctx.fillStyle = '#008000';
ctx.beginPath();
ctx.moveTo(centerX, centerY);
ctx.arc(centerX, centerY, radius, startRadian, endRadian);
ctx.closePath();
ctx.fill();

// 若使用特定Canvas库的pie方法，替换为以下代码：
// ctx.fillStyle = '#008000';
// ctx.pie(x1, y1, x2, y2, x3, y3, x4, y4);
// ctx.fill();

注：部分Canvas库的pie方法会自动连接圆心与端点形成闭合路径，原生Canvas则需手动通过路径方法实现，上述代码覆盖两种场景。

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