论坛 › 马黑黑教程专版 › 文本椭圆形布局演示之css-doodle版

马黑黑 发表于 2023-6-5 19:20

文本椭圆形布局演示之css-doodle版

<style>
.papa > p { margin: 10px 0; }
.mama { margin-left: 40px; position: relative; }
.hCode, .hLineNum { padding: 10px; width: calc(100% - 40px); font: normal 16px/20px Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; background: #f9f9f9; box-sizing: border-box; overflow-x: auto; tab-size: 3; position: absolute; }
.hCode { left: 40px; margin-left: -40px; padding-left: 45px; }
.hLineNum { width: 40px; background: #ccc; border-right: 1px solid #ccc; text-align: right; pointer-events: none; }
.stage { display: grid; place-items: center; }
.hidden { display: none; }
</style>

<div class="papa">
        <p>本例，在 css-doodle 中让每一个文本个体所在的单元格通过 offset-distance 设置自己在 offset-path 路径上的位置，具体定位算法在 css-doodle 代码中使用 CSS 的 calc 函数完成：</p>
        <div class="mama">
                <pre class="hCode">&lt;css-doodle grid="10x1"&gt;
        :doodle {
                @size: 400px 200px;
                border: 1px solid rebeccapurple;
        }
        @size: 40px;
        @place: 20px 20px;
        background: rebeccapurple;
        border-radius: 50%;
        color: #fff;
        :after { content: '@pn([君不见黄河之水天上来])'; }
        offset-path: path('M80 100 a120 80 0 1 0 240 0 a120 80 0 1 0 -240 0z');
        offset-distance: calc(100 / @size * (@i - 1) * 1%);
        offset-rotate: 0deg;
&lt;/css-doodle&gt;</pre>
                <pre class="hLineNum"></pre>
        </div>
        <p><button class="btnok" type="button" value="运行代码">运行代码</button></p>
        <div class="stage"></div>
</div>

<script>
let script = document.createElement('script');
script.src = 'https://638183.freep.cn/638183/web/api/css-doodle.js';
document.head.appendChild(script);

let btns = document.querySelectorAll('.btnok'),
        stages = document.querySelectorAll('.stage'),
        hCodes = document.querySelectorAll('.hCode'),
        hLineNums = document.querySelectorAll('.hLineNum'),
        mamas = document.querySelectorAll('.mama');

hCodes.forEach((item,key) => {
        let lines = hCodes.innerText.trim().split('\n').length;
        let str = '';
        for(let i = 0; i < lines; i ++) {
                str += i + 1 + '\n';
        }
        hLineNums.innerText = str;
        mamas.style.cssText += `height: ${hCodes.offsetHeight + 20}px`;
        if(!btns) return;
        btns.onclick = () => {
                let val = btns.value;
                val === '运行代码' ? codeRun(hCodes.innerText, stages) : codeRun('',stages);
                btns.value = btns.innerText = val === '运行代码' ? '关闭运行' : '运行代码';
        };
});

let codeRun = (str,ele) => {
        let reg = /(<script(.*?)>)(.|\n)*?(<\/script>)/g;
        let js_str, html_str;
        if(str.match(reg) !== null) {
                js_str = str.match(reg);
                html_str = str.replace(js_str, '').trim();
                js_str = js_str.replace(/<[\/]{0,1}script[^>]*>/g,'').trim();
        } else {
                js_str = '';
                html_str = str.trim();
        }
        ele.innerHTML = html_str;
        let myfunc = new Function(js_str);
        myfunc();
};
</script>

马黑黑 发表于 2023-6-5 19:30

第七行代码，

@place: 20px 20px;

这是元素（单元格）初始定位设置。参与到 offset-path 路径中来的所有元素（单元格）都应在加入到路径前初始定位到父元素的左上角，一般使用绝对定位后则无需设置 left 和 top 属性值，因为默认都为 0px的；在 css-doodle 里原理同，但本例并没有设置单元格为position: absolute; 定位，所以需要通过 @place属性对单元格进行事前定位，因 css-doodle 的特殊性，@place(宽/2 高/2) 恰好对应 left: 0px; 及 top: 0px; 属性叠加。

醉美水芙蓉 发表于 2023-6-5 20:11

南无月 发表于 2023-6-5 20:49

这个代码只有一丢丢

马黑黑 发表于 2023-6-5 21:16

醉美水芙蓉 发表于 2023-6-5 20:11
黑黑老师设计的这个文字是不是会旋转的？

要它们旋转干嘛

马黑黑 发表于 2023-6-5 21:17

南无月 发表于 2023-6-5 20:49
这个代码只有一丢丢

它背后是 76Kb 的库

红影 发表于 2023-6-5 22:09

这个更好，比前面那个带JS的代码少了很多，同样能让文字椭圆排列。很赞{:4_199:}

马黑黑 发表于 2023-6-5 22:30

红影 发表于 2023-6-5 22:09
这个更好，比前面那个带JS的代码少了很多，同样能让文字椭圆排列。很赞

原理不变的

梦缘 发表于 2023-6-6 11:06

谢谢老师分享，问好！

红影 发表于 2023-6-6 16:38

马黑黑 发表于 2023-6-5 22:30
原理不变的

通过对比感受到了doodle的简洁{:4_187:}

南无月 发表于 2023-6-6 18:29

马黑黑 发表于 2023-6-5 21:17
它背后是 76Kb 的库

哈哈就那个你家拉瓜大瀑布似的JS库

马黑黑 发表于 2023-6-6 19:16

南无月 发表于 2023-6-6 18:29
哈哈就那个你家拉瓜大瀑布似的JS库

不是我家的，是你家的

马黑黑 发表于 2023-6-6 19:17

红影 发表于 2023-6-6 16:38
通过对比感受到了doodle的简洁

背后的库有70多Kb

南无月 发表于 2023-6-6 21:52

马黑黑 发表于 2023-6-6 19:16
不是我家的，是你家的

国际公用称呼你家拉瓜{:4_170:}

马黑黑 发表于 2023-6-6 21:54

南无月 发表于 2023-6-6 21:52
国际公用称呼你家拉瓜

但是不是俺家的瓜

红影 发表于 2023-6-6 22:45

马黑黑 发表于 2023-6-6 19:17
背后的库有70多Kb

库里复杂了，这里简单了{:4_173:}

马黑黑 发表于 2023-6-6 22:49

红影 发表于 2023-6-6 22:45
库里复杂了，这里简单了

库是支撑

红影 发表于 2023-6-6 23:21

马黑黑 发表于 2023-6-6 22:49
库是支撑

非常强大的支撑{:4_199:}

马黑黑 发表于 2023-6-6 23:28

红影 发表于 2023-6-6 23:21
非常强大的支撑

还在发展中

红影 发表于 2023-6-7 19:53

马黑黑 发表于 2023-6-6 23:28
还在发展中

简直是功德无量啊{:4_199:}

查看完整版本: 文本椭圆形布局演示之css-doodle版