SVG机械臂旋转问题求助：最小臂需相对中臂而非大臂运动

修改后的代码 #

var rotSliderA, rotSliderB, rotSliderC;

var w1 = 150;
var h1 = 25;
var w2 = 100;
var h2 = 20;
var w3 = 150;
var h3 = 15;
/////////////////////////////////////////////////
function setup() {
  createCanvas(720, 400);
  rotSliderA = createSlider(0, 180, 0);
  rotSliderA.position(20, 20);
  rotSliderA.style('width', '200px');
  rotSliderB = createSlider(0, 180, 0);
  rotSliderB.position(20, 50);
  rotSliderB.style('width', '200px');
  rotSliderC = createSlider(0, 180, 0);
  rotSliderC.position(40, 70);
  rotSliderC.style('width', '200px');
}
//////////////////////////////////////////////////
function draw() {
  strokeWeight(3);
  noFill();
  background(200);

  translate(width / 2, height / 2);

  ellipse(0, 0, 3, 3);

  // 绘制大臂
  rotate(radians(rotSliderA.value()));
  rect(-10, -h1 / 2, w1, h1);
  translate(w1 - 20, 0); // 移动到大臂末端

  ellipse(0, 0, 3, 3);
  
  // 绘制中臂
  rotate(radians(rotSliderB.value()));
  rect(-10, -h2 / 2, w2, h2);
  translate(w2 - 20, 0); // 移动到中臂末端

  ellipse(0, 0, 3, 3); // 标记中臂末端

  // 绘制最小臂（基于中臂末端坐标系旋转）
  rotate(radians(rotSliderC.value()));
  rect(80, -h3/2, w3/2, h3);
}

关键改动说明 #

• 绘制完中臂后新增translate(w2 - 20, 0)，将坐标系原点移动到中臂末端，让后续的旋转操作基于中臂位置执行。
• 添加中臂末端的标记点，方便直观确认坐标系位置。
• 移除原代码中基于大臂末端偏移的椭圆标记，因为最小臂的基准已改为中臂末端。

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