Повернуть элемент в центре - PullRequest
Новая
       30

Повернуть элемент в центре

0 голосов
/ 30 октября 2019

Я пытаюсь создать собственную форму - ромб, который остается в центре текста надписи (бонус, если мы сможем расширить форму при изменении метки).

Сейчас я преобразуюпрямоугольник на 45 градусов, чтобы создать алмаз. Проблема в том, что это, кажется, вращается вокруг верхнего левого угла, а не центральной точки.

Как я могу заставить JointJS вращать эту форму вокруг ее центра? Или есть лучший способ сделать это?

Вот JSFiddle.

http://jsfiddle.net/dfqpbLyn/3/

var baseRhombus = joint.shapes.standard.Rectangle.define('crt.BaseRhombus',
    {
        attrs: {
            label: {
              textAnchor: 'middle',
              textVerticalAnchor: 'middle',
              fontSize: 25,
              text: 'Test'
            },
            body: { 
                strokeWidth: 1,
                stroke: 'green',
                fill: 'gray',
              //transform-origin: center center,
              transform: 'rotate(45, center, center)',
            }
        }
    },
    {
        markup: 
        [
            {
                tagName: 'rect',
                selector: 'body'
            },
            {
                tagName: 'text',
                selector: 'label'
            }
        ]
    },
    {
        initialize: function (width, height, x, y) {
            var newElement = new this({
                id: 'g1',

                            position: {x:x, y:y},
                size: {width: width, height: height},
                //position: { x: x, y: y },
            });

            return newElement;
        }
    }
);


var baseRhombus = joint.shapes.crt.BaseRhombus.initialize(250, 250, 60, 50);

Спасибо! Будет

1 Ответ

0 голосов
/ 30 октября 2019

Разобрался. Использовал transform: 'rotate(45, 50, 50) в теле моего элемента, но вычислил источник преобразования на основе текущей ширины и высоты элемента. Документацию по преобразованию было немного трудно найти, но как только я нашел пример ее использования, стало ясно.

...