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

Posted 2023-03-05

【中文标题】HTML5 Canvas 中图像大小调整的界限

【英文标题】：Bounds on image resize in HTML5 Canvas

【发布时间】：2013-01-04 14:36:28

【问题描述】：

我正在尝试使用 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,
                   ;

                

任何我能做到的例子或想法

【问题讨论】：

你的 jsfiddle 不起作用

【参考方案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);
  

【讨论】：

thanx mr @EliteOctagon .. 我自己做了这个.. 但真正的问题是处理控件。我在问题中提到过。你也可以在小提琴上看到。你能帮我修锚吗

jsfiddle.net/e4uyG/6 看看我对第 24 行的 TopLeft 锚点做了什么。