css-doodle入门（七）

马黑黑

@shape()函数

css-doodle 单元格可以大量使用 CSS 的 clip-path 属性裁剪出各种各样的图案，例如多叶草、鲸鱼等，这也是 @shape 属性的实现方式。在 css-doodle 里，@shape 除了做属性，还可以做函数使用，记作 @shape()，小括号内将是各种参数及参数值。

@shape() 函数提供了无限可能，利用参数和数学方法，可以突破 @shape 属性的固定图形，创建出令人惊艳的图案。

当然，我们还是从最简单的开始：创建多边形图案。先看最简单的完整的例子：

<css-doodle grid="1">
    :doodle {
        @size: 400px;
        border: 1px solid gray;
    }
    background: green;
    clip-path: @shape(
        points: 4;
    );
</css-doodle>

运行

上例，clip-path 是CSS路径裁剪属性，它使用裁剪方式创建元素的可视区域，元素区域内的部分得到显示，区域外的部分被裁减掉。例中，css-doodle 函数 @shape() 带有一个参数 points，该参数为 @shape() 函数的一个重要参数，意为“点”，亦即在单元格上指定多边形裁剪的坐标点，这里设置为 4 个坐标点，所有点用连线连结起来，连线内部的区域将为一个菱形，是单元格可见的部分，连线以外的区域则不可见。

points 参数值是N（N≥3 且 N≤3600），得到的就是N边形。当N很大，clip-path 属性裁剪出的图案将是近似圆。大家可以试着修改 points 的值，然后运行看看效果。

一些场景，我们需要中间挖空的图案，这时，frame 参数就派上用场，试看：

<css-doodle grid="1">
    :doodle {
        @size: 400px;
        border: 1px solid gray;
    }
    background: green;
    clip-path: @shape(
        points: 4;
        frame: 1;
    );
</css-doodle>

运行

上例，frame 参数制定了这么一个属性：裁剪后的可视区域仅保留 1 像素的“边框”，内里则挖空。这样，得到的效果实际是一个没有填充的菱形，其原理则是通过复杂算法将前例得出的菱形再往里裁剪、将里面的区域做成不可见的部分。整体效果如果弄成svg路径，一张A4纸应该是打印不完的。

其他预设参数，我们粗略介绍一下：

fill-rule : 填充规则，值为 nonzero（默认） 或 evenodd，可参阅svg相关知识；
rotate : 定义单元格图案旋转角度数值；
scale ：定义单元格图案缩放数值；
move : 设置单元格图案移动的xy坐标值；
turn : 起点/终点之间的角度，值在 0-1 之间，默认为 1（表示不作改变）
r : 极坐标方程式
x : 笛卡尔坐标系的 x 坐标方程式
y : 笛卡尔坐标系的 y 坐标方程式

这些参数，涉及到方程式的需要用到高等数学，比较复杂、抽象，但效果会令人惊艳。试着改变以下代码示例中的 r 参数里余弦值中的 10t 里的数字（t是css-doodle常量）：

<css-doodle grid="1">
    :doodle {
        @size: 400px;
    }
    background: red;
    clip-path: @shape(
        points: 360;
        frame: 12;
        r: cos(10t);
    );
</css-doodle>

运行

马黑黑

醉美水芙蓉 发表于 2023-4-29 11:43
老师做贴很辛苦！给黑黑老师点赞！

马黑黑

用这个覆盖例三：

<css-doodle grid="1">
    :doodle {
        @size: 400px;
    }
    background: linear-gradient(red,green,red);
    clip-path: @shape(
        points: 160;
        r: cos(16t);
    );
</css-doodle>

红影

这个是css-doodle的高级课程，已经不仅仅是入门了

红影

试着改变以下代码示例中的 r 参数里余弦值中的 10t 里的数字

试了一下，11t和12t完全不同，好像一个就是个数，一个加倍了。

千羽

俺飘过……

小辣椒

这个还真的不懂

绿叶清舟

已经到七了啊，一在哪呢

马黑黑

绿叶清舟 发表于 2023-4-30 11:59
已经到七了啊，一在哪呢

前面

绿叶清舟

马黑黑 发表于 2023-4-30 17:12
前面

这个一把抓的抓不起来了

马黑黑

绿叶清舟 发表于 2023-4-30 20:56
这个一把抓的抓不起来了

慢慢抓