在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); 
    }