时间戳

首页 > 解决方案 > 根据另一个元素旋转元素（粘性）

css - 根据另一个元素旋转元素（粘性）

问题描述

我正在尝试旋转应该始终粘在红色矩形底部的文本块（就像在 Figma 中一样，但更简单）。例如，如果我将矩形旋转 180 度，文本应该在顶部，并且它不应该进入 rect 视觉部分或高度偏离它。我怎样才能做到这一点？

也许它是关于变换起源的，但我已经打破了我的头，试图动态设置它。

最小的小提琴包含由 svg.js 创建的 rect 和 text 元素（svg.js 不是交易的一部分，所以你可以用纯 css 来做）：

https://jsfiddle.net/8h4q0fLc/1/

这是代码：

<head>
<link rel="stylesheet" href="https://rawcdn.githack.com/svgdotjs/svg.select.js/3.0.1/dist/svg.select.min.css">
</head>
<body>
    <div id="editor"></div>

    <script src="https://rawcdn.githack.com/svgdotjs/svg.js/2.7.1/dist/svg.min.js" defer></script>
    <script src="https://rawcdn.githack.com/svgdotjs/svg.select.js/3.0.1/dist/svg.select.min.js" defer></script>
    <script src="https://rawcdn.githack.com/svgdotjs/svg.resize.js/1.4.3/dist/svg.resize.min.js" defer></script>
    <script>
    const editor = SVG('editor').size('100vw', '100vh');
    
    const rect = editor.rect(100, 100).fill('red').move(50, 50).selectize().resize();
    const {x: rectX, y: rectY, width: rectWidth, height: rectHeight} = rect.bbox();
    
    const text = editor.text(`${rectWidth} x ${rectHeight}`).resize();
    const { width: textWidth } = text.rbox();
    text.move(rectX + (rectWidth - textWidth)/2, rectY + rectHeight);
    
    rect.on('resizing', function() {
        text.rotate(this.transform('rotation'));
    });
    </script>
</body>

标签： csssvg.js

解决方案

回复评论：这不是伏都教，而是一个简单的旋转矩阵，添加了平移以抵消 svg 的默认原点（顺便说一句，它是 svg 画布的左上角）

如果你想一起旋转文本和矩形，你可以做的最简单的事情就是把它放到同一个组中，然后旋转整个组。另一种方法是围绕矩形的中心旋转文本。因此，您必须传递第二个和第三个参数才能旋转。

const {x: rectX, y: rectY, width: rectWidth, height: rectHeight, cx, cy} = rect.bbox();

rect.on('resizing', function() {
  text.rotate(rect.transform('rotation'), cx, cy);
});

工作解决方案：https ://jsfiddle.net/Fuzzy/d28cbvjz/

推荐阅读