使用 Fabric.js,我无法真正围绕其中心点旋转三 Angular 形,或者至少我认为应该是中心点。我创建了一个 jsFiddle这表明。三 Angular 形很简单,我使用了 originX: 'center'
和 originY 一样,但是随着三 Angular 形旋转,x 和 y 方向仍然有轻微的移动。我如何确保三 Angular 形永远不会移动?
我找到了这个答案,想知道这是否是正确的选择? how to rotate around one specified point in fabric.js?
编辑:新的努力包括实现上述链接问题的答案。这是代码:
function createTriangle(x, y, angle)
{
var t = new fabric.Triangle(
{
width: 350,
height: 300,
selectable: false,
fill: 'rgba(0,0,0,0)',
stroke: 'white',
strokeWidth: 2,
left: x,
top: y,
angle: angle
});
var rotation_origin = new fabric.Point(t.getCenterPoint().x, t.getCenterPoint().y);
var angle_randians = fabric.util.degreesToRadians(angle);
var rotatePoint = fabric.util.rotatePoint(new fabric.Point(rotation_origin.x, rotation_origin.y), rotation_origin, angle_randians);
t.originX = rotatePoint.x;
t.originY = rotatePoint.y;
return t;`
}
然而,这对我不起作用。三 Angular 形在旋转的同时还有一点移动。
编辑: 我尝试根据上面的链接问题设置指定的旋转点。它对我没有用。三 Angular 形旋转完全相同。
EDIT2: 随着我深入研究这个问题,我开始相信这不仅仅是一个 Fabric.js 问题。看起来更像是 webGL,但这不是问题,只是形状转换的方式。我可以看到旋转矩形和三 Angular 形之间存在差异。使用中心原点,矩形似乎永远不会四处移动。我还没有找到答案,但我将 webGL 作为标签包括在内,希望能得到一些帮助。有没有人遇到过这种情况?
最佳答案
fabric.js calculates the centre point形状的 translating a point in the top left corner到形状边界框的中心。边界框的中心不是三 Angular 形的中心。
对于底部在底部的等腰三 Angular 形(两条边的长度相同)——我认为这是 fabric.js 的默认设置——三 Angular 形的中心点位于三 Angular 形高度的三分之一处.
您可以使用描述的方法here通过围绕三 Angular 形中心旋转原始左上角来为形状找到新的左上角(x
和 y
值)。
function createTriangle(x, y, angle)
{
var width = 350;
var height = 300;
var pos = fabric.util.rotatePoint(
new fabric.Point(x, y),
new fabric.Point(x + width / 2, y + height / 3 * 2),
fabric.util.degreesToRadians(angle)
);
return new fabric.Triangle(
{
width: width,
height: height,
selectable: false,
fill: 'rgba(0,0,0,0)',
stroke: 'white',
strokeWidth: 2,
left: pos.x,
top: pos.y,
angle: angle
});
}
您需要最新版本的 fabric.js 才能正常工作。
关于javascript - 在 Fabric.js 中真正旋转等边三 Angular 形的中心,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20961546/