如何获得canvas的中心点

Question

如何获得 canvas object/rectangle 的中心点。我将 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 将矩形的旋转点设置在其 top-left 角。因此，要从矩形的中心旋转，您必须将旋转点推到矩形的中心。

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

如何获得canvas的中心点

How to get the center point of canvas

html

javascript

canvas

konvajs