我试图旋转手臂，当我点击上臂时它会旋转12度。我如何以相同的方式旋转下臂，使其连接到上臂。我在两个图像中设置了一个偏移，即旋转点。谁能帮忙。
我想我需要将两个旋转点转换相同的量？任何帮助都会很棒。
<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v5.0.1.min.js"></script>
<script>
function loadImages(sources, callback) {
var images = {};
var loadedImages = 0;
var numImages = 0;
for(var src in sources) {
numImages++;
}
for(var src in sources) {
images[src] = new Image();
images[src].onload = function() {
if(++loadedImages >= numImages) {
callback(images);
}
};
images[src].src = sources[src];
}
}
function initStage(images) {
var stage = new Kinetic.Stage({
container: 'container',
width: 1600,
height: 1200
});
//body
var bodyGroup = new Kinetic.Group({
x: 0,
y: 0,
draggable: false
});
//arm
var armGroup = new Kinetic.Group({
x: 0,
y: 0,
draggable: false
});
var layer = new Kinetic.Layer();
/*
* go ahead and add the groups
* to the layer and the layer to the
* stage so that the groups have knowledge
* of its layer and stage
*/
layer.add(bodyGroup);
layer.add(armGroup);
stage.add(layer);
//**********************************************************
//body image
//bodyImg=createNewKineticImage(0,0,images.body);
//**********************************************************
//ARM
//START POINT
//**********************************************************
upperArmX=800;
upperArmY=600;
//**********************************************************
//upperarm
//**********************************************************
var upperArmImg=createNewKineticImage(upperArmX,upperArmY,images.upperarm);
upperArmImg.offsetX(upperArmImg.width());
upperArmImg.offsetY(upperArmImg.height()/2);
//**********************************************************
//**********************************************************
//fore arm
//**********************************************************
var foreArmImg=createNewKineticImage(upperArmX,upperArmY,images.forearm);
foreArmImg.offsetX(foreArmImg.width()/2);
foreArmImg.offsetY(foreArmImg.height());
foreArmImg.x(foreArmImg.x()-upperArmImg.width());
foreArmImg.rotate(-90);
//**********************************************************
//**********************************************************
//hand arm
//**********************************************************
/*
var handArmImg=createNewKineticImage(upperArmX,upperArmY,images.hand);
handArmImg.offsetX(handArmImg.width()/2);
handArmImg.x(handArmImg.x()-(upperArmImg.width()+foreArmImg.height()));
*/
//**********************************************************
//groups
//bodyGroup.add(bodyImg);
//arm group
armGroup.add(upperArmImg);
armGroup.add(foreArmImg);
//armGroup.add(handArmImg);
//EVENTS
//**********************************************************
//**********************************************************
//allow dragged image to move to top layer
bodyGroup.on('dragstart', function() {
this.moveToTop();
});
//upper rotate
upperArmImg.on('mousedown',function(evt) {
console.log('down');
//rotate
this.rotateDeg(12);
foreArmImg.rotate(12);
stage.draw();
});
foreArmImg.on('mousedown',function(evt) {
console.log('down');
//rotate
this.rotateDeg(-12);
stage.draw();
});
/*
//hand events
handArmImg.on('mousedown',function(evt) {
console.log('down');
//rotate
this.rotateDeg(-12);
stage.draw();
});
*/
//DEBUG
stage.on('mousemove',function(evt) {
console.log("x, "+evt.x +" y " + evt.y);
//stage.draw();
});
/*
var oldY;
forearmImg.on('mousedown',function(evt) {
//is y up or down
if(oldY==0)
oldY=evt.y;
console.log("y "+evt.y);
console.log("oldy "+oldY);
});
// for change events, get the old and new val
forearmImg.on('xChange', function(evt) {
var oldVal = evt.oldVal;
var newVal = evt.newVal;
console.log("oldVal "+oldVal);
console.log("newVal "+newVal);
});
*/
stage.draw();
}
//create a new kinectic image object
function createNewKineticImage(x,y,imgObject)
{
var newImg = new Kinetic.Image({
x: x,
y: y,
image: imgObject,
name: 'image'
})
return newImg;
}
//create a new kinectic image object specifying the widht and height
function createNewKineticImageWithSize(x,y,imgObject,w,h)
{
var newImg = new Kinetic.Image({
x: x,
y: y,
image: imgObject,
width: w,
height: h,
name: 'image'
})
return newImg;
}
function createNewKineticImageOffSet(x,y,imgObject,w,h,offX,offY)
{
var newImg = new Kinetic.Image({
x: x,
y: y,
width: w,
height: h,
image: imgObject,
name: 'image',
offset: {x:offX, y:offY}
})
return newImg;
}
var sources = {
body: 'teddybear_gfx/body.png',
forearm: 'teddybear_gfx/forearm.png',
upperarm: 'teddybear_gfx/lowerarm.png',
hand: 'teddybear_gfx/hand.png'
};
loadImages(sources, initStage);
</script>
工作演示（无法使用jsfiddle。