如何获得画布的中心点

Question

如何获取画布对象/矩形的中心点。 我将Konvajs库用于我的小型项目。 在konva文档中说，您需要将点居中以获得良好的旋转。 http://konvajs.github.io/docs/animations/Rotation.html

防爆

 var yellowRect = new Konva.Rect({
    x: 220,
    y: 75,
    width: 100,
    height: 50,
    fill: 'yellow',
    stroke: 'black',
    strokeWidth: 4,
    offset: {
        x: 50 // how to solve this using formula so it will dynamic,
        y: 25 // how to solve this using formula so it will dynamic
    }
});

Answer 1

围绕其中心旋转矩形对象

默认情况下，KonvaJS将矩形的旋转点设置在其左上角。 因此，要从矩形的中心旋转，必须将旋转点推到矩形的中心。

您可以通过设置offsetX=rectangleWidth/2和offsetY=rectangleHeight/2

var yellowRectWidth=100;
var yellowRectHeight=50;
var yellowRect = new Konva.Rect({
    x: 220,
    y: 75,
    width: yellowRectWidth,
    height: yellowRectHeight,
    fill: 'yellow',
    stroke: 'black',
    strokeWidth: 4,
    offset: {
        x: yellowRectWidth/2,
        y: yellowRectHeight/2
    }
});

围绕它们的中心旋转圆形对象

默认情况下，KonvaJS将圆形的旋转点设置在其中心点。 因此，要从圆形的中心旋转，您无需设置任何偏移。