2016-01-19 2 views
0

Как получить Центральную точку объекта/прямоугольника холста. Я использую библиотеку Konvajs для моего небольшого проекта. в документации konva говорится, что вам нужно сосредоточить точку, чтобы получить хорошее вращение. 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 
    } 
}); 

ответ

2

Вращающийся прямоугольные объекты вокруг своих центров

По умолчанию 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 устанавливает точку вращения круговой формы в их centerpoints. Поэтому, чтобы вращаться от центра круговых фигур, вам не придется устанавливать какие-либо смещения.