这个点点圆可以自由排列吧
小辣椒 发表于 2024-10-29 21:32
这个点点圆可以自由排列吧
这是按路径排列
dr.path('M0 400 Q350 -280,700 400', 'none','none').id('path');
我看到了一个ID声明。。原来可以追在后面写的{:4_170:}
马黑黑 发表于 2024-10-29 21:32
这是按路径排列
哦，可以按路径排列
马黑黑 发表于 2024-10-29 20:03
svg有文本路径，可以将文本按路径排列。但是，其他元素按路径布排则需要另辟蹊径，本例的实现思路是，利用 ...
这个试试就很明白了，它们均匀排列，智能得很。。
双路径也支持。
我来画个画，看到路径就想给它变一下。。
<p style="text-align:center;">
<svg id="mysvg1" width="700" height="400"></svg>
</p>
<script>
var sc = document.createElement('script');
sc.src = 'https://638183.freep.cn/638183/web/js2024/svgdr_trial.js';
document.body.appendChild(sc);
sc.onload = () => {
var dr = _dr(mysvg1)
var balls = [], playing = true;
dr.path('m173.8817,385.23996c23.22378,-0.27056 -22.11741,-1.25564 -30.16002,-1.7986c-67.20299,-1.51109 -122.97561,-63.46619 -115.71705,-124.95009c1.46981,-61.52495 65.37688,-115.57165 131.89305,-109.38045c17.31416,-6.81994 41.89243,15.68706 52.64241,4.93688c27.61171,-45.16511 54.36454,-90.80204 83.08884,-135.36634c24.46724,-3.23825 53.61641,-5.7413 77.41798,0.39659c11.00381,16.07259 -9.0027,20.44828 -21.48687,17.96703c-13.93394,0 -27.86788,0 -41.80184,0c-10.08721,17.06469 -20.43822,33.9934 -30.74534,50.94422c58.5444,0 117.08887,0 175.63327,0c1.30369,-5.77461 16.09174,-18.21661 2.98142,-16.86417c-23.8187,-2.78366 -8.91918,-28.3094 8.71942,-21.04783c24.75916,0.84361 50.39353,-2.26316 74.40964,2.33939c12.82908,23.87447 -24.26542,18.75262 -40.16651,19.00568c-11.76983,-3.5621 -14.20895,7.34803 -18.86903,14.81338c-18.89412,17.94603 -7.15023,36.86015 5.54845,54.35462c4.65788,7.9586 7.97614,19.00422 19.31066,11.56786c23.11383,-4.70958 48.31221,-4.8804 71.31175,0.62644c48.05979,13.23972 86.59386,54.5578 89.82,101.36222c2.91112,28.74908 -3.71695,58.38258 -23.01556,81.57496c-22.38353,29.72834 -58.70917,46.0065 -96.92431,49.30861m-29.9614,0.29019c-34.83959,-8.29016 -66.96084,-27.5769 -85.58338,-56.69445c-12.18694,-14.55411 -13.77126,-37.08819 -20.24884,-51.68769c-17.08428,-0.20727 -34.16859,-0.41456 -51.25291,-0.62181c-34.60223,-51.61559 -65.10113,-105.59702 -98.47911,-157.93216c-6.50628,17.91673 -43.49434,42.2926 -23.07124,58.78526c51.25518,39.87862 58.08083,117.77246 14.24147,164.72698c-20.09055,20.88324 -47.96046,35.27431 -76.60971,43.40919m2.20052,-28.39631c55.28551,-11.16352 90.61408,-70.27237 71.49146,-119.56886c-5.9097,-16.05552 -22.17021,-41.70271 -36.532,-41.96555c-15.3092,24.50944 -29.08163,49.89643 -45.86015,73.5846c-36.84407,6.00939 -3.08833,-35.58872 4.70764,-49.72399c8.35836,-17.24635 38.7109,-45.14514 0.47464,-44.73206c-26.84314,-2.47692 -55.37007,-0.08162 -77.08513,16.43925c-46.60175,28.59556 -55.42199,93.99977 -20.13078,133.42643c23.89116,28.72294 65.14861,40.93443 102.93428,32.54019l0.00002,-0.00002zm386.81164,-0.00711c47.1881,-10.28057 81.14529,-55.25197 75.03734,-99.88529c-3.2304,-49.60231 -56.57859,-89.71795 -109.61599,-83.05099c-39.74328,-3.48779 -1.69371,30.34436 3.98712,46.7919c5.40446,17.4643 35.17642,38.91448 18.55483,55.94583c-37.28045,1.44817 -75.47496,-1.01696 -112.65305,2.46867c6.67746,45.7127 53.33223,83.52692 103.67604,80.02887c7.06507,-0.05343 14.16419,-0.60765 21.01374,-2.299l-0.00002,0zm-152.29855,-102.15977c4.49032,-35.76686 26.35466,-68.30156 58.24185,-88.65884c1.88393,-8.7736 -17.42405,-49.18356 -24.49388,-21.01071c-21.82207,36.77955 -43.75952,73.50981 -64.91292,110.62279c10.1337,0.22728 21.49351,1.86802 31.16495,-0.95325zm113.90836,-1.77392c-12.57935,-21.92804 -25.43801,-43.72448 -38.58619,-65.36365c-26.37565,12.89719 -43.72748,40.19109 -47.82919,67.43375c28.79886,-0.56924 58.08083,1.39532 86.49034,-1.42262l-0.07485,-0.64751l0,0l-0.00011,0.00002zm-123.37117,-79.09415c12.40642,-21.23229 25.0483,-42.35272 37.07152,-63.77357c-52.28064,-1.08676 -104.67991,-1.32482 -156.94289,0.22969c26.84457,42.78057 51.09717,87.21827 80.44909,128.49522c14.19267,-20.24279 26.24663,-43.54826 39.42228,-64.95132l0,-0.00002z', 'none','none').id('path');
var len = path.getTotalLength();
for(var i = 1, tt = 400; i < tt; i ++) {
var point = path.getPointAtLength(len / tt * i);
var color = ' Crimson',
delay = Math.random() * i * -0.3;
var cx = point.x, cy = point.y;
dr.circle(cx,cy,3,color).set('class','ball').style(`--delay: ${delay}s`);
balls.push(dr.elm);
}
dr.css(`
#mysvg1 { --state: running; }
.ball { running; cursor: pointer; animation: flash .1s var(--delay) linear infinite alternate var(--state); }
@keyframes flash { to { opacity: .2; } }
`);
balls.forEach(b => b.onclick = () => {
playing = !playing;
dr.svg.style.setProperty('--state', ['paused','running'][+playing]);
});
};
</script>
花飞飞 发表于 2024-10-29 21:45
这个试试就很明白了，它们均匀排列，智能得很。。
双路径也支持。
我来画个画，看到路径就想给它变一下 ...
好玩的
花飞飞 发表于 2024-10-29 21:45
var sc = document.createElement('script');
sc.src = 'https:// ...
这是新国标自动脚踏车
小辣椒 发表于 2024-10-29 21:44
哦，可以按路径排列
你说的自由排列，有随机 cx cy 就可以了
马黑黑 发表于 2024-10-29 21:29
tt在for循环里参与计算 point 值，这个tt得有，至于放在for之前还是for内，这都没问题的，C语言也有这么 ...
tt 不是循环变量，这样写会误以为它也是循环变量。
起个网名好难 发表于 2024-10-29 22:15
tt 不是循环变量，这样写会误以为它也是循环变量。
这是标准写法之一，而且，这种写法效果更好。
马黑黑 发表于 2024-10-29 22:30
这是标准写法之一，而且，这种写法效果更好。
没错是真的， 效果更好就呵呵了
马黑黑 发表于 2024-10-29 21:21
这里用的是透明度，还可以考虑用亮度，或二者相结合
这个已经很漂亮了呢{:4_187:}
马黑黑 发表于 2024-10-29 21:22
如果自己去计算路径的长度、路径某一点的坐标值，那是相当复杂的
即使用公式去算，也会让代码变得麻烦，这个真的太好了{:4_187:}
红影 发表于 2024-10-29 22:57
即使用公式去算，也会让代码变得麻烦，这个真的太好了
JS和HTML集成了很多封装。实际上，audio、video这些标签，都是发展需要封装出来的，原先的 backsound 好端端的硬是被w3c砍掉，都是为了给媒体标签让路
红影 发表于 2024-10-29 22:56
这个已经很漂亮了呢
还好，加个阴影就立体化了
起个网名好难 发表于 2024-10-29 22:32
没错是真的， 效果更好就呵呵了
不信你去查一下资料。我个人对此有所知，我不乱说不乱用。
马黑黑 发表于 2024-10-29 23:11
JS和HTML集成了很多封装。实际上，audio、video这些标签，都是发展需要封装出来的，原先的 backsound 好 ...
哦 哦，audio、video也是封装啊，用习惯了还以为它天然就那样呢{:4_173:}
马黑黑 发表于 2024-10-29 23:12
还好，加个阴影就立体化了
那就更漂亮了{:4_187:}
红影 发表于 2024-10-29 23:40
哦 哦，audio、video也是封装啊，用习惯了还以为它天然就那样呢
HTML4是没有这些标签的，后来才加进去。这些东东，有HTML的封装，有JS对它们的封装，都成配套的。还有一些相对新的元素，分析过它们的一小部分，里面有的有了大量的伪元素做修饰。