使用Fabric.js,我无法真正围绕其中心点旋转三角形,或者至少我认为应该是中心点。我创建了一个jsFiddle来演示。三角形很简单,我使用originX: 'center'
和原点相同,但是当三角形旋转时,x和y方向上仍然有轻微的移动。如何确保三角形不会移动?
我找到了这个答案,并想知道这是否是正确的选择? 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;`
}
然而,这对我不起作用。旋转时三角形仍会移动一点。
编辑:我尝试从上面的链接问题设置指定的旋转点。它对我没用。三角形完全相同。
EDIT2:随着我对此的深入了解,我开始相信这不仅仅是一个Fabric.js问题。它似乎更像是webGL,但不是问题,只是形状转换的方式。我可以看到旋转矩形和三角形之间存在差异。使用中心原点,矩形似乎永远不会移动。我还没有找到答案,但我将webGL作为标签包含在内,希望能得到一些帮助。有没有人遇到过这个?
答案 0 :(得分:6)
calculates the centre point形状的translating a point in the top left corner形状的here到形状边界框的中心。边界框的中心不是三角形的中心。
对于等腰三角形(其中两边长度相同),其底部位于底部 - 我认为这是fabric.js的默认值 - 三角形的中心点位于三角形的三分之一处
您可以使用{{3}}描述的方法,通过围绕中心旋转原始左上角来查找形状的新左上角(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才能实现此目的。