julrahmatrotationanimation
Version:
This JavaScript code creates a simple animation of a rotating block. The animation is achieved by continuously rotating a square block element using CSS transformations.
273 lines (238 loc) • 8.82 kB
JavaScript
const block = document.createElement('div');
block.style.width = '100px';
block.style.height = '100px';
block.style.backgroundColor = 'blue';
block.style.position = 'absolute';
block.style.top = '50%';
block.style.left = '50%';
block.style.transformOrigin = 'center';
document.body.appendChild(block);
function animateBlock() {
block.style.transform = `rotate(${angle}deg)`;
angle += 1;
if (angle >= 360) {
angle -= 360;
}
requestAnimationFrame(animateBlock);
}
let angle = 0;
animateBlock();
function createControls() {
const controlsContainer = document.createElement('div');
controlsContainer.style.position = 'fixed';
controlsContainer.style.top = '10px';
controlsContainer.style.left = '10px';
controlsContainer.style.backgroundColor = 'rgba(255, 255, 255, 0.5)';
controlsContainer.style.padding = '10px';
controlsContainer.style.borderRadius = '5px';
document.body.appendChild(controlsContainer);
const speedLabel = document.createElement('label');
speedLabel.textContent = 'Rotation Speed:';
controlsContainer.appendChild(speedLabel);
const speedInput = document.createElement('input');
speedInput.type = 'range';
speedInput.min = '1';
speedInput.max = '10';
speedInput.value = '1';
speedInput.style.marginLeft = '5px';
controlsContainer.appendChild(speedInput);
speedInput.addEventListener('input', () => {
const speed = parseFloat(speedInput.value);
angle += speed;
});
}
createControls();
function createResetButton() {
const resetButton = document.createElement('button');
resetButton.textContent = 'Reset Rotation';
resetButton.style.position = 'fixed';
resetButton.style.bottom = '10px';
resetButton.style.left = '10px';
resetButton.style.padding = '10px';
resetButton.style.border = 'none';
resetButton.style.backgroundColor = 'rgba(255, 255, 255, 0.5)';
resetButton.style.borderRadius = '5px';
document.body.appendChild(resetButton);
resetButton.addEventListener('click', () => {
angle = 0;
});
}
createResetButton();
import { createCanvas } from 'canvas';
const PER_ROW = 3, PER_PAGE = 9;
const A4_W = 2480, A4_H = 3508;
const CARD_W = 697, CARD_H = 1016;
const INIT_X = 193, INIT_Y = 229;
export const renderDeckPDF = async (cards) => {
const pdfCanvas = createCanvas(A4_W, A4_H, 'pdf');
const ctx = pdfCanvas.getContext('2d');
for (const i in cards) {
if (i != 0 && i % PER_PAGE === 0 && i !== cards.length - 1) {
await ctx.addPage();
}
const card = cards[i];
const cardCanvas = await card.render();
const x = (i % PER_PAGE) % PER_ROW, y = Math.floor((i % PER_PAGE) / PER_ROW);
ctx.drawImage(cardCanvas, INIT_X + x * (CARD_W + 1), INIT_Y + y * (CARD_H + 1), CARD_W, CARD_H);
}
return pdfCanvas;
};
const { Card } = require('./cardNode.js');
const getCard = async (data, {
picPath,
moldPath = './mold',
type = 'image/png',
size = 813,
}) => {
const card = new Card({
data,
size,
picPath,
moldPath,
});
const canvas = await card.render();
return canvas.toBuffer(type);
};
module.exports.getCard = getCard;
var mapping = {
"按钮索引": "自定义键名称"
}
var ketMapping = {
4: 'L1',
6: 'L2',
5: 'R1',
7: 'R2',
8: 'START',
9: 'SELECT',
10: 'axes-1',
11: 'axes-2',
1: 'A',
2: 'B',
0: 'AA',
3: 'BB',
}
var _pad = new PAD(ketMapping, function (button) {
console.log('按下:', button);
}, function (button) {
console.log('抬起:', button)
});
_pad.connected = function (pad) {
$('#info').text('连接:'+pad.id)
}
_pad.dconnected=function(pad){
$('#info').text('移除:'+pad.id)
}
_pad.Listener();
var PAD = function (mapping, onPress, onRelease, continuous) {
var pullInterval = null;
var keyDown = {};
var axesDown = {};
var sended = {};
this.connected = function () { };
this.dconnected = function () { };
this.Listener = function (raf) {
raf = raf || 16;
var self = this;
self.onPress = onPress;
self.onRelease = onRelease;
window.addEventListener('gamepaddisconnected', function (e) {
clearInterval(pullInterval);
self.gamepad = null;
self.dconnected(e.gamepad);
});
window.addEventListener('gamepadconnected', function (e) {
self.connected(e.gamepad);
self.gamepad = e.gamepad;
pullInterval = setInterval(function () {
self.getKey();
}, raf);
});
}
this.getKey = function () {
var self = this;
var pad = navigator.getGamepads()[self.gamepad.index];
if (pad) {
for (var index in mapping) {
index = parseInt(index)
var key = mapping[index];
var button = pad.buttons[index];
var oldState = keyDown[index];
keyDown[index] = button.pressed;
if (button && button.pressed) {
if (continuous === true) {
self.onPress({ keyCode: index, 'key': key, button });
} else {
if (!sended[key]) {
sended[key] = true;
self.onPress({ keyCode: index, 'key': key, button });
}
}
} else if (button && !button.pressed && oldState) {
delete sended[key];
self.onRelease({ keyCode: index, 'key': key, button });
}
}
if (pad.axes[1] < -0.5) {
axesDown['ArrowUp'] = true;
if (continuous === true) {
self.onPress({ 'key': 'ArrowUp', keyCode: 38, axes: pad.axes });
} else {
if (!sended['ArrowUp']) {
sended['ArrowUp'] = true;
self.onPress({ 'key': 'ArrowUp', keyCode: 38, axes: pad.axes });
}
}
}
else if (axesDown['ArrowUp']) {
delete sended['ArrowUp'];
axesDown['ArrowUp'] = false;
self.onRelease({ 'key': 'ArrowUp', keyCode: 38, axes: pad.axes });
}
if (pad.axes[1] > 0.5) {
axesDown['ArrowDown'] = true;
if (continuous === true) {
self.onPress({ 'key': 'ArrowDown', keyCode: 40, axes: pad.axes });
} else {
if (!sended['ArrowDown']) {
sended['ArrowDown'] = true;
self.onPress({ 'key': 'ArrowDown', keyCode: 40, axes: pad.axes });
}
}
} else if (axesDown['ArrowDown']) {
delete sended['ArrowDown'];
axesDown['ArrowDown'] = false;
self.onRelease({ 'key': 'ArrowDown', keyCode: 40, axes: pad.axes });
}
if (pad.axes[0] < -0.5) {
axesDown['ArrowLeft'] = true;
if (continuous === true) {
self.onPress({ 'key': 'ArrowLeft', keyCode: 37, axes: pad.axes });
} else {
if (!sended['ArrowLeft']) {
sended['ArrowLeft'] = true;
self.onPress({ 'key': 'ArrowLeft', keyCode: 37, axes: pad.axes });
}
}
} else if (axesDown['ArrowLeft']) {
delete sended['ArrowLeft'];
axesDown['ArrowLeft'] = false;
self.onRelease({ 'key': 'ArrowLeft', keyCode: 37, axes: pad.axes });
}
if (pad.axes[0] > 0.5) {
axesDown['ArrowRight'] = true;
if (continuous === true) {
self.onPress({ 'key': 'ArrowRight', keyCode: 39, axes: pad.axes });
} else {
if (!sended['ArrowRight']) {
sended['ArrowRight'] = true;
self.onPress({ 'key': 'ArrowRight', keyCode: 39, axes: pad.axes });
}
}
} else if (axesDown['ArrowRight']) {
delete sended['ArrowRight'];
axesDown['ArrowRight'] = false;
self.onRelease({ 'key': 'ArrowRight', keyCode: 39, axes: pad.axes });
}
}
}
}