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

如何获得画布的中心点

1 个答案: