如何获得画布的中心点

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在其中心设置圆形形状的旋转点。因此，要从圆形的中心旋转，就不必设置任何偏移量。