css-doodle入门（七）
本帖最后由 马黑黑 于 2023-4-29 11:28 编辑 <br /><br /><style>#papa { margin: 10px auto;position: relative; }
#papa > p, #papa > h2 { padding: 8px 0; }
#papa > button { margin-bottom: 10px; }
#papa > pre { padding: 10px; background: #eee; font: normal 14px Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; }
</style>
<div id="papa">
<h2>@shape()函数</h2>
<p>css-doodle 单元格可以大量使用 CSS 的 clip-path 属性裁剪出各种各样的图案，例如多叶草、鲸鱼等，这也是 @shape 属性的实现方式。在 css-doodle 里，@shape 除了做属性，还可以做函数使用，记作 @shape()，小括号内将是各种参数及参数值。</p>
<p>@shape() 函数提供了无限可能，利用参数和数学方法，可以突破 @shape 属性的固定图形，创建出令人惊艳的图案。</p>
<p>当然，我们还是从最简单的开始：创建多边形图案。先看最简单的完整的例子：</p>
<pre id="pre1" contenteditable="true">
<css-doodle grid="1">
:doodle {
@size: 400px;
border: 1px solid gray;
}
background: green;
clip-path: @shape(
points: 4;
);
</css-doodle>
</pre>
<button>运行</button>
<div class="runbox"></div>
<p>上例，clip-path 是CSS路径裁剪属性，它使用裁剪方式创建元素的可视区域，元素区域内的部分得到显示，区域外的部分被裁减掉。例中，css-doodle 函数 @shape() 带有一个参数 points，该参数为 @shape() 函数的一个重要参数，意为“点”，亦即在单元格上指定多边形裁剪的坐标点，这里设置为 4 个坐标点，所有点用连线连结起来，连线内部的区域将为一个菱形，是单元格可见的部分，连线以外的区域则不可见。</p>
<p>points 参数值是N（N≥3 且 N≤3600），得到的就是N边形。当N很大，clip-path 属性裁剪出的图案将是近似圆。大家可以试着修改 points 的值，然后运行看看效果。</p>
<p>一些场景，我们需要中间挖空的图案，这时，frame 参数就派上用场，试看：</p>
<pre contenteditable="true">
<css-doodle grid="1">
:doodle {
@size: 400px;
border: 1px solid gray;
}
background: green;
clip-path: @shape(
points: 4;
frame: 1;
);
</css-doodle>
</pre>
<button>运行</button>
<div class="runbox"></div>
<p>上例，frame 参数制定了这么一个属性：裁剪后的可视区域仅保留 1 像素的“边框”，内里则挖空。这样，得到的效果实际是一个没有填充的菱形，其原理则是通过复杂算法将前例得出的菱形再往里裁剪、将里面的区域做成不可见的部分。整体效果如果弄成svg路径，一张A4纸应该是打印不完的。
<p>其他预设参数，我们粗略介绍一下：
<p>
fill-rule : 填充规则，值为 nonzero（默认） 或 evenodd，可参阅svg相关知识；<br>
rotate : 定义单元格图案旋转角度数值；<br>
scale ：定义单元格图案缩放数值；<br>
move : 设置单元格图案移动的xy坐标值；<br>
turn : 起点/终点之间的角度，值在 0-1 之间，默认为 1（表示不作改变）<br>
r : 极坐标方程式<br>
x : 笛卡尔坐标系的 x 坐标方程式<br>
y : 笛卡尔坐标系的 y 坐标方程式</p>
<p>这些参数，涉及到方程式的需要用到高等数学，比较复杂、抽象，但效果会令人惊艳。试着改变以下代码示例中的 r 参数里余弦值中的 10t 里的数字（t是css-doodle常量）：
<pre contenteditable="true">
<css-doodle grid="1">
:doodle {
@size: 400px;
}
background: red;
clip-path: @shape(
points: 360;
frame: 12;
r: cos(10t);
);
</css-doodle>
</pre>
<button>运行</button>
<div class="runbox"></div>
</div>
<script>
let script = document.createElement('script');
script.src = 'https://unpkg.com/css-doodle@0.34.9/css-doodle.min.js';
document.head.appendChild(script);
let btns = document.querySelectorAll('#papa > button'),
pres = document.querySelectorAll('#papa > pre'),
runboxes = document.querySelectorAll('#papa > .runbox');
btns.forEach((item,key) => {
item.onclick = () => runboxes.innerHTML = pres.innerText;
});
</script>
醉美水芙蓉 发表于 2023-4-29 11:43
老师做贴很辛苦！给黑黑老师点赞！
{:4_190:} 用这个覆盖例三：
<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的高级课程，已经不仅仅是入门了{:4_187:} 试着改变以下代码示例中的 r 参数里余弦值中的 10t 里的数字
试了一下，11t和12t完全不同，好像一个就是个数，一个加倍了。
俺飘过……{:6_211:} 这个还真的不懂{:4_203:} 已经到七了啊，一在哪呢{:4_189:} 绿叶清舟 发表于 2023-4-30 11:59
已经到七了啊，一在哪呢
前面 马黑黑 发表于 2023-4-30 17:12
前面
这个一把抓的抓不起来了 绿叶清舟 发表于 2023-4-30 20:56
这个一把抓的抓不起来了
慢慢抓
页:
[1]