Question

我正在尝试构建自定义形状-菱形始终停留在其标签文本的中心（如果我们可以使形状随着标签的变化而扩展，则可以这样做是奖励）。

现在，我正在将矩形转换45度以创建菱形。问题是这似乎旋转到左上角而不是中心点。

如何使JointJS围绕其中心旋转此形状？还是有更好的方法来做到这一点？

这是一个JSFiddle。

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);

谢谢！会

Answer 1

弄清楚了。用过的 transform: 'rotate(45, 50, 50)放在我元素的主体上，但根据元素的当前宽度和高度计算了变换原点。围绕转换的文档很难找到，但是一旦找到使用示例，它就会变得很清楚。

中心旋转元素

1 个答案: