在HTML5 Canvas上调整图像边界

Question

我正在尝试使用KineticJS库在图像调整大小上添加大小限制。 HTML5画布教程提供的方法来调整图像大小：http://www.html5canvastutorials.com/labs/html5-canvas-drag-and-drop-resize-and-invert-images/

但我希望用户不能够将图像尺寸调整到小于50像素X 50像素或大于200×200 我已经尝试了很多管理通过以下代码进行控制但它显示出非常奇怪的结果

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, 
        }; 

       } 

任何例子或者想法，我怎么能做到这一点

Answer 1

http://jsfiddle.net/e4uyG/4/让你很接近你所要求的。

基本上，你有重新绘制图像的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); 
    }