HTML5 Canvas 中图像大小调整的界限

Question

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

但我希望用户不能将图像大小调整为小于 50 像素 x 50 像素或大于 200 x 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);
  }