TweenMax实现svg书写签名过程录制回放效果代码
代码语言:html
所属分类:其他
代码描述:TweenMax实现svg书写签名过程录制回放效果代码,结合了Draggable和DrawSVGPlugin插件
代码标签: TweenMax svg 手写 签名 录制 回放
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> main { width: 100vw; height: 100vh; position: relative; background: #222; background: #11252f; overflow: hidden; } .info { color: #fafafa; padding: 15px; } #svg-drawing { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } #pencil-path { fill: none; stroke: #aaa; stroke-width: 3; } #smooth-path { fill: none; stroke: #fafafa; stroke-width: 3; } </style> </head> <body> <main> <div class="info">Draw Something...</div> <svg id="svg-drawing"> <polyline id="pencil-path" /> <path id="smooth-path" d="" /> <rect id="pencil-point" width="1" height="1" /> </svg> </main> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/TweenMax.min.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/Draggable.1.20.3.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/DrawSVGPlugin.js"></script> <script> TweenLite.defaultEase = Linear.easeNone; var perf = window.performance; var now = perf ? perf.now.bind(perf) : Date.now; var log = console.log.bind(console); var pencilPoint = document.querySelector("#pencil-point"); var pencilPath = document.querySelector("#pencil-path"); var smoothPath = document.querySelector("#smooth-path"); var points = []; var strokes = []; var prev = null; var start = 0; var tl = new TimelineMax(); var pencil = new Draggable(pencilPoint, { bounds: "#svg-drawing", trigger: "#svg-drawing", cursor: "crosshair", onDrag, onDragEnd, onPress }); function onPress() { tl.clear(); start = now(); pencilPath.setAttribute("points", ""); smoothPath.setAttribute("d", ""); var x = this.pointerX; var y = this.pointerY; var stroke = { elapsed: 0, time: start, dist: 0, x: x, y: y }; .........完整代码请登录后点击上方下载按钮下载查看
网友评论0