论坛 › 马黑黑教程专版 › 理解二次贝塞尔曲线

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

红影 发表于 2023-6-30 21:43
就是你说的emoji字符吧。
emoji字符是可以直接以字符而不是编码出现的，即使是在代码里，前提是网页编码得是 UTF-8，而这里是 GBK

红影 发表于 2023-7-1 00:32

<style>
#papa {
      margin: 0px 0 0 calc(50% - 593px);
      width: 1024px;
      height: 630px;
      background: gray url('https://pic.imgdb.cn/item/611351cc5132923bf8ef79cb.jpg') no-repeat center/cover;
      box-shadow: 3px 3px 20px #000;
      position: relative;
        border-radius: 12px;
}
#mydiv {
      position: absolute;
        left: 60px; top: 178px;
      padding: 20px 10px;
      width:270px;
        height:206px;
      border-radius:25px 15px;
      box-shadow: 0px 0px 2px #eaeaea;
      color: navy;
      background: #eaeaea;
      --state: paused;
}
#mydiv::before {
      content: attr(data-tt);
      position: absolute;
      left: 86px;
      bottom: -6px;
      padding: 0 20px;
      font-size: 14px;
      line-height: 20px;
}
#mydiv p { padding: 8px 0; font-size: 16px; }
#mplayer {
      position: absolute;
      width: 58px;
      height: 58px;
      background: conic-gradient(DimGray,LightGrey,DimGray,LightGrey);
      border-radius: 50%;
      bottom: -76px;
      left: 116px;
      cursor: pointer;
      pointer-events: auto;
      animation: rot 5s infinite linear var(--state);
}
#mlist { margin: 20px; column-count: 2; column-rule: 2px solid transparent; column-gap: 30px; column-fill: balance; }
#mlist > span { display: block; width: fit-content; }
#mlist a { text-decoration: none; }
#mlist > span > a:hover { cursor: pointer; color: red; }
.lighten > a { color: red; }
.normal > a { color:navy; }
.wenzi { position: absolute; left:150px; bottom: 240px; color: navy; font: italic normal 12px/20px 'FangSong',serif; opacity: .95; }
@keyframes rot { to { transform: rotate(360deg); } }
</style>
<div id="papa">
<div id="mydiv" data-tt="00:00/00:00">
      <div id="mlist" ></div>
      <div id="mplayer"></div></div>
        <div class="wenzi">——李志辉作品精选</div>
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=444323047" autoplay="autoplay"></audio>
<script>
(function () {
      let spans = [];
      let ypAr = [['444323047','步步莲花'],['30413344','水墨兰亭'],['131149','紫禁花园'],['522467506','云门'],['522468278','一拂尘烟'],['30413351','禅茶人生'],['131245','平遥古韵'],['522467321','天地行云'],['30413352','云水潇湘'],['30413343','太极幻影']];
      ypAr.forEach((item) => item = 'https://music.163.com/song/media/outer/url?id=' + item);
      ypAr.forEach((item, key) => {let sp = document.createElement('span');sp.className = 'normal';sp.innerHTML = `${key+1} <a onclick="javascript:mplay(${key})">${ypAr}</a>`;mlist.appendChild(sp);spans.push(sp);});
      let toMin = (val) => {if (!val) return '00:00';val = Math.floor(val);let min = parseInt(val / 60),sec = parseFloat(val % 60);if (min < 10) min = '0' + min;if (sec < 10) sec = '0' + sec;return min + ':' + sec;};
      mplay = (idx, flag = 0) => {aud.src = ypAr;if (flag >= 0) aud.play();spans.className = 'normal';spans.className = 'lighten';lastIdx = idx;}
      let mState = () => mydiv.style.setProperty('--state', aud.paused ? 'paused' : 'running');
      aud.addEventListener('play', mState, false);
      aud.addEventListener('pause', mState, false);
      aud.addEventListener('ended', () => mplay(Math.floor(Math.random() * ypAr.length)));
      aud.addEventListener('timeupdate', () => mydiv.dataset.tt = toMin(aud.currentTime) + ' / ' + toMin(aud.duration));
      mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
      let lastIdx = Math.floor(Math.random() * ypAr.length);
      mplay(lastIdx);
})();
</script>

红影 发表于 2023-7-1 00:35

我就加个底图，去掉了边框上的文字，别的好像也没动啊，结果无法选曲了，找不出原因。晕死，折腾好久也不知道怎么回事，黑黑帮着看看呗{:4_184:}

马黑黑 发表于 2023-7-1 07:14

本帖最后由 马黑黑 于 2023-7-1 07:16 编辑

红影 发表于 2023-7-1 00:35
我就加个底图，去掉了边框上的文字，别的好像也没动啊，结果无法选曲了，找不出原因。晕死，折腾好久也不知 ...
我无法编辑你的帖子，权限约束。

马黑黑 发表于 2023-7-1 07:38

红影 发表于 2023-7-1 00:35
我就加个底图，去掉了边框上的文字，别的好像也没动啊，结果无法选曲了，找不出原因。晕死，折腾好久也不知 ...

代码中出现的错误主要是帖子父元素设置了 pointer-events: none; 属性和值，该属性用于禁止、开放鼠标点击动作。我常常使用这个属性，目的在于高效利用伪元素。你这个帖子，不需要伪元素的交互操作，父元素就不需要设置此属性，可将所有的 pointer-events 属性和值全部删除。很多属性会有继承性，你在父元素设置了相应属性，子孙元素会跟着继承。

整理后的代码如下：

<style>
#papa {
        margin: 0px 0 0 calc(50% - 593px);
        width: 1024px;
        height: 630px;
        background: gray url('https://pic.imgdb.cn/item/611351cc5132923bf8ef79cb.jpg') no-repeat center/cover;
        box-shadow: 3px 3px 20px #000;
        position: relative;
}
#mydiv {
        position: absolute;
        left: 60px; top: 178px;
        padding: 20px 10px;
        width:270px;
        height:206px;
        border-radius:25px 15px;
        box-shadow: 0px 0px 2px #eaeaea;
        color: navy;
        background: #eaeaea;
        --state: paused;
}
#mydiv::before {
        content: attr(data-tt);
        position: absolute;
        left: 86px;
        bottom: -6px;
        padding: 0 20px;
        font-size: 14px;
        line-height: 20px;
}
#mydiv p { padding: 8px 0; font-size: 16px; }
#mplayer {
        position: absolute;
        width: 58px;
        height: 58px;
        background: conic-gradient(DimGray,LightGrey,DimGray,LightGrey);
        border-radius: 50%;
        bottom: -76px;
        left: 116px;
        cursor: pointer;
        animation: rot 5s infinite linear var(--state);
}
#mlist { margin: 20px; column-count: 2; column-rule: 2px solid transparent; column-gap: 30px; column-fill: balance; }
#mlist > span { display: block; width: fit-content; }
#mlist a { text-decoration: none; }
#mlist > span > a:hover { cursor: pointer; color: red; }
.lighten > a { color: red; }
.normal > a { color: var(--fColor); }

@keyframes rot { to { transform: rotate(360deg); } }
</style>
<div id="papa">
        <div id="mydiv" data-tt="00:00/00:00">
                <div id="mlist" ></div>
                <div id="mplayer"></div>
        </div>
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=444323047" autoplay="autoplay"></audio>

<script>
(function () {
        let spans = [];
        let ypAr = [['444323047','步步莲花'],['30413344','水墨兰亭'],['131149','紫禁花园'],['522467506','云门'],['522468278','一拂尘烟'],['30413351','禅茶人生'],['131245','平遥古韵'],['522467321','天地行云'],['30413352','云水潇湘'],['30413343','太极幻影']];
        ypAr.forEach((item) => item = 'https://music.163.com/song/media/outer/url?id=' + item);
        ypAr.forEach((item, key) => {let sp = document.createElement('span');sp.className = 'normal';sp.innerHTML = `${key+1} <a onclick="javascript:mplay(${key})">${ypAr}</a>`;mlist.appendChild(sp);spans.push(sp);});
        let toMin = (val) => {if (!val) return '00:00';val = Math.floor(val);let min = parseInt(val / 60),sec = parseFloat(val % 60);if (min < 10) min = '0' + min;if (sec < 10) sec = '0' + sec;return min + ':' + sec;};
        mplay = (idx, flag = 0) => {aud.src = ypAr;if (flag >= 0) aud.play();spans.className = 'normal';spans.className = 'lighten';lastIdx = idx;}
        let mState = () => mydiv.style.setProperty('--state', aud.paused ? 'paused' : 'running');
        aud.addEventListener('play', mState, false);
        aud.addEventListener('pause', mState, false);
        aud.addEventListener('ended', () => mplay(Math.floor(Math.random() * ypAr.length)));
        aud.addEventListener('timeupdate', () => mydiv.dataset.tt = toMin(aud.currentTime) + ' / ' + toMin(aud.duration));
        mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
        let lastIdx = Math.floor(Math.random() * ypAr.length);
        mplay(lastIdx);
})();
</script>

红影 发表于 2023-7-1 11:15

一上来赶紧来看这个，原来折腾我那么长时间的原因，只是父元素里的pointer-events: none;被继承了。这个下回可记住了{:4_173:}

花飞飞 发表于 2023-7-1 11:40

直观的二次贝塞尔曲线，这个经常在贴子里出现{:4_199:}

马黑黑 发表于 2023-7-1 11:40

红影 发表于 2023-7-1 11:15
一上来赶紧来看这个，原来折腾我那么长时间的原因，只是父元素里的pointer-events: none;被继承了。这个下 ...

非必要的属性不要设置。

之所以一直建议自己动手从头到尾做一个帖子的用意在于：去组织自己的代码，明白每一句代码的含义。

马黑黑 发表于 2023-7-1 11:41

花飞飞 发表于 2023-7-1 11:40
直观的二次贝塞尔曲线，这个经常在贴子里出现

二次贝塞尔曲线比较简单，凭空就可以写出来

红影 发表于 2023-7-1 12:07

马黑黑 发表于 2023-7-1 11:40
非必要的属性不要设置。

之所以一直建议自己动手从头到尾做一个帖子的用意在于：去组织自己的代码，明 ...

嗯嗯，每次碰到问题，倒是更能让人认识到各个语句的真实作用和限制，也是好事呢。
我赶紧把这个帖子送清舟去，本来就是想告诉她，用你的代码可以自己组个喜欢的歌曲的专辑，不用每次去找专辑了{:4_173:}

马黑黑 发表于 2023-7-1 12:12

红影 发表于 2023-7-1 12:07
嗯嗯，每次碰到问题，倒是更能让人认识到各个语句的真实作用和限制，也是好事呢。
我赶紧把这个帖子送清 ...

用心了

红影 发表于 2023-7-1 14:44

马黑黑 发表于 2023-6-30 22:51
领会控制点与曲线形态的关系问题，就能理解了二次贝塞尔曲线的原理

还好对二次贝塞尔曲线倒还是比较清楚了。

红影 发表于 2023-7-1 14:46

马黑黑 发表于 2023-7-1 11:40
非必要的属性不要设置。

之所以一直建议自己动手从头到尾做一个帖子的用意在于：去组织自己的代码，明 ...

其实这个仍然是套用代码呢，结果没套用明白。{:4_173:}

红影 发表于 2023-7-1 15:02

马黑黑 发表于 2023-7-1 12:12
用心了

能够这样组成自己的专辑，清舟一定很开心{:4_173:}

马黑黑 发表于 2023-7-1 15:39

红影 发表于 2023-7-1 15:02
能够这样组成自己的专辑，清舟一定很开心

最近好像很忙呢

马黑黑 发表于 2023-7-1 15:42

红影 发表于 2023-7-1 14:44
还好对二次贝塞尔曲线倒还是比较清楚了。

这就好

南无月 发表于 2023-7-1 18:18

马黑黑 发表于 2023-6-30 19:02
能帮助理解就好

控制点换个位置，很直观的看出变化了。。。

马黑黑 发表于 2023-7-1 18:24

南无月 发表于 2023-7-1 18:18
控制点换个位置，很直观的看出变化了。。。

对

南无月 发表于 2023-7-1 18:27

马黑黑 发表于 2023-7-1 18:24
对

要什么样的曲线，头尾确定后，可以看着找控制点了

马黑黑 发表于 2023-7-1 19:18

南无月 发表于 2023-7-1 18:27
要什么样的曲线，头尾确定后，可以看着找控制点了

对的。但是，曲线的点与控制点，都是可以灵活的，这里为了演示，将两端固定了。

查看完整版本: 理解二次贝塞尔曲线