[英]Truly rotate center of equilateral triangle in Fabric.js
使用Fabric.js,我无法真正围绕其中心点旋转三角形,或者至少我认为应该成为中心点的三角形。 我创建了一个演示的jsFiddle 。 三角形很简单,我使用了originX: 'center'
和originY相同,但是当三角形旋转时,在x和y方向上仍然有轻微的移动。 如何确保三角形永不移动?
我找到了这个答案,并且想知道这是否是正确的方法? 如何围绕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作为标签包括在内,希望能对此有所帮助。 有人遇到过吗?
fabric.js通过将左上角的点平移到形状边界框的中心来计算形状的中心点。 边界框的中心不是三角形的中心。
对于等腰三角形(其中两个边的长度相同),其底部在底部-我相信这是fabric.js的默认设置-三角形的中心点位于三角形高度的三分之一处。
您可以使用此处描述的方法,通过围绕三角形的中心旋转原始的左上角来找到形状的新左上角( 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才能起作用。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.