代码拉取完成，页面将自动刷新
同步操作将从 奇虎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.Label
const 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 = s2
const 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 = s3
s2.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 = s4
const 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 = colors
s4.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, timer
startRecord.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 = url
const 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>
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手