如何获得画布的中心点

Question

How to get The center point of the canvas object/rectangle. I use the Konvajs library for my small project. in the konva documentation said that you need to center the point to get good rotation. http://konvajs.github.io/docs/animations/Rotation.html

Ex

 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

Rotating rectangular objects around their centers

By default, KonvaJS sets the rotation point of a rectangle at its top-left corner. Therefore to rotate from the center of the rectangle you must push the rotation point to the center of the rectangle.

You can do this by setting the offsetX=rectangleWidth/2 and 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
    }
});

Rotating circular objects around their centers

By default, KonvaJS sets the rotation point of circular shapes at their centerpoints. Therefore to rotate from the center of circular shapes you won't have to set any offsets.