noxious/spritesheet-generator
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

format

Browse Source
This commit is contained in:
Dennis Postma 2025-04-04 03:23:15 +02:00
parent f6c089ba58
commit 100bacc471
1 changed files with 20 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
src/components/MainContent.vue
View File

@ -11,14 +11,30 @@
</div> </div>
</div> </div>
<div class="p-6"> <div class="p-6">
<div ref="containerEl" class="relative overflow-auto bg-gray-700 rounded border border-gray-600 h-96" :class="{ 'cursor-grab': !isPanning, 'cursor-grabbing': isPanning }"> <div
ref="containerEl"
class="relative overflow-auto rounded border border-gray-600 h-96"
:class="{ 'cursor-grab': !isPanning, 'cursor-grabbing': isPanning }"
:style="{
backgroundImage: `
linear-gradient(45deg, #1a1a1a 25%, transparent 25%),
linear-gradient(-45deg, #1a1a1a 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, #1a1a1a 75%),
linear-gradient(-45deg, transparent 75%, #1a1a1a 75%)
`,
backgroundSize: '20px 20px',
backgroundPosition: '0 0, 0 10px, 10px -10px, -10px 0px',
backgroundColor: '#2d3748',
}"
>
<canvas <canvas
ref="canvasEl" ref="canvasEl"
class="block" class="block pixel-art"
:style="{ :style="{
transform: `scale(${store.zoomLevel.value})`, transform: `scale(${store.zoomLevel.value})`,
transformOrigin: 'top left', transformOrigin: 'top left',
imageRendering: 'pixelated', // Keep pixel art sharp when zooming imageRendering: 'pixelated',
backgroundColor: 'transparent',
}" }"
></canvas> ></canvas>
</div> </div>
@ -101,16 +117,7 @@
); );
const setupCheckerboardPattern = () => { const setupCheckerboardPattern = () => {
if (!canvasEl.value) return; // Remove this function or leave it empty since we don't need it anymore
canvasEl.value.style.backgroundImage = `
linear-gradient(45deg, #1a1a1a 25%, transparent 25%),
linear-gradient(-45deg, #1a1a1a 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, #1a1a1a 75%),
linear-gradient(-45deg, transparent 75%, #1a1a1a 75%)
`;
canvasEl.value.style.backgroundSize = '20px 20px';
canvasEl.value.style.backgroundPosition = '0 0, 0 10px, 10px -10px, -10px 0px';
}; };
const updateCanvasSize = () => { const updateCanvasSize = () => {