example.js
· 16 KiB · JavaScript
原始文件
function generateSVG(grid, config) {
const { cellSize, radius, strokeWidth } = config;
const width = grid[0].length * cellSize;
const height = grid.length * cellSize;
let svg = `<svg width="${width}" height="${height}" xmlns="http://www.w3.org/2000/svg">`;
for (let row = 0; row < grid.length; row++) {
for (let col = 0; col < grid[row].length; col++) {
const cx = col * cellSize + cellSize / 2;
const cy = row * cellSize + cellSize / 2;
const circumference = 2 * Math.PI * radius;
const isClockwise = (row + col) % 2 === 0;
const initialOffset = isClockwise ? circumference : -circumference;
const squareX = cx - radius;
const squareY = cy - radius;
const squareSize = 2 * radius;
svg += `<rect x="${squareX}" y="${squareY}" width="${squareSize}" height="${squareSize}" rx="${radius}" ry="${radius}" fill="black" opacity="0" id="square_${row}_${col}"></rect>`;
svg += `<circle cx="${cx}" cy="${cy}" r="${radius}" fill="none" stroke="black" stroke-width="${strokeWidth}" stroke-dasharray="${circumference}" stroke-dashoffset="${initialOffset}" id="circle_${row}_${col}"></circle>`;
if (grid[row][col]) {
svg += `<circle cx="${cx}" cy="${cy}" r="0" fill="black" id="inner_${row}_${col}"></circle>`;
}
}
}
svg += '</svg>';
return svg;
}
function replaceAndAnimate(grid, config) {
const svgString = generateSVG(grid, config);
const existingSVG = document.querySelector('svg');
if (existingSVG) {
existingSVG.outerHTML = svgString;
animateCircles(grid, config);
} else {
console.log('SVG не найден на странице');
}
}
function animateCircles(grid, config) {
const { radius, cellSize, arcDur, arcDelayStep, fillDur, fillDelayStep, squareDur, shrinkDur, moveDur, shrinkFactor, moveFactor } = config;
const rows = grid.length;
const cols = grid[0].length;
const centerRow = Math.floor(rows / 2);
const centerCol = Math.floor(cols / 2);
const centerX = centerCol * cellSize + cellSize / 2 - radius;
const centerY = centerRow * cellSize + cellSize / 2 - radius;
const circles = [];
const squares = [];
const inners = [];
for (let row = 0; row < rows; row++) {
circles[row] = [];
squares[row] = [];
inners[row] = [];
for (let col = 0; col < cols; col++) {
circles[row][col] = document.getElementById(`circle_${row}_${col}`);
squares[row][col] = document.getElementById(`square_${row}_${col}`);
inners[row][col] = grid[row][col] ? document.getElementById(`inner_${row}_${col}`) : null;
}
}
const arcDelays = [];
for (let row = 0; row < rows; row++) {
arcDelays[row] = [];
for (let col = 0; col < cols; col++) {
arcDelays[row][col] = (row + col) * arcDelayStep;
}
}
const maxDelayFirst = (rows + cols - 2) * arcDelayStep;
for (let row = 0; row < rows; row++) {
for (let col = 0; col < cols; col++) {
const circle = circles[row][col];
if (circle) {
const isClockwise = (row + col) % 2 === 0;
setTimeout(() => {
animateDashOffset(circle, isClockwise, 2 * Math.PI * radius, arcDur);
}, arcDelays[row][col]);
}
}
}
setTimeout(() => {
const fillDelays = [];
let maxDistance = 0;
for (let row = 0; row < rows; row++) {
for (let col = 0; col < cols; col++) {
if (grid[row][col]) {
const distance = Math.sqrt((row - centerRow) ** 2 + (col - centerCol) ** 2);
fillDelays.push({ row, col, delay: distance * fillDelayStep });
maxDistance = Math.max(maxDistance, distance);
}
}
}
const maxDelaySecond = maxDistance * fillDelayStep;
fillDelays.forEach(({ row, col, delay }) => {
const innerCircle = inners[row][col];
if (innerCircle) {
setTimeout(() => {
animateRadius(innerCircle, 0, radius, fillDur);
}, delay);
}
});
setTimeout(() => {
for (let row = 0; row < rows; row++) {
for (let col = 0; col < cols; col++) {
const circle = circles[row][col];
const square = squares[row][col];
const inner = inners[row][col];
if (grid[row][col]) {
animateToSquare(circle, square, inner, radius, squareDur);
} else {
animateFadeOut(circle, squareDur);
square.remove();
}
}
}
setTimeout(() => {
for (let row = 0; row < rows; row++) {
for (let col = 0; col < cols; col++) {
if (grid[row][col]) {
const square = squares[row][col];
animateShrink(square, 2 * radius, 2 * radius * shrinkFactor, shrinkDur);
}
}
}
setTimeout(() => {
for (let row = 0; row < rows; row++) {
for (let col = 0; col < cols; col++) {
if (grid[row][col]) {
const square = squares[row][col];
const currentX = parseFloat(square.getAttribute('x'));
const currentY = parseFloat(square.getAttribute('y'));
const toX = currentX + (centerX - currentX) * moveFactor;
const toY = currentY + (centerY - currentY) * moveFactor;
animateMove(square, currentX, currentY, toX, toY, moveDur);
}
}
}
setTimeout(() => {
const svg = document.querySelector('svg');
svg.style.borderRadius = '10%';
svg.style.border = '5px black dotted';
}, moveDur);
}, shrinkDur);
}, squareDur);
}, maxDelaySecond + fillDur);
}, maxDelayFirst + arcDur);
}
function animateDashOffset(element, isClockwise, circumference, duration) {
const startTime = performance.now();
const from = isClockwise ? circumference : -circumference;
const to = 0;
const step = () => {
const elapsed = performance.now() - startTime;
const progress = Math.min(elapsed / duration, 1);
const currentOffset = from + (to - from) * progress;
element.setAttribute('stroke-dashoffset', currentOffset);
if (progress < 1) {
requestAnimationFrame(step);
}
};
requestAnimationFrame(step);
}
function animateRadius(element, from, to, duration) {
const startTime = performance.now();
const step = () => {
const elapsed = performance.now() - startTime;
const progress = Math.min(elapsed / duration, 1);
const currentRadius = from + (to - from) * progress;
element.setAttribute('r', currentRadius);
if (progress < 1) {
requestAnimationFrame(step);
}
};
requestAnimationFrame(step);
}
function animateToSquare(circle, square, inner, radius, duration) {
const startTime = performance.now();
const step = () => {
const elapsed = performance.now() - startTime;
const progress = Math.min(elapsed / duration, 1);
const currentRxRy = radius * (1 - progress);
const currentOpacity = progress;
square.setAttribute('rx', currentRxRy);
square.setAttribute('ry', currentRxRy);
square.setAttribute('opacity', currentOpacity);
circle.setAttribute('opacity', 1 - progress);
if (progress < 1) {
requestAnimationFrame(step);
} else {
circle.remove();
if (inner) inner.remove();
if (currentOpacity === 1) square.removeAttribute('opacity');
}
};
requestAnimationFrame(step);
}
function animateFadeOut(element, duration) {
const startTime = performance.now();
const step = () => {
const elapsed = performance.now() - startTime;
const progress = Math.min(elapsed / duration, 1);
const currentOpacity = 1 - progress;
element.setAttribute('opacity', currentOpacity);
if (progress < 1) {
requestAnimationFrame(step);
} else {
element.remove();
}
};
requestAnimationFrame(step);
}
function animateShrink(element, fromSize, toSize, duration) {
const startTime = performance.now();
const step = () => {
const elapsed = performance.now() - startTime;
const progress = Math.min(elapsed / duration, 1);
const currentSize = fromSize + (toSize - fromSize) * progress;
element.setAttribute('width', currentSize);
element.setAttribute('height', currentSize);
if (progress < 1) {
requestAnimationFrame(step);
}
};
requestAnimationFrame(step);
}
function animateMove(element, fromX, fromY, toX, toY, duration) {
const startTime = performance.now();
const step = () => {
const elapsed = performance.now() - startTime;
const progress = Math.min(elapsed / duration, 1);
const currentX = fromX + (toX - fromX) * progress;
const currentY = fromY + (toY - fromY) * progress;
element.setAttribute('x', currentX);
element.setAttribute('y', currentY);
if (progress < 1) {
requestAnimationFrame(step);
}
};
requestAnimationFrame(step);
}
// Пример использования:
const config = {
cellSize: 22.5,
radius: 10,
strokeWidth: 2,
arcDur: 500,
arcDelayStep: 100,
fillDur: 500,
fillDelayStep: 100,
squareDur: 2000,
shrinkDur: 300,
moveDur: 1000,
shrinkFactor: 0.9,
moveFactor: 0.2
};
const arr = [[true, true, true, true, true, true, true, false, false, false, false, true, false, false, true, true, false, false, true, true, false, false, true, true, true, true, true, true, true], [true, false, false, false, false, false, true, false, true, true, false, false, true, true, false, false, true, false, false, false, true, false, true, false, false, false, false, false, true], [true, false, true, true, true, false, true, false, false, false, true, true, true, false, false, false, false, false, true, false, true, false, true, false, true, true, true, false, true], [true, false, true, true, true, false, true, false, true, false, true, true, true, false, false, false, false, true, false, true, true, false, true, false, true, true, true, false, true], [true, false, true, true, true, false, true, false, true, true, false, true, false, true, true, false, false, true, true, true, false, false, true, false, true, true, true, false, true], [true, false, false, false, false, false, true, false, false, false, false, true, true, false, false, true, false, true, true, false, false, false, true, false, false, false, false, false, true], [true, true, true, true, true, true, true, false, true, false, true, false, true, false, true, false, true, false, true, false, true, false, true, true, true, true, true, true, true], [false, false, false, false, false, false, false, false, true, true, false, true, false, true, false, false, true, false, false, false, true, false, false, false, false, false, false, false, false], [false, true, false, true, true, true, true, false, true, true, false, false, false, false, false, false, false, false, true, true, true, true, true, false, true, true, false, true, false], [false, true, true, true, false, true, false, false, true, false, true, true, false, true, true, true, false, false, false, false, true, true, true, false, true, false, true, false, false], [false, false, true, true, false, true, true, false, true, false, true, true, true, true, true, true, true, true, false, false, false, false, true, false, true, true, true, false, false], [false, true, true, false, false, false, false, true, false, false, true, true, false, true, true, false, true, true, true, false, false, false, true, true, true, false, false, false, true], [false, false, true, false, true, false, true, true, true, true, false, false, false, false, false, true, false, true, true, true, false, true, true, true, false, false, true, true, false], [true, true, false, false, false, true, false, false, false, true, false, false, true, false, false, true, false, true, true, false, false, false, true, false, true, false, true, false, false], [false, false, true, true, false, true, true, false, false, false, false, true, true, true, true, false, true, true, false, true, true, false, false, true, false, false, false, false, false], [false, true, true, true, true, false, false, false, true, false, true, false, true, true, false, true, false, true, true, true, false, false, false, true, false, true, true, false, false], [true, false, false, true, true, false, true, false, false, false, false, true, false, true, true, true, true, true, false, true, true, false, true, true, true, false, false, false, true], [true, false, false, true, true, true, false, true, false, true, true, false, false, false, false, false, true, false, true, false, true, false, true, false, false, true, true, false, true], [true, true, true, true, true, false, true, true, false, true, true, false, true, false, false, true, false, false, false, false, true, true, true, true, false, true, false, false, true], [true, true, false, true, false, true, false, true, false, false, true, false, false, false, true, false, false, true, true, false, false, false, false, true, false, false, false, false, false], [true, true, false, true, true, true, true, false, true, false, true, true, true, false, true, true, true, false, false, false, true, true, true, true, true, true, false, false, false], [false, false, false, false, false, false, false, false, true, false, false, true, true, false, false, false, false, false, true, false, true, false, false, false, true, true, false, true, true], [true, true, true, true, true, true, true, false, false, false, false, false, true, true, true, false, false, true, true, true, true, false, true, false, true, false, true, true, false], [true, false, false, false, false, false, true, false, true, true, true, false, true, true, false, true, false, true, false, true, true, false, false, false, true, true, false, true, true], [true, false, true, true, true, false, true, false, true, true, false, false, true, false, true, false, true, true, true, true, true, true, true, true, true, true, false, true, true], [true, false, true, true, true, false, true, false, true, true, true, true, true, true, false, false, true, false, false, false, false, true, false, false, false, true, true, false, false], [true, false, true, true, true, false, true, false, false, false, true, false, false, false, true, false, true, false, true, false, false, false, false, true, true, false, false, true, true], [true, false, false, false, false, false, true, false, true, true, false, false, true, true, true, true, false, false, false, true, true, false, true, false, true, false, true, false, true], [true, true, true, true, true, true, true, false, false, true, false, false, true, false, false, false, true, true, true, false, true, false, false, false, false, true, true, false, false]];
replaceAndAnimate(arr, config);
| 1 | function generateSVG(grid, config) { |
| 2 | const { cellSize, radius, strokeWidth } = config; |
| 3 | const width = grid[0].length * cellSize; |
| 4 | const height = grid.length * cellSize; |
| 5 | |
| 6 | let svg = `<svg width="${width}" height="${height}" xmlns="http://www.w3.org/2000/svg">`; |
| 7 | for (let row = 0; row < grid.length; row++) { |
| 8 | for (let col = 0; col < grid[row].length; col++) { |
| 9 | const cx = col * cellSize + cellSize / 2; |
| 10 | const cy = row * cellSize + cellSize / 2; |
| 11 | |
| 12 | const circumference = 2 * Math.PI * radius; |
| 13 | const isClockwise = (row + col) % 2 === 0; |
| 14 | const initialOffset = isClockwise ? circumference : -circumference; |
| 15 | |
| 16 | const squareX = cx - radius; |
| 17 | const squareY = cy - radius; |
| 18 | const squareSize = 2 * radius; |
| 19 | svg += `<rect x="${squareX}" y="${squareY}" width="${squareSize}" height="${squareSize}" rx="${radius}" ry="${radius}" fill="black" opacity="0" id="square_${row}_${col}"></rect>`; |
| 20 | |
| 21 | svg += `<circle cx="${cx}" cy="${cy}" r="${radius}" fill="none" stroke="black" stroke-width="${strokeWidth}" stroke-dasharray="${circumference}" stroke-dashoffset="${initialOffset}" id="circle_${row}_${col}"></circle>`; |
| 22 | if (grid[row][col]) { |
| 23 | svg += `<circle cx="${cx}" cy="${cy}" r="0" fill="black" id="inner_${row}_${col}"></circle>`; |
| 24 | } |
| 25 | } |
| 26 | } |
| 27 | |
| 28 | svg += '</svg>'; |
| 29 | return svg; |
| 30 | } |
| 31 | |
| 32 | function replaceAndAnimate(grid, config) { |
| 33 | const svgString = generateSVG(grid, config); |
| 34 | const existingSVG = document.querySelector('svg'); |
| 35 | if (existingSVG) { |
| 36 | existingSVG.outerHTML = svgString; |
| 37 | animateCircles(grid, config); |
| 38 | } else { |
| 39 | console.log('SVG не найден на странице'); |
| 40 | } |
| 41 | } |
| 42 | |
| 43 | function animateCircles(grid, config) { |
| 44 | const { radius, cellSize, arcDur, arcDelayStep, fillDur, fillDelayStep, squareDur, shrinkDur, moveDur, shrinkFactor, moveFactor } = config; |
| 45 | |
| 46 | const rows = grid.length; |
| 47 | const cols = grid[0].length; |
| 48 | const centerRow = Math.floor(rows / 2); |
| 49 | const centerCol = Math.floor(cols / 2); |
| 50 | const centerX = centerCol * cellSize + cellSize / 2 - radius; |
| 51 | const centerY = centerRow * cellSize + cellSize / 2 - radius; |
| 52 | |
| 53 | const circles = []; |
| 54 | const squares = []; |
| 55 | const inners = []; |
| 56 | for (let row = 0; row < rows; row++) { |
| 57 | circles[row] = []; |
| 58 | squares[row] = []; |
| 59 | inners[row] = []; |
| 60 | for (let col = 0; col < cols; col++) { |
| 61 | circles[row][col] = document.getElementById(`circle_${row}_${col}`); |
| 62 | squares[row][col] = document.getElementById(`square_${row}_${col}`); |
| 63 | inners[row][col] = grid[row][col] ? document.getElementById(`inner_${row}_${col}`) : null; |
| 64 | } |
| 65 | } |
| 66 | |
| 67 | const arcDelays = []; |
| 68 | for (let row = 0; row < rows; row++) { |
| 69 | arcDelays[row] = []; |
| 70 | for (let col = 0; col < cols; col++) { |
| 71 | arcDelays[row][col] = (row + col) * arcDelayStep; |
| 72 | } |
| 73 | } |
| 74 | const maxDelayFirst = (rows + cols - 2) * arcDelayStep; |
| 75 | |
| 76 | for (let row = 0; row < rows; row++) { |
| 77 | for (let col = 0; col < cols; col++) { |
| 78 | const circle = circles[row][col]; |
| 79 | if (circle) { |
| 80 | const isClockwise = (row + col) % 2 === 0; |
| 81 | setTimeout(() => { |
| 82 | animateDashOffset(circle, isClockwise, 2 * Math.PI * radius, arcDur); |
| 83 | }, arcDelays[row][col]); |
| 84 | } |
| 85 | } |
| 86 | } |
| 87 | |
| 88 | setTimeout(() => { |
| 89 | const fillDelays = []; |
| 90 | let maxDistance = 0; |
| 91 | for (let row = 0; row < rows; row++) { |
| 92 | for (let col = 0; col < cols; col++) { |
| 93 | if (grid[row][col]) { |
| 94 | const distance = Math.sqrt((row - centerRow) ** 2 + (col - centerCol) ** 2); |
| 95 | fillDelays.push({ row, col, delay: distance * fillDelayStep }); |
| 96 | maxDistance = Math.max(maxDistance, distance); |
| 97 | } |
| 98 | } |
| 99 | } |
| 100 | const maxDelaySecond = maxDistance * fillDelayStep; |
| 101 | |
| 102 | fillDelays.forEach(({ row, col, delay }) => { |
| 103 | const innerCircle = inners[row][col]; |
| 104 | if (innerCircle) { |
| 105 | setTimeout(() => { |
| 106 | animateRadius(innerCircle, 0, radius, fillDur); |
| 107 | }, delay); |
| 108 | } |
| 109 | }); |
| 110 | |
| 111 | setTimeout(() => { |
| 112 | for (let row = 0; row < rows; row++) { |
| 113 | for (let col = 0; col < cols; col++) { |
| 114 | const circle = circles[row][col]; |
| 115 | const square = squares[row][col]; |
| 116 | const inner = inners[row][col]; |
| 117 | if (grid[row][col]) { |
| 118 | animateToSquare(circle, square, inner, radius, squareDur); |
| 119 | } else { |
| 120 | animateFadeOut(circle, squareDur); |
| 121 | square.remove(); |
| 122 | } |
| 123 | } |
| 124 | } |
| 125 | |
| 126 | setTimeout(() => { |
| 127 | for (let row = 0; row < rows; row++) { |
| 128 | for (let col = 0; col < cols; col++) { |
| 129 | if (grid[row][col]) { |
| 130 | const square = squares[row][col]; |
| 131 | animateShrink(square, 2 * radius, 2 * radius * shrinkFactor, shrinkDur); |
| 132 | } |
| 133 | } |
| 134 | } |
| 135 | |
| 136 | setTimeout(() => { |
| 137 | for (let row = 0; row < rows; row++) { |
| 138 | for (let col = 0; col < cols; col++) { |
| 139 | if (grid[row][col]) { |
| 140 | const square = squares[row][col]; |
| 141 | const currentX = parseFloat(square.getAttribute('x')); |
| 142 | const currentY = parseFloat(square.getAttribute('y')); |
| 143 | const toX = currentX + (centerX - currentX) * moveFactor; |
| 144 | const toY = currentY + (centerY - currentY) * moveFactor; |
| 145 | animateMove(square, currentX, currentY, toX, toY, moveDur); |
| 146 | } |
| 147 | } |
| 148 | } |
| 149 | |
| 150 | setTimeout(() => { |
| 151 | const svg = document.querySelector('svg'); |
| 152 | svg.style.borderRadius = '10%'; |
| 153 | svg.style.border = '5px black dotted'; |
| 154 | }, moveDur); |
| 155 | }, shrinkDur); |
| 156 | }, squareDur); |
| 157 | }, maxDelaySecond + fillDur); |
| 158 | }, maxDelayFirst + arcDur); |
| 159 | } |
| 160 | |
| 161 | function animateDashOffset(element, isClockwise, circumference, duration) { |
| 162 | const startTime = performance.now(); |
| 163 | const from = isClockwise ? circumference : -circumference; |
| 164 | const to = 0; |
| 165 | const step = () => { |
| 166 | const elapsed = performance.now() - startTime; |
| 167 | const progress = Math.min(elapsed / duration, 1); |
| 168 | const currentOffset = from + (to - from) * progress; |
| 169 | element.setAttribute('stroke-dashoffset', currentOffset); |
| 170 | if (progress < 1) { |
| 171 | requestAnimationFrame(step); |
| 172 | } |
| 173 | }; |
| 174 | requestAnimationFrame(step); |
| 175 | } |
| 176 | |
| 177 | function animateRadius(element, from, to, duration) { |
| 178 | const startTime = performance.now(); |
| 179 | const step = () => { |
| 180 | const elapsed = performance.now() - startTime; |
| 181 | const progress = Math.min(elapsed / duration, 1); |
| 182 | const currentRadius = from + (to - from) * progress; |
| 183 | element.setAttribute('r', currentRadius); |
| 184 | if (progress < 1) { |
| 185 | requestAnimationFrame(step); |
| 186 | } |
| 187 | }; |
| 188 | requestAnimationFrame(step); |
| 189 | } |
| 190 | |
| 191 | function animateToSquare(circle, square, inner, radius, duration) { |
| 192 | const startTime = performance.now(); |
| 193 | const step = () => { |
| 194 | const elapsed = performance.now() - startTime; |
| 195 | const progress = Math.min(elapsed / duration, 1); |
| 196 | const currentRxRy = radius * (1 - progress); |
| 197 | const currentOpacity = progress; |
| 198 | square.setAttribute('rx', currentRxRy); |
| 199 | square.setAttribute('ry', currentRxRy); |
| 200 | square.setAttribute('opacity', currentOpacity); |
| 201 | circle.setAttribute('opacity', 1 - progress); |
| 202 | if (progress < 1) { |
| 203 | requestAnimationFrame(step); |
| 204 | } else { |
| 205 | circle.remove(); |
| 206 | if (inner) inner.remove(); |
| 207 | if (currentOpacity === 1) square.removeAttribute('opacity'); |
| 208 | } |
| 209 | }; |
| 210 | requestAnimationFrame(step); |
| 211 | } |
| 212 | |
| 213 | function animateFadeOut(element, duration) { |
| 214 | const startTime = performance.now(); |
| 215 | const step = () => { |
| 216 | const elapsed = performance.now() - startTime; |
| 217 | const progress = Math.min(elapsed / duration, 1); |
| 218 | const currentOpacity = 1 - progress; |
| 219 | element.setAttribute('opacity', currentOpacity); |
| 220 | if (progress < 1) { |
| 221 | requestAnimationFrame(step); |
| 222 | } else { |
| 223 | element.remove(); |
| 224 | } |
| 225 | }; |
| 226 | requestAnimationFrame(step); |
| 227 | } |
| 228 | |
| 229 | function animateShrink(element, fromSize, toSize, duration) { |
| 230 | const startTime = performance.now(); |
| 231 | const step = () => { |
| 232 | const elapsed = performance.now() - startTime; |
| 233 | const progress = Math.min(elapsed / duration, 1); |
| 234 | const currentSize = fromSize + (toSize - fromSize) * progress; |
| 235 | element.setAttribute('width', currentSize); |
| 236 | element.setAttribute('height', currentSize); |
| 237 | if (progress < 1) { |
| 238 | requestAnimationFrame(step); |
| 239 | } |
| 240 | }; |
| 241 | requestAnimationFrame(step); |
| 242 | } |
| 243 | |
| 244 | function animateMove(element, fromX, fromY, toX, toY, duration) { |
| 245 | const startTime = performance.now(); |
| 246 | const step = () => { |
| 247 | const elapsed = performance.now() - startTime; |
| 248 | const progress = Math.min(elapsed / duration, 1); |
| 249 | const currentX = fromX + (toX - fromX) * progress; |
| 250 | const currentY = fromY + (toY - fromY) * progress; |
| 251 | element.setAttribute('x', currentX); |
| 252 | element.setAttribute('y', currentY); |
| 253 | if (progress < 1) { |
| 254 | requestAnimationFrame(step); |
| 255 | } |
| 256 | }; |
| 257 | requestAnimationFrame(step); |
| 258 | } |
| 259 | |
| 260 | // Пример использования: |
| 261 | const config = { |
| 262 | cellSize: 22.5, |
| 263 | radius: 10, |
| 264 | strokeWidth: 2, |
| 265 | arcDur: 500, |
| 266 | arcDelayStep: 100, |
| 267 | fillDur: 500, |
| 268 | fillDelayStep: 100, |
| 269 | squareDur: 2000, |
| 270 | shrinkDur: 300, |
| 271 | moveDur: 1000, |
| 272 | shrinkFactor: 0.9, |
| 273 | moveFactor: 0.2 |
| 274 | }; |
| 275 | const arr = [[true, true, true, true, true, true, true, false, false, false, false, true, false, false, true, true, false, false, true, true, false, false, true, true, true, true, true, true, true], [true, false, false, false, false, false, true, false, true, true, false, false, true, true, false, false, true, false, false, false, true, false, true, false, false, false, false, false, true], [true, false, true, true, true, false, true, false, false, false, true, true, true, false, false, false, false, false, true, false, true, false, true, false, true, true, true, false, true], [true, false, true, true, true, false, true, false, true, false, true, true, true, false, false, false, false, true, false, true, true, false, true, false, true, true, true, false, true], [true, false, true, true, true, false, true, false, true, true, false, true, false, true, true, false, false, true, true, true, false, false, true, false, true, true, true, false, true], [true, false, false, false, false, false, true, false, false, false, false, true, true, false, false, true, false, true, true, false, false, false, true, false, false, false, false, false, true], [true, true, true, true, true, true, true, false, true, false, true, false, true, false, true, false, true, false, true, false, true, false, true, true, true, true, true, true, true], [false, false, false, false, false, false, false, false, true, true, false, true, false, true, false, false, true, false, false, false, true, false, false, false, false, false, false, false, false], [false, true, false, true, true, true, true, false, true, true, false, false, false, false, false, false, false, false, true, true, true, true, true, false, true, true, false, true, false], [false, true, true, true, false, true, false, false, true, false, true, true, false, true, true, true, false, false, false, false, true, true, true, false, true, false, true, false, false], [false, false, true, true, false, true, true, false, true, false, true, true, true, true, true, true, true, true, false, false, false, false, true, false, true, true, true, false, false], [false, true, true, false, false, false, false, true, false, false, true, true, false, true, true, false, true, true, true, false, false, false, true, true, true, false, false, false, true], [false, false, true, false, true, false, true, true, true, true, false, false, false, false, false, true, false, true, true, true, false, true, true, true, false, false, true, true, false], [true, true, false, false, false, true, false, false, false, true, false, false, true, false, false, true, false, true, true, false, false, false, true, false, true, false, true, false, false], [false, false, true, true, false, true, true, false, false, false, false, true, true, true, true, false, true, true, false, true, true, false, false, true, false, false, false, false, false], [false, true, true, true, true, false, false, false, true, false, true, false, true, true, false, true, false, true, true, true, false, false, false, true, false, true, true, false, false], [true, false, false, true, true, false, true, false, false, false, false, true, false, true, true, true, true, true, false, true, true, false, true, true, true, false, false, false, true], [true, false, false, true, true, true, false, true, false, true, true, false, false, false, false, false, true, false, true, false, true, false, true, false, false, true, true, false, true], [true, true, true, true, true, false, true, true, false, true, true, false, true, false, false, true, false, false, false, false, true, true, true, true, false, true, false, false, true], [true, true, false, true, false, true, false, true, false, false, true, false, false, false, true, false, false, true, true, false, false, false, false, true, false, false, false, false, false], [true, true, false, true, true, true, true, false, true, false, true, true, true, false, true, true, true, false, false, false, true, true, true, true, true, true, false, false, false], [false, false, false, false, false, false, false, false, true, false, false, true, true, false, false, false, false, false, true, false, true, false, false, false, true, true, false, true, true], [true, true, true, true, true, true, true, false, false, false, false, false, true, true, true, false, false, true, true, true, true, false, true, false, true, false, true, true, false], [true, false, false, false, false, false, true, false, true, true, true, false, true, true, false, true, false, true, false, true, true, false, false, false, true, true, false, true, true], [true, false, true, true, true, false, true, false, true, true, false, false, true, false, true, false, true, true, true, true, true, true, true, true, true, true, false, true, true], [true, false, true, true, true, false, true, false, true, true, true, true, true, true, false, false, true, false, false, false, false, true, false, false, false, true, true, false, false], [true, false, true, true, true, false, true, false, false, false, true, false, false, false, true, false, true, false, true, false, false, false, false, true, true, false, false, true, true], [true, false, false, false, false, false, true, false, true, true, false, false, true, true, true, true, false, false, false, true, true, false, true, false, true, false, true, false, true], [true, true, true, true, true, true, true, false, false, true, false, false, true, false, false, false, true, true, true, false, true, false, false, false, false, true, true, false, false]]; |
| 276 | replaceAndAnimate(arr, config); |
text2json_qr.py
· 724 B · Python
原始文件
import qrcode, json
def generate_qr_boolean_array(text):
qr = qrcode.QRCode(
version=5,
error_correction=qrcode.constants.ERROR_CORRECT_Q,
box_size=1,
border=0,
)
qr.add_data(text)
qr.make(fit=True)
img = qr.make_image(fill_color="black", back_color="white")
width, height = img.size
boolean_array = []
for y in range(height):
row = []
for x in range(width):
pixel = img.getpixel((x, y))
if pixel == 0 or pixel == (0, 0, 0): row.append(True)
else: row.append(False)
boolean_array.append(row)
return boolean_array
print(json.dumps(generate_qr_boolean_array("Hello, world!")))
| 1 | import qrcode, json |
| 2 | |
| 3 | def generate_qr_boolean_array(text): |
| 4 | qr = qrcode.QRCode( |
| 5 | version=5, |
| 6 | error_correction=qrcode.constants.ERROR_CORRECT_Q, |
| 7 | box_size=1, |
| 8 | border=0, |
| 9 | ) |
| 10 | |
| 11 | qr.add_data(text) |
| 12 | qr.make(fit=True) |
| 13 | |
| 14 | img = qr.make_image(fill_color="black", back_color="white") |
| 15 | width, height = img.size |
| 16 | |
| 17 | boolean_array = [] |
| 18 | for y in range(height): |
| 19 | row = [] |
| 20 | for x in range(width): |
| 21 | pixel = img.getpixel((x, y)) |
| 22 | if pixel == 0 or pixel == (0, 0, 0): row.append(True) |
| 23 | else: row.append(False) |
| 24 | boolean_array.append(row) |
| 25 | |
| 26 | return boolean_array |
| 27 | |
| 28 | print(json.dumps(generate_qr_boolean_array("Hello, world!"))) |