javascript - kinectJs 两个图像的旋转

Question

我有 2 张图像，分别是上臂和前臂。上臂绕一个点旋转，前臂绕这个点旋转。

旋转上臂时如何旋转前臂？

如果我将上臂旋转12度，那么我必须将前臂移动到上臂的旋转点，然后旋转它，但我似乎无法让前臂在旋转后移回原来的位置。我做错了什么。

我用于 kinectjs 事件的代码；

//upper rotate
        upperArmImg.on('mousedown',function(evt) {  


            upperArmImg.rotateDeg(12);          

            p.x=upperArmImg.x();
            p.y=upperArmImg.y();            


            //move the formarm to center of rotation
            foreArmImg.setPosition(p);
            foreArmImg.rotateDeg(12);

            //move it back some ???                 
            foreArmImg.move(100,100);               


            stage.draw();
        });

Answer 1

关节运动的关键是将所有 ARM 部件放在一个组中，然后设置适当的偏移点。

偏移点的重要性在于它们设置任何 ARM 部分将旋转的位置(==旋转点)

以下概述了如何为上臂和下臂添加动力运动:

• 将上臂和下臂放在一组

• 将组、上下偏移(==旋转点)设置为 { x:0, y:armDiameter/2 }

• 要旋转上臂，请更改组旋转

• 要旋转下臂，请更改下臂旋转

组旋转 == 0 度，下旋转 == 0 度

组旋转 == 50 度，下旋转 == 0 度

组旋转 == 50 度，下旋转 == 65 度

这里是示例代码和演示:

var stage = new Kinetic.Stage({
  container: 'container',
  width: 350,
  height: 350
});
var layer = new Kinetic.Layer();
stage.add(layer);



var lastWidth = 0;
var baseGroup = new Kinetic.Group({
  x: 50,
  y: 200,
  draggable: true
});
layer.add(baseGroup);
var lastParent = baseGroup;

var appendages = [];
appendages.push({
  name: 'shoulder',
  width: 50,
  diameter: 20,
  fill: 'brown'
});
appendages.push({
  name: 'elbow',
  width: 80,
  diameter: 20,
  fill: 'peru'
});
appendages.push({
  name: 'hand',
  width: 30,
  diameter: 20,
  fill: 'tan'
});
appendages.push({
  name: 'finger',
  width: 15,
  diameter: 20,
  fill: 'wheat'
});

for (var i = 0; i < appendages.length; i++) {

  lastParent = addAppendage(i);
  appendages[i].group = lastParent;

  var appendage = appendages[i];
  var html = "Rotate " + appendage.name + ":";
  html += "<input id=" + appendage.name;
  html += " data-apindex='" + i + "'";
  html += " class='apRange' type=range min=0 max=90 value=0><br>";
  $('body').append(html);

}


$('.apRange').change(function() {
  var appendageIndex = parseInt($(this).data('apindex'));
  appendages[appendageIndex].group.rotation(-parseInt($(this).val()));
  layer.draw();
});




function addAppendage(i) {

  var appendage = appendages[i];
  var d2 = appendage.diameter / 2;

  // new group for this appendage
  var newGroup = new Kinetic.Group({
    x: lastWidth,
    y: 0,
    rotation: 0,
    offset: {
      x: 0,
      y: 0
    },
  });
  newGroup.appendageIndex = i;
  lastParent.add(newGroup);

  // new appendage
  var a = new Kinetic.Rect({
    x: 0,
    y: 0,
    width: appendage.width,
    height: d2 * 2,
    fill: appendage.fill,
    stroke: 'black',
    offset: {
      x: 0,
      y: d2
    },
  });
  newGroup.add(a);

  // new joint indicator
  var j = new Kinetic.Circle({
    x: 0,
    y: 0,
    radius: d2 / 2,
    fill: "red",
    offset: {
      x: 0,
      y: 0
    },
  });
  newGroup.add(j);

  // display new objects
  layer.draw();

  // save width for next loop
  lastWidth = appendage.width;

  // return latest group
  return (newGroup);
}

body {
  padding: 20px;
}
#container {
  border: solid 1px #ccc;
  margin-top: 10px;
  width: 350px;
  height: 350px;
}

<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v5.1.0.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="container"></div>