马黑黑《svgdr path+rotaes 指令绘制多叶草》
<style>@import 'https://638183.freep.cn/638183/web/css/hl.css';
.artBox { margin: 20px auto; font: normal 18px/26px sans-serif; }
.artBox p { margin: 10px 0; }
.artBox pre { white-space: pre-wrap; tab-size: 4; }
.artBox mark { background: rgba(0, 120, 0, 0.35); padding: 2px 6px; }
</style>
<div class="artBox">
<p>svgdr 有专门的绘制多叶草指令 <mark>clover</mark>，但绘制多叶草还有更多的实现方法。本帖展示使用 <mark>path + rotates</mark> 指令制作多叶草图案。</p>
<h3>一、效果：</h3>
<svg id="msvg" width="400" height="400" viewBox="-200 -200 400 400" xmlns="http://www.w3.org/2000/svg"></svg>
<p>【附】svgdr 生成的代码：</p>
<pre id="svgcode" class="hlCode"></pre>
<h3>二、核心svgdr代码：</h3>
<pre class="hlCode">dr.path('M0 -190 Q60 -160,0 0 T0 190 Q60 160,0 0 T0 -190', 'green', 'pink', 2).rotates(3, 180);</pre>
<p>代码解析：SVG viewBox 设为 -200 -200 400 400</p>
<ol>
<li>使用 path 指令绘制第一条Q曲线+T延长曲线：Q曲线起点在画布正上方(0,-190)，终点在中心(0,0)，控制点在(60,-160)，然后T曲线将其延长至正下方(0,190)；第二条Q曲线+T延长曲线紧接着绘制，以上一条曲线的终点为起点，Q曲线终点仍是(0,0)，控制点Y坐标与上一条Q曲线反向(60,160)，T延长线终点 是上一条Q曲线的起点，形成闭合。</li>
<li>给曲线上色，fill和stroke设置好合适的颜色，同时设置好 stroke-width 描边宽度。</li>
<li>链式调用 rotates 指令复制已绘制好的曲线路径并进行旋转，共3条（含第一个路径），旋转角度范围是180度。</li>
</ol>
<p> <br></p>
<h3>三、完整svgdr代码：</h3>
<pre class="hlCode">
<svg id="msvg" widt="400" height="400" viewBox="-200 -200 400 400"></svg>
<script charset="utf-8" src="https://638183.freep.cn/638183/svgdr/svgdr.min.js"></script>
<script>
var dr = _dr(msvg);
dr.path('M0 -190 Q60 -160,0 0 T0 190 Q60 160,0 0 T0 -190', 'green', 'pink', 2).rotates(3, 180);
</script>
</pre>
</div>
<script>
loadJs('https://638183.freep.cn/638183/svgdr/svgdr.min.js', tzRun);
function tzRun() {
var dr = _dr(msvg);
dr.path('M0 -190 Q60 -160,0 0 T0 190 Q60 160,0 0 T0 -190', 'green', 'pink', 2).rotates(3, 180);
svgcode.innerText = dr.code(msvg);
}
function loadJs(url, callback) {
var script = document.createElement('script');
script.charset = 'utf-8';
script.src = url;
script.onload = function() {
if (callback) callback();
};
document.head.appendChild(script);
}
</script>
有趣的动画，谢谢精彩分享
页:
[1]