同步操作将从 奇虎360/spriteJS 强制同步,此操作会覆盖自 Fork 仓库以来所做的任何修改,且无法恢复!!!
确定后同步将在后台操作,完成时将刷新页面,请耐心等待。
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" /><title>Demo</title><style>#paper {width: 800px;height: 300px;border: solid 1px red;}#paper canvas {background-color: #fdd;}</style></head><body><button id="startRecord">start record</button><button id="stopRecord" disabled="disabled">stop record</button><div id="message"></div><div id="paper"></div><img id="recordGif"/><script src="https://s2.ssl.qhres.com/!87edaa34/animator-0.3.1.min.js"></script><script src="/js/spritejs.js"></script><script src="/js/gif.js"></script><script>const birdsJsonUrl = 'https://s5.ssl.qhres.com/static/5f6911b7b91c88da.json'const birdsRes = 'https://p.ssl.qhimg.com/d/inn/c886d09f/birds.png';(async function(){const paper = spritejs.Paper2D('#paper',{viewport: ['auto', 'auto'],resolution: [800, 400],stickMode: 'height',// stickExtend: true,})console.log(paper.distortion)const Sprite = spritejs.Sprite,Path = spritejs.Path,Label = spritejs.Labelconst layer = paper.layer('fglayer', {renderMode: 'repaintDirty'})await paper.preload([birdsRes, birdsJsonUrl] // 预加载资源,支持雪碧图)const s = new Sprite({attributeChangedCallback(...args) {//console.log(args)}})s.attr({anchor: [0.5, 0.5],pos: [300, 100],//size: [50, 50],//bgcolor: 'green',//opacity: 0.5,transform: {//translate: [30, 30],//rotate: 30,scale: [0.5, 0.5],},offsetPath: 'M10,80 q100,120 120,20 q140,-50 160,0',//offsetDistance: 0.5,//offsetRotate: 30,zIndex: 200,})layer.appendChild(s)s.textures = ['bird1.png']s.animate([{offsetDistance: 0},{offsetDistance: 1}], {duration: 3000,direction: 'alternate',iterations: Infinity,})s.animate([{scale: [.5, .5], offsetRotate: 'auto'},{scale: [.5, -.5], offsetRotate: 'reverse'},{scale: [.5, .5], offsetRotate: 'auto'},], {duration: 6000,iterations: Infinity,easing: 'step-end',})s.animate([{textures: 'bird1.png'},{textures: 'bird2.png'},{textures: 'bird3.png'},], {duration: 300,direction: 'alternate',iterations: Infinity,})window.s = s;//paper.removeChild(s);// console.log('box', s3.renderBox)// s.on('touchstart', e => {// console.log('in origin box', e.offsetX, e.offsetY);// e.stopDispatch()// })// layer.on('update', e => {// console.log(e.currentTime)// })// s.on('update', e => {// console.log('update')// })// const s1 = new Sprite({// attributeChangedCallback(...args) {// //console.log(args)// }// })// s1.attr({// anchor: [0.5, 0.5],// pos: [100, 100],// size: [50, 50],// bgcolor: 'green',// opacity: 0.5,// transform: {// translate: [30, 30],// rotate: 45,// },// zIndex: 201,// })// layer.appendChild(s1)// s1.on('click', function(evt){// console.log(evt)// })const s2 = new Sprite()s2.attr({anchor: [0.5, 0.5],pos: [100, 100],size: [50, 50],bgcolor: 'red',border: [5, 'blue'],opacity: 1,zIndex: 101,// transform: {// //skew: [30, 0],// translate: [30, 30],// rotate: 45,// },transform: 'translate(30,30) rotate(45)',linearGradients: {bgcolor: {direction: 135,colors: [{offset: 0,color: 'red',}, {offset: 1,color: 'green',}]},border: {direction: 135,colors: [{offset: 0,color: '#37c',}, {offset: 1,color: '#c73',}]},},})window.s2 = s2const s3 = new Sprite()s3.attr({anchor: [0.5, 0.5],pos: [130, 130],size: [50, 50],bgcolor: 'red',border: [15, 'blue'],opacity: 0.5,zIndex: -500,})layer.append(s2, s3);window.s3 = s3s2.on('click', e => {console.log(111)e.stopDispatch()})s3.on('click', e => {console.log(222)})const s4 = new Path()s4.attr({anchor: [0, 0],pos: [300, 100],//size: [200, 200],bgcolor: '#ddd',color: 'red',//renderMode: 'fill',lineWidth: 6,lineCap: 'round',d: 'M10,80 q100,120 120,20 q140,-50 160,0',//d: 'M10 80 h260 v206 h-260Z',linearGradients: {strokeColor: {//direction: 45,//rect: [0, 0, 100, 100],vector: [10, 50, 290, 200],colors: [{offset: 0,color: 'rgba(255,0,0,0)',}, {offset: 1,color: 'rgba(255,0,0,0)',}]},}})layer.append(s4)window.s4 = s4const a1 = new Animator(1000, p => {const colors = [{offset: 0, color: 'rgba(255,0,0,0)'},{offset: p, color: 'rgba(255,0,0,1)'},{offset: p, color: 'rgba(255,0,0,0)'},]const linearGradients = s4.attr('linearGradients')linearGradients.strokeColor.colors = colorss4.attr({linearGradients})})a1.animate()const label = new Label('Hello World!\n你好,世界!')label.attr({anchor: [0.5, 0.5],pos: [300, 150],zIndex: 1000,font: '36px Arial',border: [10, 'blue'],opacity: 0.3,linearGradients: {fillColor: {direction: 135,colors: [{offset: 0,color: 'red',}, {offset: 1,color: 'green',}]},}})layer.append(label)label.animate([{rotate: 0},{rotate: 360}], {duration: 10000,iterations: Infinity,})s.on('update', evt => {if(s.OBBCollision(label)){label.attr('opacity', 0.7)} else {label.attr('opacity', 0.3)}})let gif, timerstartRecord.onclick = function(){startRecord.disabled = 'disabled'stopRecord.disabled = ''gif = new GIF({workers: 4,workerScript: '/js/gif.worker.js',quality: 10,background: '#fff',})gif.addFrame(layer.canvas, {delay: 1, copy: true})//gif.addFrame(layer.canvas, {delay: 1000, copy: true})//gif.addFrame(layer.canvas, {delay: 2000, copy: true})//gif.addFrame(layer.canvas, {delay: 3000, copy: true})//gif.addFrame(layer.canvas, {delay: 100})timer = setInterval(() => {gif.addFrame(layer.canvas, {delay: 1, copy: true})}, 100)gif.on('finished', function(blob) {const url = URL.createObjectURL(blob);startRecord.disabled = ''//recordGif.src = urlconst link = document.createElement('a')link.setAttribute('href', url);link.setAttribute('download', 'snap.gif');link.click()message.innerHTML = ''s3.attr('opacity', 0.5)});//console.log(gif.frames)}stopRecord.onclick = function(){stopRecord.disabled = 'disabled's3.attr('opacity', 0)clearInterval(timer)layer.off('update')gif.render()message.innerHTML = 'generating gif... please wait.'}})()</script></body></html>
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。