在fabricjs中查找旋转对象的角点坐标

sel*_*ary 12 javascript canvas fabricjs

假设我在fabricjs画布中有一个图像.我可以根据图像topleft值及其大小轻松计算角点的坐标.

当图像旋转任何角度时,我该怎么办?

例:

在此输入图像描述

编辑:最好不使用三角法,如果在fabricjs本身或其他地方实现了更简单的方法.

kan*_*gax 18

当然是.

我们将这些坐标存储在对象中 oCoords

oCoords.tl.x, oCoords.tl.y // top left corner 
oCoords.tr.x, oCoords.tr.y // top right corner
oCoords.bl.x, oCoords.bl.y // bottom left corner
oCoords.br.x, oCoords.br.y // bottom right corner
Run Code Online (Sandbox Code Playgroud)

这是调用setCoords方法时设置的内容.

但你可能不想搞砸那些.

从版本~1.0.4开始,我们getBoundingRect在所有返回的对象上都有方法{ left: ..., top: ..., width: ..., height: ... }.我们已经getBoundingRectWidthgetBoundingRectHeight之前(现已弃用)但getBoundingRect肯定更有用; 它还允许读取左/上值.

您可以在http://fabricjs.com/bounding-rectangle/上看到它(尝试旋转对象)

  • 链接不可用 (3认同)
  • 谢谢 - 我使用了完美的oCoords.不需要Math.sin!它允许我将自定义手柄"附加"到对象的两个角落,而不是9个默认的... (2认同)
  • 链接是http://fabricjs.com/bounding-rectangle(没有斜杠) (2认同)