Javascript 为什么形状内旋转的对象不垂直居中？

我正在画布中创建一个具有一定宽度和高度的形状（这个形状是一个剪切矩形）。然后在这个形状里面，我加载了一个可以移动和旋转的物体。 我编写了一个自定义函数，用于获取该形状内的中心点，若对象不旋转，该函数效果良好。 如果我将该对象旋转90度并单击“中心”按钮，则该对象将在剪裁矩形外上移

我不能使用本机FabricJs“centerV”函数，因为我希望该对象在clipping rect内居中，而不是画布容器，所以我创建了一个变量“objectVerticalCenter”

我的代码如下所示：

var canvas=newfabric.canvas（'canvas'{
“选择”：false
});
var clippingRect=new fabric.Rect({
左：170，
排名：90，
宽度：185，
身高：400，
填充：'透明'，
中风：1，
不透明度：1，
哈斯：错，
哈斯：错，
hasRotatingPoint:false，
可选：false，
对,对，
objectCaching:false
});
var retinascaling=canvas.getRetinaScaling（）；
var pol=新结构。多边形([{
x:200，
y:0
}, {
x:250，
y:50
}, {
x:250，
y:100
}, {
x:150，
y:100
}, {
x:150，
y:50
}], {
左：250，
排名：150，
角度：0，
填充：“绿色”
});
pol.scaleX=0.5；
pol.scaleY=0.5；
pol.set（'id'，'shape'）；
pol.scaleToWidth（clippingRect.getWidth（））；
pol.setCoords（）；
pol.clipTo=功能（ctx）{
ctx.save（）；
setTransform（retinaScalling，0,0，retinaScalling，0,0）；
剪报渲染（ctx）；
ctx.restore（）；
};
canvas.centerObjectH（pol）；
canvas.add（pol）；
canvas.renderAll（）；
canvas.setActiveObject（pol）；
canvas.add（pol）；
canvas.renderAll（）；
document.getElementById（'rotate'）。onclick=function（）{
var activeObject=canvas.getActiveObject（）；
activeObject.setAngle（200）；
activeObject.setCoords（）；
canvas.renderAll（）；
};
document.getElementById（'center'）。onclick=function（）{
var activeObject=canvas.getActiveObject（）；
var rectHeight=activeObject.getBoundingRectHeight（）；
var objectVerticalCenter=（clippingRect.getHeight（）/2）-（rectHeight/2）+clippingRect.top；
activeObject.set（'top'，objectVerticalCenter）；
activeObject.setCoords（）；
canvas.renderAll（）；
};

旋转
居中
如果要将一个对象置于另一个对象的中心，最安全的做法是：


获取容器的中心点

在该点上设置对象的中心点


在代码中，这可能等于：

var clipCenter = clippingRect.getCenterPoint();
activeObject.setPositionByOrigin(clipCenter,'center','center');


var canvas=newfabric.canvas（'canvas'{
“选择”：false
});
var clippingRect=new fabric.Rect({
左：170，
排名：90，
宽度：185，
身高：400，
填充：'透明'，
中风：1，
不透明度：1，
哈斯：错，
哈斯：错，
hasRotatingPoint:false，
可选：false，
对,对，
objectCaching:false
});
var retinascaling=canvas.getRetinaScaling（）；
var pol=新结构。多边形([{
x:200，
y:0
}, {
x:250，
y:50
}, {
x:250，
y:100
}, {
x:150，
y:100
}, {
x:150，
y:50
}], {
左：250，
排名：150，
角度：0，
填充：“绿色”
});
pol.scaleX=0.5；
pol.scaleY=0.5；
pol.set（'id'，'shape'）；
pol.scaleToWidth（clippingRect.getWidth（））；
pol.setCoords（）；
pol.clipTo=功能（ctx）{
ctx.save（）；
setTransform（retinaScalling，0,0，retinaScalling，0,0）；
剪报渲染（ctx）；
ctx.restore（）；
};
canvas.centerObjectH（pol）；
canvas.setActiveObject（pol）；
canvas.add（pol）；
canvas.renderAll（）；
document.getElementById（'rotate'）。onclick=function（）{
var activeObject=canvas.getActiveObject（）；
activeObject.setAngle（200）；
activeObject.setCoords（）；
canvas.renderAll（）；
};
document.getElementById（'center'）。onclick=function（）{
var activeObject=canvas.getActiveObject（）；
var clipCenter=clippingRect.getCenterPoint（）；
setPositionByOrigin（clipCenter，'center'，'center'）；
canvas.renderAll（）；
};

旋转
居中
如果要将一个对象置于另一个对象的中心，最安全的做法是：


获取容器的中心点

在该点上设置对象的中心点


在代码中，这可能等于：

var clipCenter = clippingRect.getCenterPoint();
activeObject.setPositionByOrigin(clipCenter,'center','center');


var canvas=newfabric.canvas（'canvas'{
“选择”：false
});
var clippingRect=new fabric.Rect({
左：170，
排名：90，
宽度：185，
身高：400，
填充：'透明'，
中风：1，
不透明度：1，
哈斯：错，
哈斯：错，
hasRotatingPoint:false，
可选：false，
对,对，
objectCaching:false
});
var retinascaling=canvas.getRetinaScaling（）；
var pol=新结构。多边形([{
x:200，
y:0
}, {
x:250，
y:50
}, {
x:250，
y:100
}, {
x:150，
y:100
}, {
x:150，
y:50
}], {
左：250，
排名：150，
角度：0，
填充：“绿色”
});
pol.scaleX=0.5；
pol.scaleY=0.5；
pol.set（'id'，'shape'）；
pol.scaleToWidth（clippingRect.getWidth（））；
pol.setCoords（）；
pol.clipTo=功能（ctx）{
ctx.save（）；
ctx.setTransform（视网膜）