javascript - 在fabricjs中查找旋转对象的 Angular 坐标

标签 javascript canvas fabricjs

假设我在 fabricjs Canvas 中有一张图片。我可以根据图像的 topleft 值及其大小轻松计算 Angular 的坐标。

当图像旋转任意度数时,我该怎么做?

例子:

enter image description here

编辑:最好不要使用三 Angular 函数,如果在 fabricjs 本身或其他地方有一个更简单的方法。

最佳答案

当然可以。

我们将这些坐标存储在对象的 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

这就是您调用 setCoords 方法时设置的内容。

但您可能不想弄乱这些。

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

您可以在 http://fabricjs.com/bounding-rectangle 查看它的运行情况(尝试旋转物体)

更多:
http://fabricjs.com/docs/fabric.Group.html#oCoords
http://fabricjs.com/docs/fabric.Group.html#calcCoords

关于javascript - 在fabricjs中查找旋转对象的 Angular 坐标,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14874631/

相关文章:

javascript - Bootstrap 选项卡面板没有删除事件类,但只是有时

javascript - 从点击事件中删除 window.location.href

javascript - 使用 Bootstrap 的动态选项卡不起作用!点击时打不开

javascript - TypeError : handlers.推送不是一个函数

HTML5 Canvas 弧在 Google Chrome 中无法正确呈现

Javascript Canvas 序列化/反序列化?

android - 如何在Imageview上画一个黑色边框背景透明的矩形?

fabricjs - 将 PDF 加载到 fabricjs Canvas 中

Fabricjs 调用 canvas.toDataURL() 调整 Canvas 的尺寸

javascript - fabricjs 对象选择不适用于平移