javascript - 如何获得画布的中心点

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 将圆形的旋转点设置在它们的中心点。因此，要从圆形中心旋转，您无需设置任何偏移量。