论坛 › 欢乐水吧 › AI线绘三国人物

梦江南 发表于 2025-5-6 15:48

AI线绘三国人物

<style type="text/css">
@import url(https://file.uhsea.com/2403/f45f79bba93cd62f8603eae6fa88eb78YS.css);
:root        {--w:600px;--h:900px;}
                /**        不满意一般设置也可以调整下                */
        .lrcShow {
                        font: normal 1.5em 微软雅黑;
                        pointer-events:none;
                        filter: drop-shadow(1px 0px 0px white) drop-shadow(-1px 0px 0px white) drop-shadow(0px 1px 0px white) drop-shadow(0px -1px 0px white);
                        z-index:99;left:20%;bottom:1%;color:hsla(240,60%, 90%, 0.7);
        }
        .lrcShow::before {
                        color: transparent;
        }
        #oBlk        {
                width:var(--w);height:var(--h); position: relative; margin:20px 0 32px 60px;
                background: hsla(203, 25%, 86%, 0.7);
                padding:16px;
                overflow:hidden;
                border-radius:36px;
                box-shadow:3px 3px 6px darkgray;
        }
        #showSVG        {position:absolute; left:0px;top:0px;width:100%;height:100%;}
#processMeter        {position: absolute; right:2%; bottom:5px; width: 120px; height:60px; cursor: pointer; z-index:99;}
#mCtrl{transform-origin:50%;animation:rot 5s linear infinite var(--rState);}
@keyframes        rot{to{transform: rotate(1turn)}}
      #feather {position: absolute; left: 0; top: 0; width: 50px;offset-distance: 0;offset-path: path("M500 100 Q 300 80, 600 200 T 600 900");animation: move 8s linear infinite;z-index:100;}
      @keyframes move { to { offset-distance: 100%;} }
</style>
<div id="oBlk">
        <div id="showSVG"></div>
                <div id="processMeter">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 100" id="svgObj">
                        <defs>
                    <clipPath id="clip">
                            <circle cx="100" cy="50" r="35" />
                    </clilpPath>
            </defs>
                        <image xlink:href="https://img2.oldkids.cn/upload/2025/04/05/blog_260798238_20250405171037277.jpg" width="100" height='100' x="50" y="0" id="mCtrl" clip-path="url(#clip)" preserveAspectRatio="none" />
                        <g fill='none' stroke-width='8'>
                                <path d="M 40 97 C -120 -25,330 -25, 150 97 Z" stroke="lightgray" id="bgc"></path>
                                <path d="M 40 97 C -120 -25,330 -25, 150 97 Z" stroke="pink" id="fgc"></path>
                        </g>
                          <g text-anchor="middle" dominant-baseline="middle" fill="red" style="font-size:16px;">
                                <text x="82%" y="55%" id="durTime">00:00</text>
                                <text x="18%" y="55%" id="curTime">00:00</text>
                          </g>
                        </svg>
                </div>
        <divclass="lrcShow" data-lrc=三国人物'></div>
</div>
<script type="text/javascript">
var sf0 = document.createElement('script');
sf0.type = 'text/javascript';
sf0.src = "https://file.uhsea.com/2410/739c572b5176f670f350463cf9ade957QB.js";
sf0.charset = "utf-8";
document.body.appendChild(sf0);

sf0.onload = () => {
let pics = [
"https://img2.oldkids.cn/upload/2025/05/06/blog_260798238_20250506085151407.jpg",
"https://img1.oldkids.cn/upload/2025/05/06/blog_260798238_20250506085151244.jpg",
"https://img1.oldkids.cn/upload/2025/05/06/blog_260798238_20250506085152706.jpg",
"https://img2.oldkids.cn/upload/2025/05/06/blog_260798238_20250506085152641.jpg",
"https://img4.oldkids.cn/upload/2025/05/06/blog_260798238_20250506085152121.jpg",
"https://img4.oldkids.cn/upload/2025/05/06/blog_260798238_20250506085301594.jpg",
"https://img4.oldkids.cn/upload/2025/05/06/blog_260798238_20250506085152257.jpg",
"https://img4.oldkids.cn/upload/2025/05/06/blog_260798238_20250506085301952.jpg",
];
function genTagObj(parentNode,jsonData){let sObj=document.createElementNS("http://www.w3.org/2000/svg",jsonData.tag);for(let key in jsonData){if(key==='tag'){continue}else if(jsonData.hasOwnProperty(key)){sObj.setAttribute(key,jsonData)}};if(parentNode)parentNode.appendChild(sObj);return sObj};
let mysvg = genTagObj(null ,{'tag':'svg', 'id':'sObj', 'xmlns:xlink':"http://www.w3.org/1999/xlink" ,'xmlns':"http://www.w3.org/2000/svg", 'viewBox':`0 0 600 900`});
pics.forEach((pic, idx) => {
        let beginStr = idx == 0 ? `0;ep${pics.length-1}.end-5` : `ep${idx-1}.end-5`;
        let imgObj = genTagObj(mysvg,{'tag':'image','id':`p${idx}`, 'xlink:href':pic, 'width':0, 'height':0, 'x':384, 'y':512, 'opacity':0, 'preserveAspectRatio':'none'});
        let aniObj = genTagObj(imgObj,{'tag':'animate','id':`bp${idx}`, 'attributeName':'opacity', 'from':0, 'to':1, 'dur':3, 'begin':beginStr, 'fill':'freeze'});
        aniObj = genTagObj(imgObj,{'tag':'animate', 'attributeName':'x', 'from':384, 'to':0, 'dur':3, 'begin':`bp${idx}.begin`, 'fill':'freeze'});
        aniObj = genTagObj(imgObj,{'tag':'animate', 'attributeName':'y', 'from':512, 'to':0, 'dur':3, 'begin':`bp${idx}.begin`, 'fill':'freeze'});
        aniObj = genTagObj(imgObj,{'tag':'animate', 'attributeName':'width', 'from':0, 'to':600, 'dur':3, 'begin':`bp${idx}.begin`, 'fill':'freeze'});
        aniObj = genTagObj(imgObj,{'tag':'animate', 'attributeName':'height', 'from':0, 'to':910, 'dur':3, 'begin':`bp${idx}.begin`, 'fill':'freeze'});
        //aniObj = genTagObj(imgObj,{'tag':'animateTransform', 'attributeName':'transform', 'type':'rotate','from':'0 384 512', 'to':'360 384 512', 'dur':3, 'begin':`bp${idx}.begin`, 'fill':'freeze'});
       
        //aniObj = genTagObj(imgObj,{'tag':'animateTransform', 'attributeName':'transform', 'type':'rotate','from':'0 384 512', 'to':'-360 384 512', 'dur':3, 'begin':`bp${idx}.begin+10`, 'fill':'freeze'});
        aniObj = genTagObj(imgObj,{'tag':'animate', 'attributeName':'x', 'to':384, 'from':0, 'dur':3, 'begin':`bp${idx}.begin+10`, 'fill':'freeze'});
        aniObj = genTagObj(imgObj,{'tag':'animate', 'attributeName':'y', 'to':512, 'from':0, 'dur':3, 'begin':`bp${idx}.begin+10`, 'fill':'freeze'});
        aniObj = genTagObj(imgObj,{'tag':'animate', 'attributeName':'width', 'to':0, 'from':600, 'dur':3, 'begin':`bp${idx}.begin+10`, 'fill':'freeze'});
        aniObj = genTagObj(imgObj,{'tag':'animate', 'attributeName':'height', 'to':0, 'from':910, 'dur':3, 'begin':`bp${idx}.begin+10`, 'fill':'freeze'});
        aniObj = genTagObj(imgObj,{'tag':'animate','id':`ep${idx}`, 'attributeName':'opacity', 'from':1, 'to':0, 'dur':3, 'begin':`bp${idx}.begin+10`, 'fill':'freeze'});
});
showSVG.innerHTML = mysvg.outerHTML;

const lrc =`
滚滚长江东逝水 -杨洪基
      歌词由 www.33VE.com
        提供词：杨慎
        曲：谷建芬
        LRC: 梦江南
        滚滚长江东逝水
        浪花淘尽英雄
        是非成败转头空
        青山依旧在
        几度夕阳红
        白发渔樵江渚上
        惯看秋月春风
        一壶浊酒喜相逢
        古今多少事
        都付笑谈中
        一壶浊酒喜相逢
        古今多少事
        都付笑谈中
`;
var opts = {
        lrcTxt:lrc,
//        audioCtrl:'mDisk',
        //        歌曲MP3链接放这里
        audioURL:'https://img4.oldkids.cn/upload/2025/05/06/blog_260798238_20250506151642906.mp3'
        //audioURL:'https://cccimg.com/view.php/aa761e148027a311dfb213e0976bb941.aac'
};
let lrcPlayer = new lrcPlayerY(opts);
        //        格式化时间数据
        let formatTime = (time) => {
                let min = ('' + parseInt(time / 60)).padStart(2,'0');
                let sec = ('' + parseInt(time % 60)).padStart(2,'0');
                return (`${min}:${sec}`);
        };
        //        计算/设置控制路径有关的数据
        let circlePoints = [];
        let bgcLen = bgc.getTotalLength();
        fgc.style.strokeDasharray = bgc.style.strokeDasharray = bgcLen;
       
        for(let i = 0; i < bgcLen; i++)        {
                circlePoints.push(bgc.getPointAtLength(i));
        }
        //        在 timeupdate 事件处理中添加与控制路径有关的处理
        lrcPlayer.mObj.addEventListener('timeupdate', function() {
                let processValue = lrcPlayer.mObj.currentTime / lrcPlayer.mObj.duration;
                fgc.style.strokeDashoffset = bgcLen * (1 - processValue);
                durTime.textContent = formatTime(lrcPlayer.mObj.duration);
                curTime.textContent = formatTime(lrcPlayer.mObj.currentTime);
        });
        //        动态元素监测
        let runState = () => {
                lrcPlayer.mObj.paused
                        ? (mCtrl.style.setProperty('--rState','paused'),sObj.pauseAnimations())
                        : (mCtrl.style.setProperty('--rState','running'),sObj.unpauseAnimations());
        }
        //        SVG viewBox 与 实际尺寸的比值
        let factorX = svgObj.viewBox.baseVal.width / svgObj.clientWidth;
        let factorY = svgObj.viewBox.baseVal.height / svgObj.clientHeight;
        //console.log(factorX, factorY);
        //        歌曲进度条鼠标移动处理
        let seeking = false;
        let moveEventProc = (event)        =>        {
                if(!seeking)        return;
                let thePoint = 0, minV = 100;
                circlePoints.forEach((point, idx ) => {
                        let mx = (point.x - event.offsetX * factorX), my = (point.y - event.offsetY * factorY);
                        let mv = mx*mx + my*my;
                        if(mv < minV)        {
                                minV = mv; thePoint = idx;
                        }
                })
                let chkVal = thePoint / bgcLen;
                let chkTime = lrcPlayer.mObj.duration * chkVal;
                fgc.style.strokeDashoffset = bgcLen * (1 - chkVal);

                let fIdx = false;
                lrcPlayer.lrcVec.forEach((lrc,idx) => {
                        if(!fIdx && lrc.seconds >= chkTime )        {
                                fIdx = !fIdx; lrcPlayer.idx = idx;
                                lrcPlayer.mObj.currentTime = chkTime;
                                return fIdx;
                        }
                });
        };
       
        fgc.addEventListener("mousemove", (event) => moveEventProc(event));
        bgc.addEventListener("mousemove", (event) => moveEventProc(event));
        fgc.onclick = bgc.onclick = (event) => seeking = !seeking;                

        //        歌曲、歌词 及 动态元素 启/停控制
        mCtrl.onclick = () => {
                lrcPlayer.mObj.paused ? (lrcPlayer.mObj.play()) : (lrcPlayer.mObj.pause());
        }
        lrcPlayer.mObj.addEventListener('play', () => runState());
        lrcPlayer.mObj.addEventListener('pause', () => runState());
        lrcPlayer.mObj.play().catch(_ = () => runState());

}
</script>

梦油 发表于 2025-5-6 16:48

杨洪基演唱的《滚滚长江东逝水》很有气势。

梦江南 发表于 2025-5-6 17:29

梦油 发表于 2025-5-6 16:48
杨洪基演唱的《滚滚长江东逝水》很有气势。

是的，谢谢梦油老师分享。

红影 发表于 2025-5-6 21:08

这么多三国英雄，一个个都很有特色。
从江南的贴子里认识三国英雄{:4_199:}

红影 发表于 2025-5-6 21:08

歌曲也配得好，欣赏江南好帖{:4_199:}

小辣椒 发表于 2025-5-6 21:44

阿姨这个制作辛苦的，AI图片做了8张，人物图片个个精彩{:4_199:}

小辣椒 发表于 2025-5-6 21:45

歌曲配的铿锵有力，杨洪基演唱太给力了{:4_178:}

小辣椒 发表于 2025-5-6 21:46

谢谢阿姨的精彩分享{:4_179:}

梦江南 发表于 2025-5-7 08:52

红影 发表于 2025-5-6 21:08
这么多三国英雄，一个个都很有特色。
从江南的贴子里认识三国英雄

早上问好，其实这里只有他出来四个人物，关公、张飞、刘备，诸葛亮。只是诸葛亮的羽毛扇子做不出来。做出来的不像。就没用。{:4_187:}

梦江南 发表于 2025-5-7 08:52

红影 发表于 2025-5-6 21:08
歌曲也配得好，欣赏江南好帖

歌曲就是三国的主题曲。{:4_204:}

梦江南 发表于 2025-5-7 09:37

小辣椒 发表于 2025-5-6 21:44
阿姨这个制作辛苦的，AI图片做了8张，人物图片个个精彩

早上问好，小辣椒，阿姨做了20多张，这里只有四个人物：关公，张飞、刘备，诸葛亮，这个诸葛亮的羽毛扇子做不出来。做出来的不像。就没用。{:4_187:}

梦江南 发表于 2025-5-7 09:38

小辣椒 发表于 2025-5-6 21:45
歌曲配的铿锵有力，杨洪基演唱太给力了

这就是三国的主题曲。

梦江南 发表于 2025-5-7 09:39

小辣椒 发表于 2025-5-6 21:46
谢谢阿姨的精彩分享

谢谢您的分享支持。祝您安康 ！{:4_179:}

梦油 发表于 2025-5-7 10:30

梦江南 发表于 2025-5-6 17:29
是的，谢谢梦油老师分享。

后来“大衣哥”也演唱过这首歌，我看也很不错。

小辣椒 发表于 2025-5-7 14:09

梦江南 发表于 2025-5-7 09:37
早上问好，小辣椒，阿姨做了20多张，这里只有四个人物：关公，张飞、刘备，诸葛亮，这个诸葛亮的羽毛扇子 ...

阿姨辛苦的，为做个帖，做20多张，选出来用，太不容易了，可见阿姨做事太认真了{:4_179:}

小辣椒 发表于 2025-5-7 14:10

梦江南 发表于 2025-5-7 09:38
这就是三国的主题曲。

好听，特别给力，声音也是高昂

小辣椒 发表于 2025-5-7 14:11

梦江南 发表于 2025-5-7 09:39
谢谢您的分享支持。祝您安康 ！

谢谢阿姨，多休息，一定要保重身体{:4_179:}

梦江南 发表于 2025-5-7 14:37

梦油 发表于 2025-5-7 10:30
后来“大衣哥”也演唱过这首歌，我看也很不错。

大衣哥的音色也不错的。

梦江南 发表于 2025-5-7 14:39

小辣椒 发表于 2025-5-7 14:09
阿姨辛苦的，为做个帖，做20多张，选出来用，太不容易了，可见阿姨做事太认真了

发帖子是对人负责，也对自己负责，这也是一种责任。你说是不是

梦江南 发表于 2025-5-7 14:40

小辣椒 发表于 2025-5-7 14:11
谢谢阿姨，多休息，一定要保重身体

谢谢小辣椒关心，会注意的，你也要多注意哦！{:4_179:}

查看完整版本: AI线绘三国人物