找到在fabricjs中旋转对象的角的坐标 [英] Find the coordinates of the corners of a rotated object in fabricjs

问题描述

假设我在fabricjs画布中有一个图像。我可以根据图像的 top & left 值及其大小。

当图片旋转任何角度时，该如何处理？

示例：

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

解决方案

当然是的。

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

  oCoords.tl.x，oCoords.tl.y //左上角
 oCoords.tr.x ，oCoords.tr.y //右上角
 oCoords.bl.x，oCoords.bl.y //左下角
 oCoords.br.x，oCoords.br.y //右下角角
  

这是调用 setCoords时设置的方法。

但你可能不想混淆这些。

4，我们对所有对象都有 getBoundingRect 方法，返回 {left：...，top：...，width：...， height：...} 。我们已经有 getBoundingRectWidth 和 getBoundingRectHeight 之前（现已弃用），但 getBoundingRect 当然更有用;它允许读取左/顶值。

您可以在 http://fabricjs.com/bounding-rectangle/ （尝试旋转对象）

Suppose I have an image in a fabricjs canvas. I can easily calculate the coordinates of the corners based on the image's top & left values, and its size.

How can I do so when the image is rotated by any degree?

Example:

EDIT: Preferably without the use of trigonometry, if there is a simpler method implemented in fabricjs itself or somewhere else.

解决方案

Yes, of course.

We store those coordinates in object's 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

That's what gets set when you call setCoords method.

But you probably don't want to mess with those.

Since version ~1.0.4, we have getBoundingRect method on all objects, which returns { left: ..., top: ..., width: ..., height: ... }. We already had getBoundingRectWidth and getBoundingRectHeight before (now deprecated) but getBoundingRect is certainly more useful; it allows to read left/top values as well.

You can see it in action at http://fabricjs.com/bounding-rectangle/ (try rotating objects)

这篇关于找到在fabricjs中旋转对象的角的坐标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！