我的 fabric.js sclaing 方法在对象旋转后不起作用

Posted 2023-03-25

【中文标题】我的 fabric.js sclaing 方法在对象旋转后不起作用

【英文标题】：My fabric.js sclaing methods don't work after object rotation

【发布时间】：2021-10-16 13:59:50

【问题描述】：

我的 Fabric.js 对象有一个缩放方法，因此它们不会缩放到边界之外。但是当我旋转对象时，缩放方法无法正常工作。我的猜测是缩放方法没有考虑到旧顶部现在是对象的右侧。 有人知道如何在缩放时考虑到旋转吗？

let scalingProperties = 
    'left': 0,
    'top': 0,
    'scaleX': 0,
    'scaleY': 0


export function scaling(e) 
    const shape = e.target;
    const maxWidth = shape.canvas.width;
    const maxHeight = shape.canvas.height;

    //left border
    if(shape.left < 0) 
        shape.left = scalingProperties.left = 0;
        shape.scaleX = scalingProperties.scaleX;
     else 
        scalingProperties.left = shape.left;
        scalingProperties.scaleX = shape.scaleX;
    

    //right border
    if((shape.scaleX * shape.width) + shape.left > maxWidth) 
        shape.scaleX = (maxWidth - scalingProperties.left) / shape.width;
     else 
        scalingProperties.scaleX = shape.scaleX;
    

    //top border
    if(shape.top < 0) 
        shape.top = scalingProperties.top = 0;
        shape.scaleY = scalingProperties.scaleY;
     else 
        scalingProperties.top = shape.top;
        scalingProperties.scaleY = shape.scaleY;
    

    //bottom border
    if((shape.scaleY * shape.height) + shape.top > maxHeight) 
        shape.scaleY = (maxHeight - scalingProperties.top) / shape.height;
     else 
        scalingProperties.scaleY = shape.scaleY;
    

【问题讨论】：

您能为此创建一个Minimal, Reproducible Example 吗？

@Robson jsfiddle.net/melchiar/5f8apxno 将矩形向下拖动一点，然后向右旋转 90 度。然后试着把它拉伸到右边的边界，你明白我的意思

@Robson 这个例子有用吗？

这应该可以解决问题：***.com/a/56366195/4450938

@Jamal 它并没有为我解决问题。这也有旋转后缩放的问题。如果你把它放在左边框上并尝试我在上面评论中描述的用例，你可以看到它。

【参考方案1】：

让我们可视化您的问题：

一个简单的方法是放大你使用的容器，这样即使内容旋转也不会溢出它的边界。最坏的情况是旋转量为 (n + 1) * pi / 4，其中 n 是自然数。

【讨论】：

我的解释可能不是最好的。问题不在于对象的边界，而更多在于没有正确缩放。如果你可以看看我在我的问题下留下的评论，你就会明白我的意思。