css svg中的肩关节旋转

nlejzf6q  于 2022-12-15  发布在  其他
关注(0)|答案(1)|浏览(92)

需要帮助gurus svg。代码在链接中提供。现在我的最小的机械臂相对于第一个机械臂沿着滑块移动。我想修复它。最小的肩膀相对于中间的肩膀移动是必要的,而不是大的肩膀。拜托!我将感谢你的帮助!https://codesandbox.io/s/beautiful-taussig-z3ct8v?file=/sketch.js

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);

  rotate(radians(rotSliderC.value()));
  ellipse(100, 0, 3, 3);
  rect(80, -h3/2, w3/2, h3);
}
dfuffjeb

dfuffjeb1#

绘制完第二个手臂(rect)后,应该调用translate(w2 - 20, 0);来移动旋转中心。
完整绘图功能,请参阅下图:

//////////////////////////////////////////////////
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);

  rotate(radians(rotSliderC.value()));
  ellipse(0, 0, 3, 3);

  rect(-10, -h3 / 2, w3, h3);
}

相关问题