Jquery 调整大小后，旋转定位点未固定在图像上

我有五个锚，中间一个是用来旋转的。它与原始尺寸配合得很好。但在调整大小后，当我单击它时，锚就会从图像上飞走。我确实把这个职位换成了新的

函数更新（activeAnchor）{
var group=activeAnchor.getParent（）；
var topLeft=group.get（'.topLeft'）[0]；
var topRight=group.get（'.topRight'）[0]；
var bottomRight=group.get（'.bottomRight'）[0]；
var bottomLeft=group.get（'.bottomLeft'）[0]；
//var rotateAnchor=group.get（'.rotateAnchor'）[0]；
var rotateAnchorNew=group.get（'.rotateAnchorNew'）[0]；
var image=group.get（'image'）[0]；
var anchorX=activeAnchor.getX（）；
var anchorY=activeAnchor.getY（）；
var imageWidth=image.getWidth（）；
var imageHeight=image.getHeight（）；
//更新锚点位置
开关（activeAnchor.getName（））{
//案例“rotateAnchor”：
//中断；
案例“rotateAnchorNew”：
打破
案例“左上角”：
右上角。赛蒂（安科里）；
左下角。setX（anchorX）；
打破
案例“右上角”：
左上。赛蒂（安科里）；
右下角。setX（anchorX）；
打破
案例“右下角”：
右上角.setX（主播）；
左下角。setY（anchorY）；
打破
案例“左下角”：
左上角。setX（主播）；
右下角。赛蒂（安科里）；
打破
}
if（topRight.getX（）

KineticJS根据偏移自动调整对象的左上位置

这是令人沮丧的，因为必须使用相同的偏移来设置旋转点

因此，很难将图像的[x，y，offsetX，offsetY]与定位点的[x，y]进行协调，尤其是当图像已调整大小并旋转时

如果您的图像或锚点意外“跳跃”，则您正在体验使用KineticJS偏移的副作用

这里有一种解决这一难题的方法：

• 将旋转点声明为图像的中心点

• 使用此中心点旋转点定位图像和定位点

• 激活任何定位后，使用此中心点重置图像的x、y和偏移

• 激活任何定位点后，相对于该中心点重新定位所有定位点

通过相对于旋转点进行所有变换，您无需将图像的x，y与每个锚点的x，y进行协调

以下是注释代码和演示：

正文{填充：20px；背景：浅灰色}
#容器{
边框：实心1px绿色；
边缘顶部：10px；
宽度：400px；
高度：400px；
}
$（函数（）{
//创建舞台和图层
var阶段=新的动力学阶段({
容器：'容器'，
宽度：400，
身高：400
});
var layer=新的动能层（）；
阶段。添加（层）；
//创建用于拖动或移动图像的锚点
var spotXY=新的动力学圆({
x:0，y:0，半径：10，
填充：“蓝色”，笔划：“黑色”，
德拉格布尔：是的
});
on（“dragmove”，function（））{
setNode（image，this.x（），this.y（），image.width（），image.height（），image.rotation（））；
});
添加图层（spotXY）；
//创建用于拖动并调整图像大小的锚点
var resizer=新的动力学圆({
x:0，y:0，半径：10，
填充：“红色”，笔划：“黑色”，
德拉格布尔：是的
});
on（“dragmove”，function（））{
var dx=this.x（）-spotXY.x（）；
var dy=this.y（）-spotXY.y（）；
var w=数学sqrt（dx*dx+dy*dy）*2；
var h=w*hRatio；
setNode（image，spotXY.x（），spotXY.y（），w，h，image.rotation（））；
});
图层。添加（调整大小器）；
//创建用于拖动和旋转图像的锚点
var旋转器=新的动力学圆({
x:0，y:0，半径：10，
填充：“金色”，笔划：“黑色”，
德拉格布尔：是的
});
旋转器。on（“拖动”，函数（）{
var dx=this.x（）-spotXY.x（）；
var dy=this.y（）-spotXY.y（）；
变量角度=数学atan2（dy，dx）*180/数学PI；
setNode（image，spotXY.x（），spotXY.y（），image.width（），image.height（），angle）；
});
层。添加（旋转器）；
//始终根据图像的原始纵横比按比例调整图像大小
//此变量用于保持该比例
瓦赫拉蒂奥；
//加载图像
var img=新图像（）；
img.onload=启动；
img.src=”https://dl.dropboxusercontent.com/u/139992952/stackoverflow/facesSmall.png";
函数start（）{
//保存图像原始纵横比
hRatio=img.高度/img.宽度；
//开始
loadK（150150）；
};
函数加载k（x，y）{
//创建一个图像元素
图像=新的动力学图像({
x:0，y:0，宽度：10，高度：10，
图片：img，
轮换：0，
});
图层。添加（图像）；
//setNode将在需要时重置所有图像和定位属性
//这将在启动时设置初始属性
设置节点（图像，x，y，图像宽度，图像高度，45）；
//
  function update(activeAnchor) {
    var group = activeAnchor.getParent();

    var topLeft = group.get('.topLeft')[0];
    var topRight = group.get('.topRight')[0];
    var bottomRight = group.get('.bottomRight')[0];
    var bottomLeft = group.get('.bottomLeft')[0];

    //var rotateAnchor = group.get('.rotateAnchor')[0];
    var rotateAnchorNew = group.get('.rotateAnchorNew')[0];
    var image = group.get('Image')[0];

    var anchorX = activeAnchor.getX();
    var anchorY = activeAnchor.getY();
    var imageWidth = image.getWidth();
    var imageHeight = image.getHeight();

    // update anchor positions
    switch (activeAnchor.getName()) {
        //case 'rotateAnchor':

        //    break;
        case 'rotateAnchorNew':

            break;
        case 'topLeft':
            topRight.setY(anchorY);
            bottomLeft.setX(anchorX);
            break;
        case 'topRight':
            topLeft.setY(anchorY);
            bottomRight.setX(anchorX);
            break;
        case 'bottomRight':
            topRight.setX(anchorX);
            bottomLeft.setY(anchorY);
            break;
        case 'bottomLeft':
            topLeft.setX(anchorX);
            bottomRight.setY(anchorY);
            break;
    }

    if (topRight.getX() < topLeft.getX() + minImgSize) {
        topRight.setX(topLeft.getX() + minImgSize);
    }
    if (bottomRight.getX() < topLeft.getX() + minImgSize) {
        bottomRight.setX(topLeft.getX() + minImgSize);
    }
    if (bottomRight.getY() < topLeft.getY() + minImgSize) {
        bottomRight.setY(topLeft.getY() + minImgSize);
    }
    if (bottomLeft.getY() < topLeft.getY() + minImgSize) {
        bottomLeft.setY(topLeft.getY() + minImgSize);
    }

    var width = topRight.getX() - topLeft.getX();
    var height = bottomLeft.getY() - topLeft.getY();

    image.setPosition({ x: topLeft.getPosition().x, y: (topLeft.getPosition().y) });
    image.setWidth(width);
    image.setHeight(height);


    rotateAnchorNew.setX(width / 2 + topLeft.getX());
    rotateAnchorNew.setY(height / 2 + topLeft.getY());


}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
    <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v5.0.1.min.js"></script>
<style>
body{padding:20px;background:lightgray}
#container{
  border:solid 1px green;
  margin-top: 10px;
  width:400px;
  height:400px;
}
</style>        
<script>
$(function(){

    // create the stage and layer
    var stage = new Kinetic.Stage({
        container: 'container',
        width: 400,
        height: 400
    });
    var layer = new Kinetic.Layer();
    stage.add(layer);

    // create an anchor used to drag-move the image
    var spotXY=new Kinetic.Circle({
        x:0,y:0,radius:10,
        fill: 'blue',stroke:'black',
        draggable: true
    });
    spotXY.on("dragmove",function(){
        setNode(image,this.x(),this.y(),image.width(),image.height(),image.rotation());
    });
    layer.add(spotXY);

    // create an anchor used to drag-resize the image
    var resizer=new Kinetic.Circle({
        x:0,y:0,radius:10,
        fill: 'red',stroke:'black',
        draggable: true
    });
    resizer.on("dragmove",function(){
        var dx=this.x()-spotXY.x();
        var dy=this.y()-spotXY.y();
        var w=Math.sqrt(dx*dx+dy*dy)*2;
        var h=w*hRatio;
        setNode(image,spotXY.x(),spotXY.y(),w,h,image.rotation());
    });
    layer.add(resizer);

    // create an anchor used to drag-rotate the image
    var rotator=new Kinetic.Circle({
        x:0,y:0,radius:10,
        fill: 'gold',stroke:'black',
        draggable: true
    });
    rotator.on("dragmove",function(){
        var dx=this.x()-spotXY.x();
        var dy=this.y()-spotXY.y();
        var angle=Math.atan2(dy,dx)*180/Math.PI;
        setNode(image,spotXY.x(),spotXY.y(),image.width(),image.height(),angle);
    });
    layer.add(rotator);

    // always resize the image proportionally to it's original aspect ratio
    // this variable is used to keep that proportion
    var hRatio;

    // load the image
    var img=new Image();
    img.onload=start;
    img.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/facesSmall.png";
    function start(){

        // save the images original aspect ratio
        hRatio=img.height/img.width;

        // start
        loadK(150,150);
    };

    function loadK(x,y){

        // create an image element
        image=new Kinetic.Image({
            x:0,y:0,width:10,height:10,
            image:img,
            rotation:0,
        });
        layer.add(image);

        // setNode will reset all image and anchor properties when needed
        // This sets the initial properties at startup
        setNode(image,x,y,img.width,img.height,45);

        // make sure the anchors are on top of the z-index
        spotXY.moveToTop();
        rotator.moveToTop();
        resizer.moveToTop();

        layer.draw();
    }

    // Reset all image and anchor properties relative to the rotation point (x,y)
    // This is the key to simplifying KineticJS transformations with anchors
    function setNode(node,x,y,w,h,angle){

        // reset all size and position properties on the image
        node.width(w);
        node.height(h);
        node.x(x);
        node.y(y);
        node.offsetX(w/2);
        node.offsetY(h/2);
        node.rotation(angle);

        // postion the move anchor
        spotXY.position({x:x,y:y});

        // calculate the radian angle of the image
        var rAngle=angle*Math.PI/180;

        // position the rotation anchor
        var rotationRadius=(w/2+resizer.radius()*2);
        var xx=x+rotationRadius*Math.cos(rAngle);
        var yy=y+rotationRadius*Math.sin(rAngle);   
        rotator.position({x:xx,y:yy});

        // position the resizing anchor
        var xx=x+w/2*Math.cos(rAngle);
        var yy=y+w/2*Math.sin(rAngle);   
        resizer.position({x:xx,y:yy});

        layer.draw();    
    }

}); // end $(function(){});

</script>       
</head>
<body>
    <h4>Drag the dots to transform the image<br>Blue=Move, Red=Resize, Gold=Rotate<br>Image will always resize by maintaining aspect ratio</h4>
    <div id="container"></div>
</body>
</html>