Javascript HTML5画布中图像大小的边界

我正在尝试使用KineticJS库增加图像大小限制。HTML5画布教程提供了调整图像大小的方法：

但我希望用户不能将图像大小调整为小于50px 50px或大于200x200。 我已经尝试了很多通过以下代码来管理控件。但它显示出非常奇怪的结果

    dragBoundFunc: function(pos) {

        var newX = '';
        var image_width = group.get(".darthVaderImg")[0].getWidth();
        var image_height = group.get(".darthVaderImg")[0].getHeight();
        var image_position = group.get(".darthVaderImg")[0].getPosition();

                if((image_width>50 && image_width< 200)     ){
                    newX = pos.x;   
                }else{
                    newX = image_position.x+image_width+80; 
                }
                if((image_height>50 && image_height< 200)       ){
                    newY = pos.y;   
                }else{
                    newY = image_position.y+100; 
                }

                  return {
                    x: newX ,
                    y: newY,
                   };

                }

dragBoundFunc:函数（pos）{
var newX=“”；
var image_width=group.get（“.darthVaderImg”）[0]。getWidth（）；
var image_height=group.get（“.darthVaderImg”）[0].getHeight（）；
var image_position=group.get（“.darthVaderImg”）[0].getPosition（）；
如果（（图像宽度>50和图像宽度<200））{
newX=位置x；
}否则{
newX=图像位置。x+图像宽度+80；
}
如果（（图像高度>50和图像高度<200））{
newY=pos.y；
}否则{
newY=图像位置。y+100；
}
返回{
x:newX，
y:新的，
};
}

任何关于我如何做到这一点的例子或想法都会让你非常接近你的要求

基本上，您有一个update（）函数来重绘图像，所以只需将其限制在一定的大小

  function update(group, activeAnchor) {
    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 image = group.get(".image")[0];

    // update anchor positions
    switch (activeAnchor.getName()) {
      case "topLeft":
        topRight.attrs.y = activeAnchor.attrs.y;
        bottomLeft.attrs.x = activeAnchor.attrs.x;
        break;
      case "topRight":
        topLeft.attrs.y = activeAnchor.attrs.y;
        bottomRight.attrs.x = activeAnchor.attrs.x;
        break;
      case "bottomRight":
        bottomLeft.attrs.y = activeAnchor.attrs.y;
        topRight.attrs.x = activeAnchor.attrs.x;
        break;
      case "bottomLeft":
        bottomRight.attrs.y = activeAnchor.attrs.y;
        topLeft.attrs.x = activeAnchor.attrs.x;
        break;
    }

    image.setPosition(topLeft.attrs.x, topLeft.attrs.y);

    var width = topRight.attrs.x - topLeft.attrs.x;
    var height = bottomLeft.attrs.y - topLeft.attrs.y;
    if(height > 50 && height < 200) // Limit the height 
      image.setHeight(height);

    if(width > 50 && width < 200)  // Limit the width
      image.setWidth(width);
  }

功能更新（组、activeAnchor）{
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 image=group.get（“.image”）[0]；
//更新锚点位置
开关（activeAnchor.getName（））{
案例“左上”：
topRight.attrs.y=activeAnchor.attrs.y；
bottomLeft.attrs.x=activeAnchor.attrs.x；
打破
案例“topRight”：
topLeft.attrs.y=activeAnchor.attrs.y；
bottomRight.attrs.x=activeAnchor.attrs.x；
打破
案例“右下角”：
左下角.attrs.y=activeAnchor.attrs.y；
topRight.attrs.x=activeAnchor.attrs.x；
打破
案例“左下角”：
右下角.attrs.y=activeAnchor.attrs.y；
topLeft.attrs.x=activeAnchor.attrs.x；
打破
}
设置位置（topLeft.attrs.x，topLeft.attrs.y）；
var width=topRight.attrs.x-topLeft.attrs.x；
变量高度=左下角.attrs.y-左上角.attrs.y；
如果（高度>50&&高度<200）//限制高度
图像。设置高度（高度）；
如果（宽度>50&&width<200）//限制宽度
image.setWidth（宽度）；
}

您的JSFIDLE无法工作于mr@EliteOctagon。。这是我自己做的。。但真正的问题是如何控制。我在这个问题上投了弃权票。你也可以在小提琴上看到。你能帮我修一下锚吗？看看我在24号线上用左上角的锚做了什么。